Frameworks and architecture paradigms

Frameworks

Bootstrap is an example of a CSS framework.

It's really just a library of pre-built styles.

Another popular example is Foundation.

Compass is another example, except that it operates at the preprocessor level (Sass).

Lots more...

OOCSS

Object-oriented CSS

OOCSS was originally developed by Nicole Sullivan, and is a paradigm, a framework, and even has a CSS coding standard.

There are two main principles of OOCSS:

1. Separate sturcture and skin
2. Separate container and content

The emphasis is on code re-use, semantics, and predictability.

Non-OOCSS example:

.red-button {
  border: 1px solid darkgray;
  color: white;
  border-radius: 4px;
  background-color: red;
}

.blue-button {
  border: 1px solid darkgray;
  color: white;
  border-radius: 4px;
  background-color: blue;
}
    

<button class="button-blue">Cancel</button>
<button class="button-red">Delete</button>
    

And the OOCSS equivalent:

.button {
  border: 1px solid darkgray;
  color: white;
  border-radius: 4px;
}

.button.dangerous {
  background-color: red;
}

.button.safe {
  background-color: blue;
}
    

<button class="safe button">Cancel</button>
<button class="dangerous button">Delete</button>
    

SMACSS

Scalable and modular architecture for CSS

SMACSS is contained in an eBook written by Jonathan Snook, but some of the content he makes available for free on the SMACSS website.

BEM

Block, element, modifier

BEM was developed by Yandex.

BEM is a paradigm for structuring front-end applications, CSS included.

Atomic CSS

As the name suggests, Atomic CSS is the practice of composing styles from small "atoms."

For example:

@std-margin: 16px;

.mt-1 { margin-top: @std-margin; }
.mr-1 { margin-right: @std-margin; }
.mt-2 { margin-top: (2 * @std-margin); }
.ov-h { overflow: hidden; }
.d-b {  display: block; }
.va-m {  vertical-align: middle; }
.fl-st { float: @float-start; }
.fl-nd { float: @float-end; }
.fw-b {  font-weight: bold; }
.fs-i {  font-style: italic; }
    

<li class="mt-2 ov-h">
  ...
  <div class="executive-bio ov-h">
    <a ... class="fl-nd">
      <img ... />
    </a>
    <h3 class="fw-b">Karl Sun</h3>
    <h4 class="fs-i">CEO and Co-founder</h4>
  </div>
</li>
    

Pros:

• Small code size (minimal CSS bloat)
• Possible for savvy CMS users to use
• Low-maintenance

Cons:

• Poor readability
• Not semantic
• Somewhat similar to using the style attribute

Alma Madsen and I co-authored an in-depth article about atomic CSS.