CSS Workshop

Made by Adam Kaplan and Stephanie Briones.

Reuse your CSS

DRY up your code! Repeating yourself leads to huge CSS files and unnecessary code bloat. Take the time to plan out your elements in a simple and reusable way. Reuse your classes and tag on additional classes when needed.

Here’s some really repetitive code:

.button-blue {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #7099e8;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-weight: 700;
  padding: 1em 4em;
  text-align: center;
  text-decoration: none;
}

.button-red {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #e88370;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-weight: 700;
  padding: 1em 4em;
  text-align: center;
  text-decoration: none;
}
<button class="button-blue">Submit</button>
<button class="button-red">Cancel</button>

Lets DRY this up and make it a bit more reusable:

.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-weight: 700;
  padding: 1em 4em;
  text-align: center;
  text-decoration: none;
}

.blue { background: #7099e8; }
.red { background: #e88370; }
<button class="button blue">Submit</button>
<button class="button red">Cancel</button>

Use naming conventions

We can take this a step further by using BEM (Block, Element, Modifier) methodology. What you end up with is more meaningful class names that will make it easier for everyone to understand and work on.

// Block (Highest level)
.block {...}

// Element (Descendent of block)
.block__element {...}

// Modifier (Different state or version)
.block--modifier {...}
// Block
.button {
  @include prefix-property(appearance, none);
  @include prefix-property(border-radius, 3px);
  border: none;
  color: $white;
  cursor: pointer;
  display: block;
  font-weight: 700;
  padding: 1em 4em;
  text-align: center;
  text-decoration: none;
}

// Modifiers
.button--primary { background: #7099e8; }
.button--secondary { background: #e88370; }
<button class="button button--primary">Submit</button>
<button class="button button--secondary">Cancel</button>

is-state

Use is-state naming conventions to reflect the change of a block/element state. Never style is-state classes by themselves; always use with adjoining class or nest them using Sass to avoid cross-class confusion.

/* Block */
.button { ... }

/* is-state */
.button.is-disabled { background: #ccc; }
// Block
.button {
  //is-state
  &.is-disabled { background: #ccc; }
}
<button class="button is-disabled">Submit</button>

Bringing it all together

Here is an example of a schedule component using BEM and is-state:

// Block
.schedule {...}

// Element
.schedule__item {
  // is-state
  &.is-selected {...}
}

// Modifier
.schedule--dark {...}
<ul class="schedule schedule--dark">
  <li class="schedule__item is-selected">Item 1</li>
  <li class="schedule__item">Item 2</li>
  <li class="schedule__item">Item 3</li>
  <li class="schedule__item">Item 4</li>
</ul>

Resources