Optimal CSS Files
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.
*/
When it comes to optimization, most of those tools are paltry in comparison to plain ol’ gzip compression via PHP.. http://paulstamatiou.com/2007/03/18/how-to-optimize-your-css-even-more/
By Paul Stamatiou on August 12, 2007 10:08 pm
This good tip with css optimizing, but for more usability I think its better to use first variant.
Sergey Koksharov
By DHTML Image Cropper on August 13, 2007 2:01 am
both ways are as good as each other imo. The first is better layed out, and easier to read/edit. the second just takes up less space.
By Todd on August 13, 2007 3:19 am
I’ll agree that it’s easier to find a selector when formatted on one line. But, to me, that advantage is outweighed by the loss of being able to see the attributes clearly…
Just another way I guess
By Tim on August 13, 2007 10:47 am
I just feel like once you start using the single line method, you get used to it reading it that way, and all you are left with is the advantage of easy scrolling, scanning and not having a 2000 line style sheet.
By J David on August 13, 2007 11:11 am
I started out using the single line method, but switched over to multi line layout for debugging/readability reasons. I found myself accidentally putting in duplicate CSS attributes because it wasn’t easily scannable to see whether I had already specified a particular attribute.
By Jason Berry on August 14, 2007 1:49 am
Thanks for the tip. I should run through my code and give it a good scrub.
By Blake Brannon on August 17, 2007 9:11 pm
[...] Optimal CSS Files [...]
By Best Design Week Ever: 7 | J David Macor.com on August 18, 2007 8:39 am
Why does a 2000-line style-sheet matter when you have your trusty Ctrl-F? At that point, it just becomes more important to be able to read the attributes.
By Mason on August 19, 2007 4:00 pm
That’s true Mason, but if you are scanning for something, ctrl-f sometimes doesn’t help; like in those situations where you don’t know what you’re looking for, but you’ll recognize it when you see it. But it is still a matter of preference.
By J David Macor on August 19, 2007 5:50 pm
I have been styling my CSS files in a similar matter since 2002. But I must say the the above example is not easy to scan. I add just a couple more spaces, divide my stylesheet into sections using a small comment (eg sidebar), and have somewhat of a default attribute order:
#wrapper [TAB] { width: 800px; margin: 0 auto; }
#header [TAB] { height: 100px; position: relative; }
Most of the time I don’t want to find a certain property (go ctrl+f), but I want to change the style of an element, so I’m always scanning the style sheet by its selectors. Beautiful formatted CSS isn’t scanable. My own style sheet has got 63 selectors right under one another (1.5 page), but nicely formatted would result an a whopping 329 lines. Try scanning that.
Note: if you’re editor highlights properties and values, one line is easy scanned for the small number of property it usually has.
By Niek Kouwenberg on August 21, 2007 4:28 pm