CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner where even the smallest of UI changes will take hours to work out. Ew.
Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew.
This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.
Video from SEM.js November 2014: http://youtu.be/HoQ-QEusyS0
11. “It’s almost a challenge to find a development
team that’s working on a codebase that’s more
than a couple of years old where the CSS isn’t
the most frightening and hated part of that
system.”
Andy Hume - CSS for Grownups
@jewlofthelotus | #OSCON
35. OOCSS was created by Nicole Sullivan
while working for Facebook.
She created a reusable CSS module
called the “media object” to save
hundreds of lines of code.
stubbornella.org
@jewlofthelotus | #OSCON
36. The Media Object
“a content block containing a fixed-size
media element (e.g. image or video) along
with other variable-size content (e.g. text)”
https://github.com/stubbornella/oocss/wiki
AKA a Facebook status.
@jewlofthelotus | #OSCON
37. A Media Object
Media to the left and some
variable length content to
the right.
img.png
@jewlofthelotus | #OSCON
40. Object Makeup
1. HTML - one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
@jewlofthelotus | #OSCON
41. Object Makeup
1. HTML - one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
2. CSS that styles those nodes
@jewlofthelotus | #OSCON
42. Object Makeup
1. HTML - one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
2. CSS that styles those nodes
3. JavaScript functionality tied to those nodes
@jewlofthelotus | #OSCON
70. Structure Vs. Skin
Define repeating “invisible” patterns
as reusable structures.
What makes a button look like a button?
@jewlofthelotus | #OSCON
71. Structure Vs. Skin
Define repeating “invisible” patterns
as reusable structures.
What makes a button look like a button?
Define repeating visual patterns
as reusable skins.
What makes these buttons look different?
@jewlofthelotus | #OSCON
87. Separation Of
Container & Content
Abstract reusable styles into a new object.
@jewlofthelotus | #OSCON
88. With OOCSS, we’re encouraged to give
more forethought to what is common
among different elements, then separate
those common features into modules, or
objects, that can be reused anywhere.
Louis Lazaris — Smashing Magazine
@jewlofthelotus | #OSCON
93. The Semantics Debate
• Do classes actually have “semantic” value?
@jewlofthelotus | #OSCON
94. The Semantics Debate
• Do classes actually have “semantic” value?
• To whom are classes semantic to?
@jewlofthelotus | #OSCON
95. The Semantics Debate
• Do classes actually have “semantic” value?
• To whom are classes semantic to?
• Should we stick with one way or the other?
@jewlofthelotus | #OSCON
98. Presentational
Arguments
• Classes have NO meaning to the browser.
• Classes ARE semantic to developers.
• Content describes itself, classes don’t need to.
@jewlofthelotus | #OSCON
104. Containers
+
Grids
Hold the modules together.
SMACSS Layout Objects
#IDs for single use “major” components
.classes for reusable “minor” components
@jewlofthelotus | #OSCON
106. Tacked on to layout
& module objects
Indicate a JavaScript dependency.
SMACSS State Objects
!important is allowed and even recommended!
@jewlofthelotus | #OSCON
107. Tacked on to layout
& module objects
Indicate a JavaScript dependency.
SMACSS State Objects
!important is allowed and even recommended!
Module-specific
State objects
Include module name & reside with it.
pseudo & @media query states included.
@jewlofthelotus | #OSCON
108. Themes can
apply to all other
object types
In the case that your site has multiple
holistic themes.
SMACSS Themes
@jewlofthelotus | #OSCON