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
2. Who am I? Matt Stauffer Partner & Technical Director, Tighten Co. Writer/Blogger/Teacher ’n’ Stuff @stauffermatt @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
3. What’s this all about? @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
4. CSS IS MESSY. @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
5. The goal: ORGANIZE OUR CSS. @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
6. Learn from OBJECT-ORIENTED PROGRAMMING ▸ Decoupling ▸ Single Responsibility Principle & Separation of Concerns ▸ Encapsulation @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
7. Introducing: OOCSS (OBJECT-ORIENTED CSS) @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
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
9. Introducing: SMACSS (SCALABLE MODULAR ARCHITECTURE FOR CSS) @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
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
11. Introducing: BEM (BLOCK ELEMENT MODIFIER) @stauffermatt - Frontend-Awesome Meetup, February 19, 2015
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
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
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
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
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
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
18. Example Time! @stauffermatt - Frontend-Awesome Meetup, February 19, 2015