CSS Guidelines

Date: January 22, 2017

Category : css

At a high level, your css should

  • add consistent and space
  • allow growth and scale your codebase
  • promote reuse and efficiency

Add “consistency” and “space”

  1. To maintaince consistency decide on some framework like BEM, BEVM, ABEM or SMACSS.
  2. Add sufficient space between each class.
/**
*
* Button CSS
*/

.btn {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  background-color: #C0FFEE;
  padding: 0.5em 1em;

  &:hover,
  &:focus {
    background-color: #BADA55;
  }

}




/* Style variants */

.btn--secondary {
  background-color: #BADA55;

  &:hover,
  &:focus {
    background-color: #C0FFEE;
  }

}

.btn--tertiary {
  background-color: #DE1E7E;

  &:hover,
  &:focus {
    background-color: #C0DEC5;
  }

}



/* Size variants */

.btn--small {
  padding: 0.25em 0.5em;
}

.btn--large {
  padding: 1em 2em;
}

BEM - (block__element—modifier)

  • Removes ambiguity
  • Composes into flexible UI Library
  • Enables productivity

BEM Types:

Single Class:

< button class="button--secondary" />

Easy to read Utilise SASS and push CSS into single block

Multiple Class:

< button class="button button--large" />

Logic is kept in HTML Supports modules with multiple modifiers

BEVM - (block__element—variation -modifier)

  1. Short, concise syntax
  2. Reduce the css you write
  3. Works with helper and state classes
  4. Combines both single class vs multiple class

Single class = variation

Distinct form for something

multiple class = modifier

A minor change to something

< button class="btn -color-primary -size-large">

NOTE: modifier should never modify the same CSS prop twice.