Styles

Note

In addition to the General guidelines, the following sections describe stylesheet-specific rules.

Naming

Important

  • Use lowercase in SCSS file names.
  • Use only dashes in class/ID names.
// bad
Search.scss, marketingSite.scss or theme-dark-blog.scss

class="blog blogItem blog_item__featured"
// good
search.scss, marketing_site.scss or theme_dark_blog.scss

class="blog blog-item blog-item-featured"

Nesting

Important

  • Don’t overuse nesting; nest elements to a maximum of 4 indents.

With great power comes great responsibility (just wanted to throw that in here). When writing in Sass or Less laziness can have performance implications. While nesting is very powerful, we should avoid unnecessary levels or blocks that can be simplified.

// bad
.nav-main {
    ul {
        @extend list-reset;
        li {
            padding: 5px 10px;
            a {
                color: red;
            }
        }
    }
}
// good
.nav-main {
    ul {
        @extend list-reset;
    }
    li {
        padding: 5px 10px;
    }
    a {
        color: red;
    }
}

Formatting

Important

  • Always add a space after the colon :.
  • Only write one CSS property per line.
  • Avoid using selectors such as div.container or ul > li > a (i.e. ad-hoc, non-namespaced) to determine specificity.
  • Write colour values in lowercase and avoid colour names.
// bad
article.item {
    color: white;
    padding: 10px; margin-left: 0; margin-top: 0; margin-bottom: 10px;
    background-repeat: no-repeat;
    background-position: left top;
}
// good
.item {
    color: #fff;
    padding: 10px;
    margin: 0 0 10px 0;
    background: no-repeat left top;
}

Ordering

Important

  • Use block-style, and group elements below.
  • See scss-lint.json for a comprehensive ordering example.
  1. includes (mixins)
  2. extending
  3. visibility, position
  4. color, font-size, line-height, font-* (font relevant data)
  5. width, height, padding, margin (box model relevant date)
  6. border, background (box style data)
  7. media, print (media queries)
  8. :after, :before, :active (pseudo elements)
  9. nested elements or parent referencing selectors

Note

Combine attributes such as background-image, background-color, background-repeat into a single line background: #fff url("image.png") no-repeat left top; when it makes sense. But remember, that a shorthand like background cannot be overridden with just background-image, so use wisely!

Example

.addon-blog {
    // mixins
    @include border-radius(3px);
    @include box-shadow(0 0 2px #eee);
    // extending
    @extend .list-unstyled;
    // styles
    display: inline;
    position: relative;
    z-index: 1;
    color: white;
    font-size: 16px;
    line-height: 20px;
    width: 80%;
    height: 80%;
    padding: 5px;
    margin: 0 auto;
    border: 2px solid #ccc;
    background: #ddd;
    // desktop and up
    @media (min-width: $screen-md-min) {
        display: block;
    }
    // pseudo elements
    &:active,
    &:hover {
        color: black;
    }
}