A while ago there was a post by Steve Smith of Ordered List about how he formats his CSS on a single line per selector, brackets and attributes. I call this inline CSS. For the longest time I strictly adhered to a formatting quite the opposite, which I call block CSS. An example of both is shown in Figures 1 and 2.

I'm in the camp that would rather have a file with hundreds of lines than have to look through all of the attributes as they're formatted in Figure 1. However, there are some cases when block CSS seems a little overkill, such as Figure 3.

I began to wonder if maybe I was being too strict with the block-only approach. Surely, it seemed, that the inline approach was more beneficial in some cases. Each had their benefits and liabilities, maybe I could combine the two for one harmonious style sheet?

At some point, I'm not exactly sure when, I did begin to mix the two and my CSS began to look more like what's shown in Figure 4.

Now as far as what determines whether the selector gets the block format or the inline format varies; there's no exact criteria, at least not yet. Generally, selectors with few properties will be written inline and those with more styling will get the block. I found that formatting CSS this way lends itself to an easy-to-follow rhythm as the style sheet grows (Figure 5).

Next up:

vs.

! (Just kidding)