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

Transcript

1. Organizing CSS
   OOCSS, SMACSS, and BEM
   @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
   

   View Slide

2. Who am I?
   Matt Stauffer
   Partner & Technical Director, Tighten Co.
   Writer/Blogger/Teacher ’n’ Stuff
   @stauffermatt
   @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
   

   View Slide

3. What’s this all about?
   @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
   

   View Slide

4. CSS IS MESSY.
   @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
   

   View Slide

5. The goal:
   ORGANIZE OUR CSS.
   @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
   

   View Slide

6. Learn from OBJECT-ORIENTED PROGRAMMING
   ▸ Decoupling
   ▸ Single Responsibility Principle &
   Separation of Concerns
   ▸ Encapsulation
   @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
   

   View Slide

7. Introducing:
   OOCSS (OBJECT-ORIENTED CSS)
   @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
   

   View Slide

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
   

   View Slide

9. Introducing:
   SMACSS (SCALABLE MODULAR
   ARCHITECTURE FOR CSS)
   @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
   

   View Slide

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
    

    View Slide

11. Introducing:
    BEM (BLOCK ELEMENT MODIFIER)
    @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. BUT WHAT ABOUT UTILITY CLASSES?
    
    
    THE PROBLEM:
    UTILITY CLASSES TIE YOUR MARKUP TO PRESENTATION
    @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. Example Time!
    @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
    

    View Slide