This log covers how to make CSS modulizable and reusable. OOCSS, SMACSS and Atomic Design1 are popular methodologies of writing reusable, scalable, modular CSS.2 Keep in mind all these methodologies are just a convention, try to understand the concepts and the principles behind them and then keep those in mind while developing projects.

CSS frameworks make simple things complex by adding unnecessary markup and that’s the reason why I tent to avoid Bootstrap for small projects.

Redesign means changing CSS. A rebuild means changing HTML and then also CSS.

Front-end developer should only change CSS to inflict design and layout change without touching HTML. Check out CSS Zen Gardens as a prime example of this principle.

A general principle to name HTML classes is to reflect page element and content not what they look like or where they go. .btn-block (appearance) and .pull-left (position) are two bad class name from Bootstrap.

Semantics

Semantics refers to something’s meaning.3

Semantics is about the markup bing independent of design and layout, which makes less HTML (No more extra div for rows or columns, or clearfixing).

One example of semantic CSS classes,

<span class="error-message is-hidden">There was an error</span>

Naming Conventions

BEM4 stands for block, element, modifier. It allows for reuse and compartmentalization. Block has no dependencies, all dependencies with BEM naming convention are planned and expected.

.block__element--modifier {
  /*You code goes here...*/
}

Modifier deals with element’s state, which can be tied into a class name. (See code snippet below)

# Origin BEM
<article class="block__element--visible"></article>

# Improved version of BEM without `modifier`
<article class="block__element is-visible"></article>

Using BEM without modifier make it more dynamic when working with JavaScript.

One more example of using BEM (the deliminator has changed to - instead of __),

.product {
  padding: 1em;
  &-image {
    float: left;
    margin-right: 1em;
  }
  &-title {
    margin-top: 0;
    &-link {
      text-decoration: none;
      color: inherit;
    }
  }
  &-sale {
    margin-left: 1em;
    opacity: 0.5;
  }
}

product class above is reusable because its isolated from outside of it’s root or container.

OOCSS

Seperation of structure from skin (theme, font-family, background, color etc.).

OOCSS is based on the idea of breaking repeated patterns into reusable components which applies to components and CSS properties.

OOCSS can save hundreds of line of code in CSS by abstracting repeated patterns into reusable parts via using of @extend and placeholder extends (to avoid add class like float-left to the markup and CSS file),

SCSS source,

%float-left {
  float: left;
}
%float-right {
  float: right;
}
%clearfix {
  overflow: hidden;
}
%bg-banana-yellow {
  background-color: hsl(52, 100%, 62%);
}
.header {
  width: 100%;
  @extend %clearfix;
  @extend %bg-banana-yellow;
  &-logo, &-search-input, &-search-button {
    @extend %float-left;
  }
  &-search {
    @extend %float-right;
  }
}

CSS output,

.header-logo, .header-search-input, .header-search-button {
  float: left;
}
.header-search {
  float: right;
}
.header {
  overflow: hidden;
}
.header {
  background-color: #ffe53d;
}
.header {
  width: 100%;
}

Separating Container from Content

Content is anything that you cannot remove without losing the message you are trying to get across (text, video, images) and everything else is container.

  1. A reusable component should have not set dimensions (width & height); It should take entire width of parent and height should be determined by its content (thing the default style for h1)
  2. Component should be isolated from everything outside of it via naming convention (see Semantics Section above)

Atomic Design

It recommends thinking of a design from the smallest components first (inside-out approach). It combines the smallest parts to create more complex structure and combines those to create larger, finished design components.

SMACSS

Scalable Modular Architecture for CSS (SMACSS) recommands where should CSS files go. It recommands to break files into,5

  • Base, reset.css/normalize.css/base.css
  • Layout, overall layout of the larger elements on the page
  • Modules, reusable isolated components
  • States, style that are related to JavaScript
  • Theme, look and feel styles for component

To make markup more semantic, use data-state='is-hidden' to change appearance of component in different state (see snippet below),

<article data-state="is-hidden"></article>
[data-state="is-hidden"] {
    display: none;
}
  1. http://atomicdesign.bradfrost.com/table-of-contents/

  2. https://www.safaribooksonline.com/library/view/mastering-sass/9781785883361/ch04.html

  3. https://www.safaribooksonline.com/library/view/mastering-sass/9781785883361/ch04s02.html

  4. https://en.bem.info/methodology/quick-start/

  5. https://www.safaribooksonline.com/library/view/mastering-sass/9781785883361/ch04s05.html