3 ms·

8 tips for "scaling" CSS development

10 points by lunaru 18y ago

Techniques for scaling CSS development to multiple developers just like you would any major component of your code-base.

thomasmallen 18y ago
The IE hack recommendation is great advice. I won't use conditional comments, it's much easier to maintain a few IE hacks in the main stylesheet. I've never been in favor of breaking up a stylesheet very much. I'm writing a "CSS framework" right now that will only involve one extra CSS file, simple to use and easy to read. I'd much rather have a few marks in the file and fold code as needed than fumble with 10 tabs to make a few changes. And where does layout depart from pure styling? This is a question that confuses me when dealing with broken-up CSS. Border-width is layout, yes, but it's definitely also a visual element and doesn't feel like layout. I think that this is the best way to format code, and almost all coders are familiar with it. Better to use a coding standard, I think. .single .selector { /* indent four spaces */ } .multiple .selector1, .multiple .selector2 { /* indent four spaces */ } /** * Block comments */ .single .selector { single: property; } Over-documentation means your class names and HTML semantics are incomplete. Most CSS code is very, very easy to figure out (you can pick a page apart with a glance at Firebug if it's tableless), and you either need to strip it out or unnecessarily increases load times.
- lunaru 18y ago
  The point about breaking up CSS into multiple files helps when the lines of CSS get to be too much. For example, I'm looking at a CSS file right here where I've got 1162 lines of CSS to sift through. Just like code is fragmented into .cpp, .java, .rb, .php files per logical component, it's useful to do the same for .css.
zealog 18y ago
A pretty good article, but I heartily disagree about not using a conditional style sheet for IE. I develop for FF and Safari on a Mac. When things are how they need to be I run through the various IE versions and make sure they work like a real browser as much as possible. I much prefer knowing that all of my IE hacks will ONLY be shown to IE browsers and I don't run the risk of screwing up the layout for non-IE browsers because some hack has leaked through. Besides, it is much more readable to have the styles as intended be as simple as possible as opposed to ,things like.. div.middle { min-width: 300px; width: auto !important; *width: 300px; } There is nothing dumber than wading through stuff like this when you aren't specifically building for IE.

10 points by lunaru 18y ago

Techniques for scaling CSS development to multiple developers just like you would any major component of your code-base.

thomasmallen 18y ago

The IE hack recommendation is great advice. I won't use conditional comments, it's much easier to maintain a few IE hacks in the main stylesheet. I've never been in favor of breaking up a stylesheet very much. I'm writing a "CSS framework" right now that will only involve one extra CSS file, simple to use and easy to read. I'd much rather have a few marks in the file and fold code as needed than fumble with 10 tabs to make a few changes. And where does layout depart from pure styling? This is a question that confuses me when dealing with broken-up CSS. Border-width is layout, yes, but it's definitely also a visual element and doesn't feel like layout. I think that this is the best way to format code, and almost all coders are familiar with it. Better to use a coding standard, I think. .single .selector { /* indent four spaces */ } .multiple .selector1, .multiple .selector2 { /* indent four spaces */ } /** * Block comments */ .single .selector { single: property; } Over-documentation means your class names and HTML semantics are incomplete. Most CSS code is very, very easy to figure out (you can pick a page apart with a glance at Firebug if it's tableless), and you either need to strip it out or unnecessarily increases load times.

lunaru 18y ago
The point about breaking up CSS into multiple files helps when the lines of CSS get to be too much. For example, I'm looking at a CSS file right here where I've got 1162 lines of CSS to sift through. Just like code is fragmented into .cpp, .java, .rb, .php files per logical component, it's useful to do the same for .css.

zealog 18y ago

A pretty good article, but I heartily disagree about not using a conditional style sheet for IE. I develop for FF and Safari on a Mac. When things are how they need to be I run through the various IE versions and make sure they work like a real browser as much as possible. I much prefer knowing that all of my IE hacks will ONLY be shown to IE browsers and I don't run the risk of screwing up the layout for non-IE browsers because some hack has leaked through. Besides, it is much more readable to have the styles as intended be as simple as possible as opposed to ,things like.. div.middle { min-width: 300px; width: auto !important; *width: 300px; } There is nothing dumber than wading through stuff like this when you aren't specifically building for IE.