What are the best practices for writing maintainable CSS?

Question

I am just starting to explore this area and wonder what are the best practices when it comes to production of clean, well-structured and maintainable CSSes.

There seems

Answer 1

There's really no right or wrong answer here, certainly nothing definitive. Do what makes sense to you and is ideally most readable to others.

Personally, I like to group related elements together, but I also organize them by the section in which they are located on the page. I will denote these sections with a comment in the CSS. For example, my header section may look like this:

/* HEADER */

#header {
    float:left;
    width:100%;
    height:162px;
    background:url(images/headerbg.gif);
    background-repeat:no-repeat;
}

#header-left {
    float:left;
    margin:0;
    padding:0;
    width:350px;
}

#header-right {
    float:right;
    margin:0;
    padding:0;
    width:620px;
}

#header a {
    color:#c4e6f2;
    text-decoration:none;
}

#header a:hover {
    color:#ffffff;
}

There's tons of different semantic practices surrounding CSS, but this is just an example of how I generally group my rules. I usually try to minimize the amount of CSS needed, so I use shorthands for borders, margins, padding, etc., and I try not to re-use CSS selectors. I group all properties together usually.

Answer 2

I'll usually group all properties that apply to the same element together -- it makes it slightly less annoying trying to find everything that applies, and makes it a little easier to keep from duplicating properties. If i have three different .my-class rules, i won't be surprised in the not-so-distant future to find them all setting some property two or three times because someone was rushed and just looked for the nearest selector that looked right.

Answer 3

If you're using class names which are likely to be used again in another context with a completely different appearance, use "namespacing" to ensure those rules don't "bleed outside" their intended context. The context is the selector for the nearest parent element inside which you will always find an element matching your un-namespaced selector.

e.g. Let's imagine you are making some styles for a reusable module, whose top level element always has the class="mymodule". All the selectors intended only for use there should then begin with ".mymodule " -- so ".item" should become ".mymodule .item", titles for your mymodule items should have the selector ".mymodule .item .title" etc.

But, don't be tempted to just replicate your entire element hierarchy exactly in CSS -- this results in very fragile , difficult-to-maintain CSS. e.g. If you think you'll be using ".product-item" outside of ".new-products", but you will want to largely preserve its appearance, you will certainly afford yourself better flexibility by not namespacing that (family of) selector(s). You can always override your styles with other selectors (of equal or higher specificity) to accommodate variations in appearance in other contexts.

Example:

.black-module {
   background: #000;
}
.product {
   color: #363; /* products look similar everywhere /
}
.black-module .product {
   color: #FCF; / products have lighter text if inside a black module /
}
   .product .title {
      color: #030; / won't affect article titles /
   }
   .black-module .product .title {
      color: #FCF; / won't affect article titles or product titles in a non-black module /
   }
   .product .subtitle {
      color: #7A7; / looks good on all known module backgrounds, even black */
   }


.article .title {
   font-weight: bold; /*won't affect product titles */
}

Answer 4

I like Stefano Mazzocchi's suggestions in the post titled Why Programmers Suck at CSS Design. Among other things, he explains how to start from a clean slate, whether to use em or px, how to define fonts, etc. I would not use all suggestions (e.g. I would be hesitant to import any CSS -- or any other -- files from Yahoo!), but some ideas are pretty good.

And a few more suggestions: 100 Exceedingly Useful CSS Tips and Tricks

Answer 5

Personally, I use the first method, but I also indent child selectors. For example:

.my-class {
    /* stuff here */
}

    .my-class tr {
        /* stuff here */
    }

        .my-class tr a {
            /* stuff here */
        }

Dunno about best practices though, aside from putting the opening brace on the same line as the closing one, and ending each property with a semi-colon, even if it's the last one.

Answer 6

For me it's good to alphabetize properties of element. It is simple, visible and good for programmer's eye :)

e.g.

#my-id 
{
   color: #fff;
   float: left;
   font-weight:
   height: 200px;
   margin: 0;
   padding: 0;
   width: 150px;
}

Before production it's recommended to use some of the css compressors to provide gains in performance.