$30 off During Our Annual Pro Sale. View Details »

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

Matt Stauffer

February 19, 2015
Tweet

More Decks by Matt Stauffer

Other Decks in Programming

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