Comments on: CSS Neatness Technique

By: WebDragon

WebDragon — Fri, 09 Oct 2009 17:22:00 +0000

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.

By: Antonio

Antonio — Tue, 06 Jan 2009 23:54:25 +0000

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!)

By: Tim

Tim — Mon, 05 Jan 2009 20:12:03 +0000

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.