CSS Style Guide

When nesting elements, begin with pseudo elements, then compound CSS classes, then nested elements inside the parent.

.parent {
    width: 50%;
    float: left;

    &:before, &:after {
        content: "";
    }
    &:first-child {
        color: red;
    }
    .child-element {
        display: none;
    }
    &:hover {
        color: blue;

        .child-element {
            display: block;
        }
    }
    &.open {
        height: 100%;

        .child-element {
            color: red;
        }
    }
}

3.1 Elements Order Explained

1. Scenario pseudo-classes (:first-child, :last-child, etc)
2. Relational pseudo-classes (:before and :after)
3. Children (if they need to be nested).
4. State pseudo-classes (:hover, :active, etc)

Because you may change something about the :first-child, :before, or child elements on hover, and it's easier to see what the change is if the original CSS is above.

Nest only if you need to

REMEMBER: Group child elements together, either nested or unnested.

To determine whether a child element needs to be nested, consider:

1. If the class is unique enough (nav.main, .logo, etc.) to stand on its own, don’t nest it.
2. If the class is too generic (.image, .text, .left, .right), or is likely to be reused (.title), then nest it.

If you’re unsure what to do, start off by not nesting the element. If you run into problems with it, then consider whether you need to nest it, or whether you can solve it another way.

<div class="parent">
    <div class="generic-child-element">
        …
    </div>
    <div class="unique-child-element">
        <h3 class="title">This Block's Title</h3>
    </div>
    <div class="another-child-element">
        Some text…
    </div>
</div>

.parent {
    width: 50%;
    float: left;

    &:before, &:after {
        content: "";
    }
    &:first-child {
        color: red;
    }
    &:hover {
        color: blue;

        .generic-child-element {
            display: inline-block;
        }
        .unique-child-element {
            display: block;
        }
    }
    &.open {
        height: 100%;

        .unique-child-element {
            color: red;
        }
        .another-child-element {
            color: green;
        }
    }
}
.parent .generic-child-element {
    display:none;
}
.unique-child-element {
    display: none;
    //[lots of CSS lines…]
}
.another-child-element {
    //[lots of CSS lines…]
}

The .generic-child-element here is styled outside of the .parent styles. Even though it needs the specificity, it's better to group .generic-child-element with the other child elements.

BEM Clases / CSS nesting doesn't have to match HTML nesting

CSS nesting does not have to match HTML nesting. Also, try to use BEM naming conventions when you're styling a module, so that you can keep styles scoped to the module and easy to override at the same time. For example:

HTML

<div class="module">
    <div class="module-image">
        <img src="a-cool-cucumber.gif" />
    </div>
    <div class="module-text">
        <h3 class="module-title">This Block's Title</h3>
    </div>
</div>

the proper way to nest the CSS in this case would be:

SCSS

div.module {

    &-image {
        margin: .5em;
    }
    img {
        border: none;
    }
    &-text {
        padding: .25em;
    }
    &-title {
        font-size: 1.5em;
    }
}

Write in order of the DOM tree

Finally, write in order of the DOM tree: that is, write the CSS in the same order as the HTML. This will keep things better organized and keep your code more maintainable.