Obviously, any modern designer utilizes CSS to style their work; to truly design their layout. But what is the best way to layout the CSS itself? There are no differences when it comes to how your resulting web page will look, but there are crucial reasons to layout your CSS in a particular way.
For most people, the CSS style that seems to be the most appealing is the one that utilizes plenty of line breaks and tabs. It looks something like this:
The spacing allows everything to be easily read as do the indentations. Selectors and attributes are also simple to identify. It appears to be easy to scan as well. But there is a problem with this type of layout.
Size Does Matter
But what happens when your style sheet is both complex and lengthy? You will end up with an unbearably long, extremely difficult to scan style sheet. Imagine trying to find particular selectors on this massive thing. Sure, you could search in the text (ctrl-f), but all of a sudden, the original benefits of the spaced out tabbed style have evaporated. Steve Smith pointed this problem out and I agree with his solution.
If you had a massive style sheet, wouldn’t the above code be easier to scan and work with if it looked more like this:
This is the beauty of Single Line CSS. You basically read it like a graph, with an X and Y axis. You scan down the Y-axis to find your selector and then move right on the X-axis to modify your attributes. You also don’t have these 1000 line style sheets. Steve again puts it best:
To put this into a practical example, one of my single-line stylesheets comes in around 307 lines. Converting the same stylesheet to the normal CSS formatting grows that to a whopping 1167 lines! 6-8 screens of CSS vs 22-25. That’s quite a difference.
Quite a difference indeed!
Scrub Your CSS Clean
The other thing to do with your CSS is make sure that it is optimized. This means using some sort of online optimizer to make sure your code is as concise and least redundant as possible. The optimizers can also help you with shorthand code, in case you don’t have it all memorized. Here are a few of my personal favorite online optimizers:
You are now ready to go forth and create the best code possible!
This post was written by J David Macor.