CSS

Best practices for Cascading Style Sheets (CSS).

Table of contents

• Selectors
  • Place each selector on its own line
  • Order selectors alphabetically
  • Surround braces with whitespace
  • Group related selectors
  • Prefer class selectors to generic element tags
• Classes
  • Namespace class names
  • Lowercase class names
  • Prefer purposeful class names to presentational
  • Prefix class names based on the closest parent or base class
• Declarations
  • Place each declaration on its own line
  • Group related properties
  • Order properties alphabetically
  • Lowercase all values
  • Skip leading zero in decimal values
  • Skip unit in values where length is 0

Selectors

Place each selector on its own line

h1,
h2,
h3 {
    /* ..  */
}

h1, h2, h3 {
    /* ..  */
}

Order selectors alphabetically

article,
body,
header {
    /* ..  */
}

header,
body,
article {
    /* ..  */
}

Surround braces with whitespace

• Include 1 space before opening brace {.
• Place closing brace } on a new line.
• Place a new line after closing brace.

article {
    /* ..  */
}

header {
    /* ..  */
}

article{/* ..  */}
header {/* ..  */}

Group related selectors

Increase organisation and readability by grouping related selectors into main and sub sections.

• Indicate main sections using a triple line comment.
• Indicate sub-sections using a single line comment.

/*
 * Layout
 */

body,
footer,
header {
}

/*
 * Typography
 */

/* Headings */
h1,
h2,
h3 {
}

/* Links */
a {
}

a:hover {
}

/* Lists */
ol {
}

ul {
}

a {
}

ul {
}

h1,
h2,
h3 {
}

a:hover {
}

ol {
}

body,
footer,
header {
}

Prefer class selectors to generic element tags

Class selectors have better rendering performance and are more readable than generic element tags.

.article-lead {
    /* ..  */
}

article p:first-child strong {
    /* ..  */
}

Classes

Namespace class names

Prevent collisions with 3rd-party classes by namespacing all class names.

.dh-article {}

.article {}

Lowercase class names

.dh-article {}

.DH-Article {}

Prefer purposeful class names to presentational

.dh-info-text {
    color: #00f;
    font-weight: bold;
}

.dh-blue-and-bold {
    color: #00f;
    font-weight: bold;
}

Prefix class names based on the closest parent or base class

.dh-article {}
.dh-article-image {}
.dh-article-title {}

.dh-article {}
.dh-image {}
.dh-title {}

Declarations

Place each declaration on its own line

h1 {
    font-size: 16px;
    font-weight: bold;
}

h1 {
    font-size:16px; font-weight:bold;
}

Group related properties

Group related properties together in the following order:

1. Positioning
2. Box model
3. Typography
4. Visual
5. Misc

h1 {
    /* Positioning */
    display: block;

    /* Box model */
    margin: 1em;
    padding: 1em;
    width: 50%;

    /* Typography */
    color: #000;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;

    /* Visual */
    background-color: #fff;
    border: 1px solid #ddd;

    /* Misc */
    cursor: pointer;
}

h1 {
    padding: 1em;
    font-weight: bold;
    cursor: pointer;
    font-size: 12px;
    width: 50%;
    margin: 1em;
    color: #000;
    font-family: sans-serif;
    border: 1px solid #ddd;
    background-color: #fff;
    display: block;
}

Order properties alphabetically

Order properties alphabetically within each group.

h1 {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
}

h1 {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 12px;
}

Lowercase all values

h1 {
    color: #fff;
    font-weight: bold;
}

h1 {
    color: #FFF;
    font-weight: BOLD;
}

Skip leading zero in decimal values

h1 {
    margin: .5em;
}

h1 {
    margin: 0.5em;
}

Skip unit in values where length is 0

h1 {
    margin: 0;
}

h1 {
    margin: 0em;
}