We’ve all seen long and unmanageable CSS files, sometimes hundreds or even thousands of lines long. Finding the exact declaration you’re looking for can be a royal pain in the arse. It’s worse when style declarations for a particular element can be found more than once in a file, such as when the coder wants to separate structural styling from say typography styling.
The technique is simply to:
“Indent the CSS code in the same way corresponding elements are structurally indented in the HTML.”
“How amazing”, I thought, as the idea of indenting CSS declarations never occurred to me. And yes, please keep structural and typography styling together in the same declaration.
I haven’t coded anything using this method yet (I only learnt of it today!), but I think it will make my CSS coding exponentially more manageable. If you have your own special way of organizing CSS files, do tell. I’m sure we’d all like to hear it. For now, indenting seems to be the way to go.
Image credit: http://www.dryicons.com
Jan 09
Interesting idea. What about using an IDE with collapsable code segments so all one sees is the signature of the element. The problem I find is that there is just too much, indenting will definately help, but if I have fewer “screens” to scroll through and I can see all my elements with 1 or 2 middle-mouse scrolls, I think I’d be good.
Jan 09
Good point, code collapsing would prove incredibly useful in that respect. The only issue I can think of with that is its dependency on the IDE, which other developers may not have. And just as a side note, I know that NuSphere’s PhpED (and perhaps other IDEs) will scroll up/down in a page-up/page-down fashion when you hold down the Ctrl key and scroll. (Just a tidbit!)
Oct 09
my personal favorite trick for organizing css is done with vim’s “folding”. You simply alter the rules for folding, for css files, and they automatically collapse down into ‘outline format’.
at the bottom of your css file you place something along the lines of
/* vim600: set foldenable foldmethod=marker foldmarker={,} foldlevel=1 fcl=all : */
I wrap my stylesheets inside @media all {}, or @media screen {}, etc, so this is why I have foldlevel set to 1.
what you see as the result looks like this:
330 +— 10 lines: #content h2, #content h3 ———————-
340 +— 4 lines: #content .newsitem, #content .aboutbox ——–
344 +— 6 lines: #content .aboutbox #imageblock_sidebar ——–
350 +— 5 lines: #content .aboutbox #imageblock_sidebar img —-
then you just scroll up and down to find the section you want, and either ‘zo’ to open it, or any of the other fold-related commands
certainly makes not only scrolling around easier, but also ORGANIZING is easier because you get an overview this way.