CSS

Best practices for Cascading Style Sheets (CSS).


Table of contents


Selectors

Place each selector on its own line

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

Order selectors alphabetically

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

Surround braces with whitespace

Good
article {
    /* ..  */
}

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

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

Good
/*
 * Layout
 */

body,
footer,
header {
}

/*
 * Typography
 */

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

/* Links */
a {
}

a:hover {
}

/* Lists */
ol {
}

ul {
}
Bad
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.

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

Classes

Namespace class names

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

Good
.dh-article {}
Bad
.article {}

Lowercase class names

Good
.dh-article {}
Bad
.DH-Article {}

Prefer purposeful class names to presentational

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

Prefix class names based on the closest parent or base class

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

Declarations

Place each declaration on its own line

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

Group related properties together in the following order:

  1. Positioning
  2. Box model
  3. Typography
  4. Visual
  5. Misc
Good
h1 {
    /* Positioning */
    display: block;

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

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

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

    /* Misc */
    opacity: .2;
}
Bad
h1 {
    padding: 1em;
    font-weight: bold;
    opacity: .2;
    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.

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

Lowercase all values

Good
h1 {
    color: #fff;
    font-weight: bold;
}
Bad
h1 {
    color: #FFF;
    font-weight: BOLD;
}

Skip leading zero in decimal values

Good
h1 {
    margin: .5em;
}
Bad
h1 {
    margin: 0.5em;
}

Skip unit in values where length is 0

Good
h1 {
    margin: 0;
}
Bad
h1 {
    margin: 0em;
}

Use hex for color values

Good
h1 {
    color: #fff;
}
Bad
h1 {
    color: rgb(255, 255, 255);
}

Note: Use rgba() if transparency is needed.