Comments on: Optimal CSS Files

By: Niek Kouwenberg

Niek Kouwenberg — Tue, 21 Aug 2007 22:28:06 +0000

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: J David Macor

J David Macor — Sun, 19 Aug 2007 23:50:37 +0000

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: Mason

Mason — Sun, 19 Aug 2007 22:00:43 +0000

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: Best Design Week Ever: 7 | J David Macor.com

Best Design Week Ever: 7 | J David Macor.com — Sat, 18 Aug 2007 14:39:02 +0000

[...] Optimal CSS Files [...]

By: Blake Brannon

Blake Brannon — Sat, 18 Aug 2007 03:11:22 +0000

Thanks for the tip. I should run through my code and give it a good scrub.

By: Jason Berry

Jason Berry — Tue, 14 Aug 2007 07:49:30 +0000

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: J David

J David — Mon, 13 Aug 2007 17:11:57 +0000

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: Tim

Tim — Mon, 13 Aug 2007 16:47:49 +0000

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: Todd

Todd — Mon, 13 Aug 2007 09:19:19 +0000

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: DHTML Image Cropper

DHTML Image Cropper — Mon, 13 Aug 2007 08:01:14 +0000

This good tip with css optimizing, but for more usability I think its better to use first variant.

Sergey Koksharov