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

I used an own order, convinient for me.

Rules there were listed in the descending order, and the criterion is rule's affect on the layout. For example:

.element {
    float:none;
    position:relative;
    top:-2px;
    z-index:100;
    width:100px;
    height:100px;
    margin:10px 0;
    padding:0;
    border:1px solid #000;
    background:#F00;
    font-size:10px;
    color:#CCC;
}

Of course, in the example above I didn't list all css instructions.

Particular idea was to keep order of groups, such as:

1. Positioning
2. Width and height
3. Margins and paddings
4. Borders (and others, affecting element's total dimensions)
5. Backgrounds, aligning (and others, which don't affect whole page's layout)
6. Typography

Answer 2

As with most "best practices" there is no right answer here. I think that others' suggestions and styles are generally good though.

While I love CSS I think CSS has failed us all in this regard. The language is stale and could use a lot of improvement in ways to help us organize large and complex CSS files. One good effort in this direction is http://LESScss.org . They have extended CSS with variables, mixins, nested rules and even operations that allow css to be a lot more DRY and manageable.

It isn't /true/ CSS as you have to preprocess the LESS to turn it into CSS that a browser would understand but that is a quick and easy step that might be worth it to you if your CSS is growing unwieldy.

So if you're finding CSS unwieldy it might be worth giving a try.

Answer 3

CSS allows you to "cascade" multiple rules against a particular element, but generally you don't have rules affecting the exact same elements right after each other. In one block, I will separate out specific kinds of directives though:

div.foo {
    float: left;
    padding: 1em;
    margin: 1em;

    background-color: #fff;
    border: solid 1px silver;

    font-family: ...
}

My thinking is also that for maximum readability, you want to make each directive as dense as possible. That is to say, padding here is easier to read than the margin:

div.foo {
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
}

Having said all that, in general the problem with CSS isn't keeping little individual blocks clean. Your more common problem will be, how do you group rules in files and parts of files?

For example, you could have one layout.css, theme.css (colors, fonts, etc), and individual CSS files affecting specific parts of your application, like data-browser.css. You then import those CSS files from one main CSS file, or you import them on each page as needed.