CSS File Structure

For my latest redesign (and on the other sites and programmes I’m working on) I’ve structured the CSS file somewhat differently. Rather than having what has become CSS convention of having every element of each class, id or whatever on a separate line:

[css]h1{ padding: 0 0 35px 0; margin: 0 0 25px 0; font-size: 2.0em}[/css]

I’ve instead decided to put everything onto one line: [css]h1{ padding: 0; margin: 0 0 25px 0; font-size: 2.0em}[/css]

What does this do you ask? The single most important thing in a CSS file, it makes it manageable. It makes it easy for me to actually edit the damn thing a few months down the line, in a quick and easy way. Rather than scrolling down 500 lines of code, I’m scrolling down 150 lines. The main structure for me is done in programmes like Bluefish or CSSed, however a lot of the editing and tweaking is done within Firefox, so I need to have the easy for scrolling down quickly.

The added bonus of this method is that it reduces the size of my file at the same time. I honestly started thinking why the hell I didn’t do this earlier as it just makes oh so much more sense to condense the file.