css

CSS

Our standard for writing CSS.

Table of Contents

• BEM class naming
• Indentation
• Brace alignment
• Selectors
• Properties and Values
• Container heights

BEM class naming

• Class naming should follow the hyphenated BEM (Block, Element, Modifier) format.

  Block

  A block is an independent entity, a "building block" of an application. Block names should be separated by single dashes.

  /* bad */
  .block_name {} // underscore
  
  .blockname {} // no separater
  
  .blockName {} // camelCase
  
  /* good */
  .block-name {}

  Element

  An element is a part of a block that performs a certain function.

  /* bad */
  .block-name-element {} // dash between block and element
  
  .block-name_element {} // single underscore
  
  .block-nameElement {} // camelCase
  
  /* good */
  .block-name__element {}

  Modifier & states

  A modifier is a property of a block or an element that alters its look or behavior. States of a block or element should be treated as a modifier.

  /* bad */
  .block-name__element-modifier {} // single dash between element and modifier
  
  .block-name__element_modifier {} // underscore
  
  .block-name__elementModifier {} // camelCase
  
  /* good */
  .block-name__element--modifier {}
  
  .block-name__element--is-open {}

  Further reading

  • Mindbemding
  • Battling BEM

Indentation

• Each level should be indented by 4 space characters.

  /* bad */
  .block {
    /* stuff */
  }
  
  /* good */
  .block {
      /* stuff */
  }
  
  @media only screen and (min-device-width: 768px) {
      .block {
          /* stuff */
      }
  }

Brace alignment

• The opening brace should be on the same line as the selector.

  /* bad */
  .block
  {
      /* stuff */
  }
  
  /* good */
  .block {
      /* stuff */
  }

• The closing brace should be on a new line and at the start of the line.

  // bad
  .block {
      /* stuff */ }
  
  // good
  .block {
      /* stuff */
  }

Selectors

• Attribute selectors should be escaped using apostrophes.

  /* bad */
  [aria-expanded=true] {
      /* stuff */
  }
  
  /* good */
  [aria-expanded='true'] {
      /* stuff */
  }

• Internet Explorer specific CSS should be prefixed with the 'ie[version]' class.

  /* bad */
  html>/**/body .block {
      /* stuff */
  }
  
  /* good */
  .ie8 .block {
      /* stuff */
  }

Properties and Values

• Each property must be on its own line, indented at one level.

  /* bad */
  .block { z-index: 1; }
  
  /* good */
  .block {
      z-index: 1;
  }

• A value must be separated with a space from the property colon.

  /* bad */
  .block {
      z-index:1;
  }
  
  /* good */
  .block {
      z-index: 1;
  }

• Properties should be written as shorthand where possible.

  /* bad */
  .block {
      margin-top: 100px;
      margin-right: 100px;
      margin-bottom: 100px;
      margin-left: 100px;
  }
  
  /* good */
  .block {
      margin: 100px;
  }

• Decimal values should not omit zeros.

  /* bad */
  .block {
      opacity: .9;
  }
  
  /* good */
  .block {
      opacity: 0.9;
  }

• Properties should be sorted in alphabetical order.

  /* bad */
  .block {
      position: absolute;
      left: -999em;
      top: 0;
  }
  
  /* good */
  .block {
      left: -999em;
      position: absolute;
      top: 0;
  }

• Strings should be escaped using single quotes.

  /* bad */
  .block {
      content: "";
  }
  
  /* good */
  .block {
      content: '';
  }

• There should not be a space between parenthesis.

  /* bad */
  .block {
      background: url( 'path/to/image.png' );
  }
  
  /* good */
  .block {
      background: url('path/to/image.png');
  }

• URLs should not contain protocols or domain names and should always be enclosed within quotes.

  /* bad */
  background: url(https://example.com/assets/image.png);
  
  /* good */
  background: url('assets/image.png');

• Do not use vendor-prefixes. They add extra bloat to your code and are subject to change from the browser vendors.

  /* bad */
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  
  /* good */
  border-radius: 4px;

• Do not use !important. It is usually indicative of a misunderstanding of CSS specificity and can lead to brittle code.

  /* bad */
  .block {
      z-index: 1 !important;
  }

  Further reading

  • Smashing Magazine: When to use important

• Hex colour values should be written in shorthand and lowercase.

  /* bad */
  .block {
      color: red;
  }
  
  .block {
      color: #ff0000;
  }
  
  .block {
      color: #F00;
  }
  
  /* good */
  .block {
      color: #f00;
  }

• RGB/A values should be separated by a spaces.

  /* bad */
  .block {
      background: rgba(0,0,0,0.5);
  }
  
  /* good */
  .block {
      background: rgba(0, 0, 0, 0.5);
  }

Container heights

• min-height should be used instead of 'height' to avoid container overflow from being hidden.

  /* bad */
  .block {
      height: 400px;
  }
  
  /* good */
  .block {
      min-height: 400px;
  }