Different Ways To Format CSS

Chris Coyier //

This post will focus on the different ways to format CSS, which differs from the different ways to organize CSS. Definitely related concepts, but I think organization has more to do with how things are grouped and ordered while formatting has to do with spacing and indenting.

Formatting has nothing whatsoever to do with how the CSS functions. These are merely aesthetic choices by the coder. But that's not to say formatting isn't important. That would be like saying the choice of canvas isn't important to a painter. It affects how it feels to write CSS, how easy it is to read, how easy it is to navigate, and how easy it is to revisit and reacquaint yourself with previously written CSS.

The reason there are so many choices with CSS formatting is that there are no hard syntax rules when it comes to spacing and line-breaks. For example:

div        {       width:      50px         }

is the same as:

div{width:50px}

is the same as:

div

{

      width: 50px

}

Multi-line Format

.navigation_rss_icon {
	position: absolute;
	left: 940px;
	bottom: 0px;
}
#navigation_rss {
	position: absolute;
	left: 720px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #897567;
	line-height: 2.5em;
}
#navigation_rss li {
	display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
	color: #fffffe;
	text-decoration: none;
	padding: 0px 2px;
	letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
	color: #eed2a1;
	text-decoration: none;
}

I'd wager to say this is the most common. It is the easiest to read when it comes to short snippets, which is why written tutorials most often use this format. The example above doesn't have a blank line between the closing brace and next selector, but that is fairly common as well.

Multi-line Format with Indenting

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
}
    #navigation_rss li {
        display: inline;
    }
        #navigation_rss li a:link, #navigation_rss li a:visited {
            color: #fffffe;
            text-decoration: none;
            padding: 0px 2px;
            letter-spacing: -0.05em;
        }
        #navigation_rss li a:hover {
            color: #eed2a1;
            text-decoration: none;
        }

A block that is indented indicates the selector is a more specific selector than the parent above it that and targets what will be child elements of that above selector.

Single-line Format

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

This is probably the most space and size efficient, short of being completely compressed to remove all spaces and line breaks. This technique would require the least vertical and horizontal scrolling as you write and edit CSS, but at the potential cost of looking messy and somewhat difficult to browse and find things you are looking for.

Single-line Format with Tabbing

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

Single-line Format with Indenting

#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol             { list-style: lower-alpha; }
#content-area ul                    { margin: 0 0 0 5px; list-style: none; }
    #content-area ul li             { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li     { background: none; padding: 0; }

A selector that in indented indicates that the selector targets something that is a child of the selector above it.

Mostly Single-line Format

I prefer the single-line format, but I use Soft-Wrap in my text editor, so that long lines don't go on forever, they wrap at the window edge. So for really long lines with lots of selectors, I put a hard-return and tab over the new line of attributes.

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1                                    { font-size: 36px; }
h2                                    { font-size: 30px; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        text-align: left; }

Variations

The single line format could be taken further by moving the opening brace onto it's own line, which is something I see in PHP quite a bit:

div
{
    padding: 10px;
}

In the multi-lined format with tabbing, I have seen the opening brace used as kind of separator wall:

#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol          {       list-style: lower-alpha; }
#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }
    #content-area ul li          {       padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li  {       background: none; padding: 0; }

Combo

A combination of single-line and multi-line would be only grouping related attributes onto a single line:

.navigation_rss_icon {
    position: absolute;
    top: 10px; left: 10px; bottom: 10px; right: 10px;
    font-size: 12px; font-weight: bold;
}

Readability vs. Scrolling

Your choice of formatting boils down to readability. You need to be able to navigate your CSS quickly and find what you are looking for and make changes quickly. If you find the single-line format difficult because it is hard for your eyes to find the attribute you are looking for, then you should probably avoid it.

Personally I find the multi-line format easy to read, but it increases the length (like actual number of lines) by 5-8x. This actually makes the whole document less readable for me, because of all the vertical scrolling. If you have a somewhat narrow monitor, the single line format might cause a good bit of horizontal scrolling which is sometimes even worse.

The perfect format for you is one that maximizes readability while minimizing scrolling. Plus, in a more abstract sense, it just needs to feel right.