CSS Architecture

on a Shoestring

@bensmithett

Once upon a time...

• One huge CSS file
• No real structure
• New features? Kinda just added stuff to the bottom

OOCSS

SMACSS

SUIT

BEM

North

Sass

Less

Stylus

Compass

Bourbon

Bootstrap

Inuit

Susy

Singularity

Grunt

Gulp

Yeoman

The basics

Solid, scalable, maintainable CSS architecture.

app.scss

app.scss

@import "vendor/normalize.css"
@import "base"
@import "components/*"

Normalize.css

Starts us on a level playing field.

_base.scss

*, *:before, *:after {
  box-sizing: border-box;
}

a {
  color: green;
}

Components

.page {}
.header {}
.comment-box {}
.avatar {}

Rule #1

Each component has its own file

components/
  _avatar.scss
  _comment_box.scss
  _header.scss
  _page.scss

When I see this HTML

I know to look in

Rule #2

A component has no knowledge of its context

.avatar {
  display: block;

  > img {
    display: block;
    max-width: 100%;
  }
}

Rule #3

Components can have subcomponents

// components/_comment_box.scss
.comment-box__avatar { ... }

// components/_profile_box.scss
.profile-box__avatar { ... }

.comment-box__avatar {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 50px;
  width: 50px;
}

<div class="comment-box">
  <div class="comment-box__avatar">

    <a class="avatar" href="#">
      <img src="...">
    </a>

  </div>
</div>

<div class="comment-box">
  <div class="comment-box__avatar">

    <Avatar src="foo.jpg" />

  </div>
</div>

Rule #4

Minimise depth of applicibility

.comment-box {
  a {
    color: blue;
  }
}

.comment-box {
  > a {
    color: blue;
  }
}

.comment-box__link {
  color: blue;
}

Rule #5

Components should be small & disposable

If a class doesn't fit on a 27" monitor without scrolling, it's too big!

.comment-box {
  ...
}

.comment-box__avatar {
  ...
  a {
    ...
  }
  img {
    ...
  }
}

Summary

Everything is a component

Each component has its own file

A component knows nothing about its context

Create sized, positioned containers for nested components

Make small, disposable components

stylesheets/
  app.scss
  _base.scss
  vendor/
    normalize.css
  components/
    _comment_box.scss
    _header.scss
    _page.scss
    ...

components/
  comment_box/
    _comment_box.scss
    _comment_box.html
    _comment_box.js
  page/
    _page.scss
    _page.html
    _page.js
    ...

What if I have existing CSS?

stylesheets/
  _utilities.scss
  _forms.scss
  _typography.scss
  _some_page_specific_junk.scss

stylesheets/
  base/
    _utilities.scss
    _forms.scss
    _typography.scss
    _some_page_specific_junk.scss
  components/
    _new_thing.scss

Thanks!

@bensmithett