Standards for developing flexible, durable, and sustainable CSS

Introduction:

In this article i will explain standards for developing flexible, durable, and sustainable CSS.

Description:

In previous articles i explained C# Coding Standards and Naming Conventions, and Standards for developing flexible, durable, and sustainable HTML. Now i will explain standards for developing flexible, durable, and sustainable CSS.

Table of contents

CSS

  • CSS syntax
  • Declaration order
  • Don't use @import
  • Media query placement
  • Prefixed properties
  • Rules with single declarations
  • Shorthand notation
  • Nesting in Less and Sass
  • Comments
  • Classes
  • Selectors
  • Organization

 

Syntax

  • Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
  • When grouping selectors, keep individual selectors to a single line.
  • Include one space before the opening brace of declaration blocks for legibility.
  • Place closing braces of declaration blocks on a new line.
  • Include one space after : for each declaration.
  • Each declaration should appear on its own line for more accurate error reporting.
  • End all declarations with a semi-colon. The last declaration's is optional, but your code is more error prone without it.
  • Comma-separated property values should include a space after each comma (e.g., box-shadow).
  • Don't include spaces after commas within rgb(), rgba(),hsl(), hsla(), or rect() values. This helps differentiate multiple color values (comma, no space) from multiple property values (comma with space).
  • Don't prefix property values or color parameters with a leading zero (e.g., .5 instead of 0.5 and -.5px instead of-0.5px).
  • Lowercase all hex values, e.g., #fff. Lowercase letters are much easier to discern when scanning a document as they tend to have more unique shapes.
  • Use shorthand hex values where available, e.g., #fffinstead of #ffffff.
  • Quote attribute values in selectors, e.g.,input[type="text"]. They’re only optional in some cases, and it’s a good practice for consistency.
  • Avoid specifying units for zero values, e.g., margin: 0;instead of margin: 0px;.
<span style="color:rgb(153, 153, 153);">/* Bad CSS */</span>
<span style="color:rgb(0, 170, 136);">.selector</span><span style="color:rgb(153, 153, 153);">,</span> <span style="color:rgb(0, 170, 136);">.selector-secondary</span><span style="color:rgb(153, 153, 153);">,</span> <span style="color:rgb(0, 170, 136);">.selector</span><span style="color:rgb(153, 153, 153);">[</span><span style="color:rgb(153, 153, 153);">type</span><span style="color:rgb(153, 153, 153);">=</span><span style="color:rgb(153, 153, 153);">text</span><span style="color:rgb(153, 153, 153);">]</span> {
  <span style="color:rgb(0, 102, 153);">padding</span><span style="color:rgb(153, 153, 153);">:</span><span style="color:rgb(255, 102, 0);">15px</span>;
  <span style="color:rgb(0, 102, 153);">margin</span><span style="color:rgb(153, 153, 153);">:</span><span style="color:rgb(255, 102, 0);">0px</span> <span style="color:rgb(255, 102, 0);">0px</span> <span style="color:rgb(255, 102, 0);">15px</span>;
  <span style="color:rgb(0, 102, 153);">background-color</span><span style="color:rgb(153, 153, 153);">:</span>rgba(<span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span> <span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span> <span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span> <span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">.</span><span style="color:rgb(255, 102, 0);">5</span>);
  box<span style="color:rgb(153, 153, 153);">-</span>shadow<span style="color:rgb(153, 153, 153);">:</span><span style="color:rgb(255, 102, 0);">0px</span> <span style="color:rgb(255, 102, 0);">1px</span> <span style="color:rgb(255, 102, 0);">2px</span> <span style="color:rgb(255, 102, 0);">#CCC</span><span style="color:rgb(153, 153, 153);">,</span><span style="color:rgb(0, 102, 153);">inset</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">1px</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">#FFFFFF</span>
}

<span style="color:rgb(153, 153, 153);">/* Good CSS */</span>
<span style="color:rgb(0, 170, 136);">.selector</span><span style="color:rgb(153, 153, 153);">,</span>
<span style="color:rgb(0, 170, 136);">.selector-secondary</span><span style="color:rgb(153, 153, 153);">,</span>
<span style="color:rgb(0, 170, 136);">.selector</span><span style="color:rgb(153, 153, 153);">[</span><span style="color:rgb(153, 153, 153);">type</span><span style="color:rgb(153, 153, 153);">=</span><span style="color:rgb(204, 51, 0);">"text"</span><span style="color:rgb(153, 153, 153);">]</span> {
  <span style="color:rgb(0, 102, 153);">padding</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">15px</span>;
  <span style="color:rgb(0, 102, 153);">margin-bottom</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">15px</span>;
  <span style="color:rgb(0, 102, 153);">background-color</span><span style="color:rgb(153, 153, 153);">:</span> rgba(<span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span><span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span><span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,.</span><span style="color:rgb(255, 102, 0);">5</span>);
  box<span style="color:rgb(153, 153, 153);">-</span>shadow<span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">1px</span> <span style="color:rgb(255, 102, 0);">2px</span> <span style="color:rgb(255, 102, 0);">#ccc</span><span style="color:rgb(153, 153, 153);">,</span> <span style="color:rgb(0, 102, 153);">inset</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">1px</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">#fff</span>;
}

Questions on the terms used here? See the syntax section of the Cascading Style Sheets article on Wikipedia.

Declaration order

Related property declarations should be grouped together following the order:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles. The box model comes next as it dictates a component's dimensions and placement.

Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.

<span style="color:rgb(0, 170, 136);">.declaration-order</span> {
  <span style="color:rgb(153, 153, 153);">/* Positioning */</span>
  <span style="color:rgb(0, 102, 153);">position</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(0, 102, 153);">absolute</span>;
  <span style="color:rgb(0, 102, 153);">top</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span>;
  <span style="color:rgb(0, 102, 153);">right</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span>;
  <span style="color:rgb(0, 102, 153);">bottom</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span>;
  <span style="color:rgb(0, 102, 153);">left</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span>;
  <span style="color:rgb(0, 102, 153);">z-index</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">100</span>;

  <span style="color:rgb(153, 153, 153);">/* Box-model */</span>
  <span style="color:rgb(0, 102, 153);">display</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(0, 102, 153);">block</span>;
  <span style="color:rgb(0, 102, 153);">float</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(0, 102, 153);">right</span>;
  <span style="color:rgb(0, 102, 153);">width</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">100px</span>;
  <span style="color:rgb(0, 102, 153);">height</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">100px</span>;

  <span style="color:rgb(153, 153, 153);">/* Typography */</span>
  <span style="color:rgb(0, 102, 153);">font</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(0, 102, 153);">normal</span> <span style="color:rgb(255, 102, 0);">13px</span> <span style="color:rgb(204, 51, 0);">"Helvetica Neue"</span><span style="color:rgb(153, 153, 153);">,</span> <span style="color:rgb(0, 102, 153);">sans-serif</span>;
  <span style="color:rgb(0, 102, 153);">line-height</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">1</span><span style="color:rgb(153, 153, 153);">.</span><span style="color:rgb(255, 102, 0);">5</span>;
  <span style="color:rgb(0, 102, 153);">color</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">#333</span>;
  <span style="color:rgb(0, 102, 153);">text-align</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(0, 102, 153);">center</span>;

  <span style="color:rgb(153, 153, 153);">/* Visual */</span>
  <span style="color:rgb(0, 102, 153);">background-color</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">#f5f5f5</span>;
  <span style="color:rgb(0, 102, 153);">border</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">1px</span> <span style="color:rgb(0, 102, 153);">solid</span> <span style="color:rgb(255, 102, 0);">#e5e5e5</span>;
  <span style="color:rgb(0, 102, 153);">border</span><span style="color:rgb(153, 153, 153);">-</span>radius<span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">3px</span>;

  <span style="color:rgb(153, 153, 153);">/* Misc */</span>
  <span style="color:rgb(0, 102, 153);">opacity</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">1</span>;
}

For a complete list of properties and their order, please see Recess.

Don't use @import

Compared to <link>s, @import is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach:

  • Use multiple <link> elements
  • Compile your CSS with a preprocessor like Sass or Less into a single file
  • Concatenate your CSS files with features provided in Rails, Jekyll, and other environments
<span style="color:rgb(153, 153, 153);"><!-- Use link elements --></span>
<span style="color:rgb(47, 111, 159);"><link</span> <span style="color:rgb(79, 159, 207);">rel=</span><span style="color:rgb(212, 73, 80);">"stylesheet"</span> <span style="color:rgb(79, 159, 207);">href=</span><span style="color:rgb(212, 73, 80);">"core.css"</span><span style="color:rgb(47, 111, 159);">></span>

<span style="color:rgb(153, 153, 153);"><!-- Avoid @imports --></span>
<span style="color:rgb(47, 111, 159);"><style></span>
  <span style="color:rgb(0, 102, 153);">@import</span> <span style="color:rgb(47, 111, 159);">url</span><span style="color:rgb(85, 85, 85);">(</span><span style="color:rgb(204, 51, 0);">"more.css"</span><span style="color:rgb(85, 85, 85);">)</span>;
<span style="color:rgb(47, 111, 159);"></style></span>

For more information, read this article by Steve Souders.

Media query placement

Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future. Here's a typical setup.

<span style="color:rgb(0, 170, 136);">.element</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.element-avatar</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.element-selected</span> { <span style="color:rgb(153, 153, 153);">...</span> }

<span style="color:rgb(0, 102, 153);">@media</span> <span style="color:rgb(153, 153, 153);">(</span><span style="color:rgb(153, 153, 153);">min-width</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(153, 153, 153);">480px</span><span style="color:rgb(153, 153, 153);">)</span> {
  <span style="color:rgb(0, 170, 136);">.element</span> { <span style="color:rgb(153, 153, 153);">...</span>}
  <span style="color:rgb(0, 170, 136);">.element-avatar</span> { <span style="color:rgb(153, 153, 153);">...</span> }
  <span style="color:rgb(0, 170, 136);">.element-selected</span> { <span style="color:rgb(153, 153, 153);">...</span> }
}

Prefixed properties

When using vendor prefixed properties, indent each property such that the declaration's value lines up vertically for easy multi-line editing.

<span style="color:rgb(153, 153, 153);">/* Prefixed properties */</span>
<span style="color:rgb(0, 170, 136);">.selector</span> {
  <span style="color:rgb(153, 153, 153);">-</span>webkit<span style="color:rgb(153, 153, 153);">-</span>box<span style="color:rgb(153, 153, 153);">-</span>shadow<span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">1px</span> <span style="color:rgb(255, 102, 0);">2px</span> rgba(<span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span><span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span><span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,.</span><span style="color:rgb(255, 102, 0);">15</span>);
          box<span style="color:rgb(153, 153, 153);">-</span>shadow<span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">1px</span> <span style="color:rgb(255, 102, 0);">2px</span> rgba(<span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span><span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,</span><span style="color:rgb(255, 102, 0);">0</span><span style="color:rgb(153, 153, 153);">,.</span><span style="color:rgb(255, 102, 0);">15</span>);
}

In Textmate, use Text ? Edit Each Line in Selection (^?A). In Sublime Text 2, use Selection ? Add Previous Line (^??) andSelection ? Add Next Line (^??).

Single declarations

In instances where a rule set includes only one declaration, consider removing line breaks for readability and faster editing. Any rule set with multiple declarations should be split to separate lines.

<span style="color:rgb(153, 153, 153);">/* Single declarations on one line */</span>
<span style="color:rgb(0, 170, 136);">.span1</span> { <span style="color:rgb(0, 102, 153);">width</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">60px</span>; }
<span style="color:rgb(0, 170, 136);">.span2</span> { <span style="color:rgb(0, 102, 153);">width</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">140px</span>; }
<span style="color:rgb(0, 170, 136);">.span3</span> { <span style="color:rgb(0, 102, 153);">width</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">220px</span>; }

<span style="color:rgb(153, 153, 153);">/* Multiple declarations, one per line */</span>
<span style="color:rgb(0, 170, 136);">.sprite</span> {
  <span style="color:rgb(0, 102, 153);">display</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(0, 102, 153);">inline</span><span style="color:rgb(153, 153, 153);">-</span><span style="color:rgb(0, 102, 153);">block</span>;
  <span style="color:rgb(0, 102, 153);">width</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">16px</span>;
  <span style="color:rgb(0, 102, 153);">height</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">15px</span>;
  <span style="color:rgb(0, 102, 153);">background-image</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(204, 51, 0);">url(../img/sprite.png)</span>;
}
<span style="color:rgb(0, 170, 136);">.icon</span>           { <span style="color:rgb(0, 102, 153);">background-position</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">0</span>; }
<span style="color:rgb(0, 170, 136);">.icon-home</span>      { <span style="color:rgb(0, 102, 153);">background-position</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">-20px</span>; }
<span style="color:rgb(0, 170, 136);">.icon-account</span>   { <span style="color:rgb(0, 102, 153);">background-position</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">-40px</span>; }

The key factor here is error detection—e.g., a CSS validator stating you have a syntax error on Line 183. With a single declaration, there's no missing it. With multiple declarations, separate lines is a must for your sanity.

Shorthand notation

Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values. Common overused shorthand properties include:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

Often times we don't need to set all the values a shorthand property represents. For example, HTML headings only set top and bottom margin, so when necessary, only override those two values. Excessive use of shorthand properties often leads to sloppier code with unnecessary overrides and unintended side effects.

<span style="color:rgb(153, 153, 153);">/* Bad example */</span>
<span style="color:rgb(0, 170, 136);">.element</span> {
  <span style="color:rgb(0, 102, 153);">margin</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">10px</span>;
  <span style="color:rgb(0, 102, 153);">background</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(51, 102, 102);">red</span>;
  <span style="color:rgb(0, 102, 153);">background</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(204, 51, 0);">url("image.jpg")</span>;
  <span style="color:rgb(0, 102, 153);">border</span><span style="color:rgb(153, 153, 153);">-</span>radius<span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">3px</span> <span style="color:rgb(255, 102, 0);">3px</span> <span style="color:rgb(255, 102, 0);">0</span> <span style="color:rgb(255, 102, 0);">0</span>;
}

<span style="color:rgb(153, 153, 153);">/* Good example */</span>
<span style="color:rgb(0, 170, 136);">.element</span> {
  <span style="color:rgb(0, 102, 153);">margin-bottom</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">10px</span>;
  <span style="color:rgb(0, 102, 153);">background-color</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(51, 102, 102);">red</span>;
  <span style="color:rgb(0, 102, 153);">background-image</span><span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(204, 51, 0);">url("image.jpg")</span>;
  <span style="color:rgb(0, 102, 153);">border-top</span><span style="color:rgb(153, 153, 153);">-</span><span style="color:rgb(0, 102, 153);">left</span><span style="color:rgb(153, 153, 153);">-</span>radius<span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">3px</span>;
  <span style="color:rgb(0, 102, 153);">border-top</span><span style="color:rgb(153, 153, 153);">-</span><span style="color:rgb(0, 102, 153);">right</span><span style="color:rgb(153, 153, 153);">-</span>radius<span style="color:rgb(153, 153, 153);">:</span> <span style="color:rgb(255, 102, 0);">3px</span>;
}

The Mozilla Developer Network has a great article on shorthand properties for those unfamiliar with notation and behavior.

Nesting in Less and Sass

Avoid unnecessary nesting. Just because you can nest, doesn't mean you always should. Consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested.

<span style="color:rgb(153, 153, 153);">// Without nesting</span>
<span style="color:rgb(0, 170, 136);">.table</span> <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">thead</span> <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">tr</span> <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">th</span> { <span style="background-color:rgb(255, 170, 170);color:rgb(170, 0, 0);">…</span> }
<span style="color:rgb(0, 170, 136);">.table</span> <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">thead</span> <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">tr</span> <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">td</span> { <span style="background-color:rgb(255, 170, 170);color:rgb(170, 0, 0);">…</span> }

<span style="color:rgb(153, 153, 153);">// With nesting</span>
<span style="color:rgb(0, 170, 136);">.table</span> <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">thead</span> <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">tr</span> {
  <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">th</span> { <span style="background-color:rgb(255, 170, 170);color:rgb(170, 0, 0);">…</span> }
  <span style="color:rgb(85, 85, 85);">></span> <span style="color:rgb(47, 111, 159);">td</span> { <span style="background-color:rgb(255, 170, 170);color:rgb(170, 0, 0);">…</span> }
}

Comments

Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others. Great code comments convey context or purpose. Do not simply reiterate a component or class name.

<span style="color:rgb(153, 153, 153);">/* Bad example */</span>
<span style="color:rgb(153, 153, 153);">/* Modal header */</span>
<span style="color:rgb(0, 170, 136);">.modal-header</span> {
  <span style="color:rgb(153, 153, 153);">...</span>
}

<span style="color:rgb(153, 153, 153);">/* Good example */</span>
<span style="color:rgb(153, 153, 153);">/* Wrapping element for .modal-title and .modal-close */</span>
<span style="color:rgb(0, 170, 136);">.modal-header</span> {
  <span style="color:rgb(153, 153, 153);">...</span>
}

Be sure to write in complete sentences for larger comments and succinct phrases for general notes.

Class names

  • Keep classes lowercase and use dashes (not underscores or camelCase). Dashes serve as natural breaks in related class (e.g., .btn and .btn-danger).
  • Avoid excessive and arbitrary shorthand notation. .btn is useful for button, but .s doesn't mean anything.
  • Keep classes as short and succinct as possible.
  • Use meaningful names; use structural or purposeful names over presentational.
  • Prefix classes based on the closest parent or base class.
  • Use .js-* classes to denote behavior (as opposed to style), but keep these classes out of your CSS.
<span style="color:rgb(153, 153, 153);">/* Bad example */</span>
<span style="color:rgb(0, 170, 136);">.t</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.red</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.header</span> { <span style="color:rgb(153, 153, 153);">...</span> }

<span style="color:rgb(153, 153, 153);">/* Good example */</span>
<span style="color:rgb(0, 170, 136);">.tweet</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.important</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.tweet-header</span> { <span style="color:rgb(153, 153, 153);">...</span> }

It's also useful to apply many of these same rules when creating Sass and Less variable names.

Selectors

  • Use classes over generic element tag for optimum rendering performance.
  • Avoid using several attribute selectors (e.g.,[class^="..."]) on commonly occuring components. Browser performance is known to be impacted by these.
  • Keep selectors short and strive to limit the number of elements in each selector to three.
  • Scope classes to the closest parent only when necessary (e.g., when not using prefixed classes).
<span style="color:rgb(153, 153, 153);">/* Bad example */</span>
<span style="color:rgb(47, 111, 159);">span</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.page-container</span> <span style="color:rgb(204, 0, 255);">#stream</span> <span style="color:rgb(0, 170, 136);">.stream-item</span> <span style="color:rgb(0, 170, 136);">.tweet</span> <span style="color:rgb(0, 170, 136);">.tweet-header</span> <span style="color:rgb(0, 170, 136);">.username</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.avatar</span> { <span style="color:rgb(153, 153, 153);">...</span> }

<span style="color:rgb(153, 153, 153);">/* Good example */</span>
<span style="color:rgb(0, 170, 136);">.avatar</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.tweet-header</span> <span style="color:rgb(0, 170, 136);">.username</span> { <span style="color:rgb(153, 153, 153);">...</span> }
<span style="color:rgb(0, 170, 136);">.tweet</span> <span style="color:rgb(0, 170, 136);">.avatar</span> { <span style="color:rgb(153, 153, 153);">...</span> }

Additional reading:

Organization

  • Organize sections of code by component.
  • Develop a consistent commenting hierarchy.
  • Use consistent white space to your advantage when separating sections of code for scanning larger documents.
  • When using multiple CSS files, break them down by component instead of page. Pages can be rearranged and components moved.
<span style="color:rgb(153, 153, 153);">/*</span>
<span style="color:rgb(153, 153, 153);"> * Component section heading</span>
<span style="color:rgb(153, 153, 153);"> */</span>

<span style="color:rgb(0, 170, 136);">.element</span> { <span style="color:rgb(153, 153, 153);">...</span> }


<span style="color:rgb(153, 153, 153);">/*</span>
<span style="color:rgb(153, 153, 153);"> * Component section heading</span>
<span style="color:rgb(153, 153, 153);"> *</span>
<span style="color:rgb(153, 153, 153);"> * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.</span>
<span style="color:rgb(153, 153, 153);"> */</span>

<span style="color:rgb(0, 170, 136);">.element</span> { <span style="color:rgb(153, 153, 153);">...</span> }

<span style="color:rgb(153, 153, 153);">/* Contextual sub-component or modifer */</span>
<span style="color:rgb(0, 170, 136);">.element-heading</span> { <span style="color:rgb(153, 153, 153);">...</span> }

Editor preferences

Set your editor to the following settings to avoid common code inconsistencies and dirty diffs:

  • Use soft-tabs set to two spaces.
  • Trim trailing white space on save.
  • Set encoding to UTF-8.
  • Add new line at end of files.

Consider documenting and applying these preferences to your project's .editorconfig file. For an example, see the one in Bootstrap. Learn more about EditorConfig.

  • Created
    Jul 18, 2014
  • Updated
    Oct 03, 2020
  • Views
    1,888
Related Articles
Minify Resources (HTML, CSS, and JavaScript)
Standards for developing flexible, durable, and sustainable HTML
C# Coding Standards and Naming Conventions