Organizing CSS: OOCSS, SMACSS, and BEM

Organizing CSS: OOCSS, SMACSS, and BEM

"Organizing CSS" talk, local meetup version
Gainesville Frontend Awesome - February 19, 2015

See related blog post:
http://mattstauffer.co/blog/organizing-css-oocss-smacss-and-bem

60187fe0ab07ea5a46572a3ab05f61dd?s=128

Matt Stauffer

February 19, 2015
Tweet

Transcript

  1. 2.

    Who am I? Matt Stauffer Partner & Technical Director, Tighten

    Co. Writer/Blogger/Teacher ’n’ Stuff @stauffermatt @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  2. 6.

    Learn from OBJECT-ORIENTED PROGRAMMING ▸ Decoupling ▸ Single Responsibility Principle

    & Separation of Concerns ▸ Encapsulation @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  3. 8.

    THE BASICS OF OOCSS ▸ Identify patterns and “objects” (or

    “modules”) in your code ▸ Nicole Sullivan’s Media Object @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  4. 10.

    THE BASICS OF SMACSS ▸ Base: applies to HTML, no

    class/ID selectors ▸ Layout: big page sections—.header, .sidebar, etc. ▸ Module: encapsulated modeles, re-usable ▸ State: overrides defaults—e.g. .is-opened ▸ Theme: optional, if theming needed @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  5. 12.

    THE BASICS OF BEM ▸ Naming convention for modular/object-oriented CSS

    ▸ .{Block}__{Element} ▸ .{Block}__{Element}--{Modifier} ▸ .{Block}--{Modifier} @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  6. 13.

    BEM WITH Sass /* Sass 3.3+ w/BEM: */ .object {

    color: red; &__descendant { color: black; } } /* Generates: .object { color: red; } .object__descendant { color: black } */ @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  7. 14.

    BEM WITH LESS /* LESS w/BEM: */ .object { color:

    red; &__descendant { color: black; } } /* Generates: .object { color: red; } .object__descendant { color: black } */ @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  8. 15.

    BUT WHAT ABOUT UTILITY CLASSES? <div class="pull-left col-md-6 small"> </div>

    THE PROBLEM: UTILITY CLASSES TIE YOUR MARKUP TO PRESENTATION @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  9. 16.

    Solutions: 1. BOOTSTRAP WITHOUT THE DEBT: Sass @extend .primary-rail {

    @extend .pull-left, .col-md-6, .small; } 2. LESS @import (reference) 3. BUILD WITH UTILITY, EXTRACT COMPONENTS AS NECESSARY @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
  10. 17.

    HOW TO GET STARTED ▸ flatten selectors ▸ organize your

    code ▸ make your classes Do One Thing Well™ ▸ decouple for reusability ▸ try a preprocessor @stauffermatt - Frontend-Awesome Meetup, February 19, 2015