Typing SCSS

In order to ensure that the styling remains consistent, extensible, and predictable, there is a certain typing style that needs to be achieved. It is a carefully concocted collection of guidelines and patterns that, when followed, allow stylesheets to be as easy to use as possible.

A brief introduction and overview

It’s imperative that all styles, classes, and components are properly namespaced. This keeps the global namespace free of potential naming conflicts and unforeseen collateral damage. Since the A10 styling builds off of Bootstrap, we will conform to their patterns.

Thanks to gulp and gulp-autoprefixer, it isn’t necessary to include vendor prefixes in your css. In fact, they shouldn’t be included since it hinders readability.

Class and id formatting

Classes, and ids, should be lower case and hyphen separated.

/* Wrong */
<div class="AwesomeClass"></div>
<div class="even_more_awesome"></div>

/* Correct */
<div class="awesome-class"></div>
<div class="awesome-class--list-nav"></div>

Syntax and whitespace

Use two spaces for indentation. Each SCSS block should be separated by two new lines. Chained selectors should be comma separated, and always on a new line. Use double quotes for all strings.

Inline styling

Inline styling will never be permitted.

When to use the id attribute

Never use ids for styling. Ever.

The only time the id attribute should be used is for Javascript DOM querying – in order to bind an element for toggling, or other special events. And even then, it should be used sparingly.

Extends and includes

Since it’s too easy to get in trouble with, the @include and @mixin keywords, they shouldn’t be used. The @extend should be used sparingly, and leveraging a placeholder whenever appropriate.

If you aren’t sure what extend and include mean in regards to SCSS, see this post

What about performance?

Performance is a very important aspect to keep in mind. Carefully crafting selectors with the browser’s renderer in mind can greatly reduce the time for a page to load. For example, avoiding element selectors and leaning on classes can make a few key performance increases.

Wrong:

ul.slats li span a:hover { color: #777; }

The above implementation is problematic because the renderer works from right to left. Meaning it will visit every <a> tag, see if it’s in a span, and so on. Only once it walks all the way to the .slats class selection will it determine whether an element is a match or not.

On the other hand, with an additional class declaration, we give the renderer a shortcut:

Correct:

.slats .slat a:hover { color: #777; }

That’s all for now, folks

< 33333