Organizing CSS

Why?

Maintainable

Extendable

Performant

How

Review popular methodologies

Practice recognizing patterns

OOCSS

github.com/stubbornella/oocss/wiki

Object Oriented CSS

oocss: seperate structure from skin

.btn {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 1em;
  text-transform: uppercase;
  padding: .5em;
  width: 100%;
  margin-bottom: 1em;
  background-color: grey;
  border: 1px solid black;
  border-radius: .5em;
}

oocss: seperate structure from skin

.headingAlpha {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 1em;
  text-transform: uppercase;
}

.btn {
  padding: .5em;
}

.btnDefault {
  background-color: grey;
  border: 1px solid black;
  border-radius: .5em;
}

.modalBtn {
  width: 100%;
  margin-bottom: 1em;
}

oocss: separate appearance from location

#header h3 { font-size: 2em; }
#aside h3 { font-size: 1em; }

.headerAlpha { font-size: 2em; }
.headerBeta { font-size: 1em; }

OOCSS Tips

Only classes, no IDs

No !important

Exercise #1: OOCSS

xiw.cx/OhUveg

SMACSS

smacss.com

Scalable Modular Architecture for CSS

SMACSS: Categorization

Base

Layout

Module

State

Theme

SMACSS: Base Styles

Default, single element selectors that will look the same regardless of location.

html { color: black }
input[type=radio] { border: none; }
a { color: blue; }
a:hover { color: red; }

SMACSS: Module Styles

Reusable pieces of a design that are formless and expand to fill the container they're in.

.nav { }
.popup { }

SMACSS: States

Style changes based on the state of the page or app.

.popup.is-hidden { }
.avatar.is-logged-in { }

SMACSS: Theme Styles

Like OOCSS, the "skin" is kept seperate, including typography rules.

Exercise #2: OOCSS

xiw.cx/1ixjmZe

BEM

bem.info/method/definitions/

Block

Element

Modifier

BEM: Naming Convention

.block-name--element-name__modifier-name

It doesn't matter what your separators are, it matters that your separators are consistent.

BEM: Block

A reusable piece of the design

(e.g. a popup, form, or gallery)

Synonymous with "module" or "component"

BEM: Element

A part of a block.

(e.g. an in put in a form, a list item in a list)

SMACSS: .module-part

BEM: .block--element

Example:

<ul class="list">
    <li class="list--list-item"></li>
</ul>

BEM: Modifier

A property that changes appearance or behavior

OOCSS: .btnAlert

SMACSS: .btn-alert

BEM: .btn__alert

<button class="button button__alert">Delete</button>

Exercise 3: BEM

xiw.cx/NXgMye

Preprocessors

Sass, Less, and Stylus all support the concatenation of "partials".

Preprocessors: Imports

.sass: @import buttons

.scss: @import "buttons";

.less: @import (less) "buttons";

.styl: @import buttons

Preprocessors: Example

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

Exercise #4: Preprocessor Partials

Make up your own partial structure.