

8 tips for "scaling" CSS development - lunaru
http://blog.roninapp.com/2008/09/22/8-tips-for-scaling-css-development/
Techniques for scaling CSS development to multiple developers just like you would any major component of your code-base.
======
thomasmallen
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
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
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.

