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

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.