Question

This is probably a borderline question because I’m not sure there’s a right answer, but I’m curious as to how people organize their stylesheets, and if there’s a common practice. I’m sure it comes down to personal style, but I’d still like to see what some people do differently.

Global styles are always up top, and the rest of the styles are generally written in the order that they appear on the page.

I tend to indent all sub-styles, subclasses, and pseudo-classes under the parent class:

#search {
    float:right;
    margin-top:20px;
    width:325px;
    height:35px;

    background-image:url(css-ref/main.png);
    background-repeat:no-repeat;

    text-align:right;
    line-height:36px;
    font-size:13px;
}
    #search a:link,#search a:visited,#search a:active {
        color:#333;
    }
    #search a:hover {
        color:#1770a9;
    }

Within a class, I always list properties in the following order:

.myClass {
    [position, display, and float]
    [margins and padding]
    [width and height]
    [background, border, border-style, shadow]
    [font settings]
    [animations/transitions]
}

For me, this improves readability because things are always going to be in the same order if I need to go through and find a property within a particular class.

Are there better/more accepted ways of organizing stylesheets? How do you do it?

Answer 1

Identation or “nesting” is a common practice and is a key feature of CSS meta-languages like SASS.