Decoupling the Front-end with
Modular CSS
Julie Cameron @jewlofthelotus
#OSCON 2015 bit.ly/decoupling-css
DERP.
@jewlofthelotus | #OSCON
@jewlofthelotus | #OSCON
articulate.com@jewlofthelotus | #OSCON
girldevelopit.com@jewlofthelotus | #OSCON
OOCSS
@jewlofthelotus | #OSCON
Got CSS?
@jewlofthelotus | #OSCON
@jewlofthelotus | #OSCON
#cascade {
div.is {
span.delicate {
position: absolute !important;
}
}
}
@jewlofthelotus | #OSCON
@jewlofthelotus | #OSCON
“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
TOP DOWN CSS =
REPETITION & BLOAT
@jewlofthelotus | #OSCON
SELECTOR MISUSE =
SPECIFICITY HELL
@jewlofthelotus | #OSCON
BLOAT +
BAD SELECTORS =
BAD PERFORMANCE@jewlofthelotus | #OSCON
!IMPORTANT
= THE DEVIL
@jewlofthelotus | #OSCON
NONE OF THIS IS
SCALABLE OR MAINTAINABLE.
A hot mess is what it is…
@jewlofthelotus | #OSCON
TOP DOWN OVERLY SPECIFIC
CSSHTML@jewlofthelotus | #OSCON
WE’VE BEEN COUPLING OUR
HTML & CSS@jewlofthelotus | #OSCON
WE’VE BEEN COUPLING OUR
HTML & CSSAnd sometimes our CSS & JavaScript.
@jewlofthelotus | #OSCON
WE’VE BEEN COUPLING OUR
HTML & CSSAnd sometimes our CSS & JavaScript. …and Feature Specs, too.
@jewlofthelotus | #OSCON
Coupled CSS Selectors
@jewlofthelotus | #OSCON
STOP USING CSS SELECTORS FOR NON-CSS
Data Attributes. FTW.
@jewlofthelotus | #OSCON
Functionality Selectors
@jewlofthelotus | #OSCON
START USING MODULAR CSS
@jewlofthelotus | #OSCON
WHY?
@jewlofthelotus | #OSCON
MODULAR
@jewlofthelotus | #OSCON
PREDICTABLE
@jewlofthelotus | #OSCON
MAINTAINABLE
@jewlofthelotus | #OSCON
SCALABLE
@jewlofthelotus | #OSCON
DRY
@jewlofthelotus | #OSCON
ORGANIZED
@jewlofthelotus | #OSCON
Modular Solutions• OOCSS
• BEM
• SMACSS
• Atomic Design
• CSS for Grownups
• CCSS
• DRY CSS
• and many more…
@jewlofthelotus | #OSCON
Object Oriented Cascading Stylesheets
OOCSS
https://github.com/stubbornella/oocss/wiki@jewlofthelotus | #OSCON
A scalable, maintainable, semantic, and predictable approach to writing CSS.
@jewlofthelotus | #OSCON
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
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
A Media Object Media to the left and some variable length content to the right.
img.png
@jewlofthelotus | #OSCON
The Foundation of Modular CSS
OBJECTS
@jewlofthelotus | #OSCON
Objects are the abstraction of repetition.
@jewlofthelotus | #OSCON
Object Makeup
1. HTML - one or more nodes of the DOM
https://github.com/stubbornella/oocss/wiki/FAQ
@jewlofthelotus | #OSCON
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
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
Modules with Variations
.btn
@jewlofthelotus | #OSCON
Modules with Variations
.btn
.btn—primary .btn-smallCSS
.btn:hover
@jewlofthelotus | #OSCON
Modules with Variations
.btn
.btn.is—disabled .btn.is-active
CSS JS
.btn—primary .btn-smallCSS
.btn:hover
@jewlofthelotus | #OSCON
Module Components
Object aka module / component / block .btn, .media
@jewlofthelotus | #OSCON
Module Components
Object aka module / component / block .btn, .media
Child Objects .media__img, .media__body
Relationships
@jewlofthelotus | #OSCON
Module Components
Object aka module / component / block .btn, .media
Modifiers .media—-inline, .media__img—-right
CSS Design Variations
Child Objects .media__img, .media__body
Relationships
@jewlofthelotus | #OSCON
Module Components
Object aka module / component / block .btn, .media
Modifiers .media—-inline, .media__img—-right
CSS Design Variations
States .media—-collapsed, .media.is-active
CSS / JS Design Adjustments
Child Objects .media__img, .media__body
Relationships
@jewlofthelotus | #OSCON
BEST PRACTICES
@jewlofthelotus | #OSCON
SINGLE RESPONSIBILITY
Do one thing well and one thing only.
@jewlofthelotus | #OSCON
.CLASSES
.CLASSES
.CLASSESTake that, specificity!
@jewlofthelotus | #OSCON
NAMING CONVENTIONS
Just breathe. Everything is going to be okay.
@jewlofthelotus | #OSCON
PICK A SYSTEM
BE CONSISTENT
@jewlofthelotus | #OSCON
Naming Formats
.modulename
.moduleName
.module-name
.module_name
.bem——style
.bem_ _style
@jewlofthelotus | #OSCON
Naming PatternsHow do you identify children? States? Modifiers?
.objectChild
.object-child
.object_child
.object_ _child
.myObject—childObj
.object.is—active
.objectModifier
.object-modifier
.object_modifier
.object——modifier
.myObj-modClass
.object.active
@jewlofthelotus | #OSCON
.block .media
@jewlofthelotus | #OSCON
.block .media
.block_ _element .media_ _img
@jewlofthelotus | #OSCON
.block .media
.block_ _element .media_ _img
.block——modifier .media——inline
@jewlofthelotus | #OSCON
.block .media
.block_ _element .media_ _img
.block——modifier .media——inline
.block_ _element——modifier .media_ _img——right
@jewlofthelotus | #OSCON
SEMANTIC VS
PRESENTATIONAL
NAMINGUh oh…
@jewlofthelotus | #OSCON
Presentational Naming
Describes how the object looks.
.grid_ _col——9
.btn——small
.border——all
.color——red
.float——left
.border——thick
@jewlofthelotus | #OSCON
Semantic NamingDescribes what the object is.
.bookmark
.article
.callToAction
.error
.article_ _title
.article——flagged
@jewlofthelotus | #OSCON
Fewer Semantic Classes
DRY HTML VS
DRY CSSMany Presentational Classes
@jewlofthelotus | #OSCON
NO ONE KNOWS
WHAT THEY’RE
DOING.@jewlofthelotus | #OSCON
2 Principles of OOCSS
@jewlofthelotus | #OSCON
Separation of
STRUCTURE from
SKIN
1ST PRINCIPLE
@jewlofthelotus | #OSCON
Structure Vs. Skin
@jewlofthelotus | #OSCON
Structure Vs. SkinDefine repeating “invisible” patterns
as reusable structures. What makes a button look like a button?
@jewlofthelotus | #OSCON
Structure Vs. SkinDefine 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
StructureRepeating “invisible” patterns.
What makes a button look like a button?
@jewlofthelotus | #OSCON
StructureRepeating “invisible” patterns.
What makes a button look like a button?
@jewlofthelotus | #OSCON
SkinRepeating visible patterns.
What makes these buttons look different?
@jewlofthelotus | #OSCON
SkinRepeating visible patterns.
What makes these buttons look different?
@jewlofthelotus | #OSCON
Structure + Skin
@jewlofthelotus | #OSCON
Structure + Skin.btn .btn—primary
.btn—small
.btn—block
.btn—inverse
@jewlofthelotus | #OSCON
Separation of
CONTAINER from
CONTENT
2ND PRINCIPLE
@jewlofthelotus | #OSCON
Container Vs. Content
Objects should look the same no matter where you put them.
@jewlofthelotus | #OSCON
Location Dependent Styles
@jewlofthelotus | #OSCON
Location Dependent Styles
@jewlofthelotus | #OSCON
Location Dependent Styles
@jewlofthelotus | #OSCON
Better?
@jewlofthelotus | #OSCON
Separation Of Container & Content
What is the container?
@jewlofthelotus | #OSCON
Separation Of Container & Content
What is the container?
@jewlofthelotus | #OSCON
Separation Of Container & Content
What is the content?
@jewlofthelotus | #OSCON
Separation Of Container & Content
Abstract reusable styles into a new object.
@jewlofthelotus | #OSCON
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
OOCSSStructure vs. Skin
Container vs. Content
@jewlofthelotus | #OSCON
CLASSITIS
@jewlofthelotus | #OSCON
HTML <3 CSS
@jewlofthelotus | #OSCON
HTML <3 CSSCSS STYLE
@jewlofthelotus | #OSCON
The Semantics Debate
• Do classes actually have “semantic” value?
@jewlofthelotus | #OSCON
The Semantics Debate
• Do classes actually have “semantic” value?
• To whom are classes semantic to?
@jewlofthelotus | #OSCON
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
Presentational Arguments
• Classes have NO meaning to the browser.
@jewlofthelotus | #OSCON
Presentational Arguments
• Classes have NO meaning to the browser.
• Classes ARE semantic to developers.
@jewlofthelotus | #OSCON
Presentational Arguments
• Classes have NO meaning to the browser.
• Classes ARE semantic to developers.
• Content describes itself, classes don’t need to.
@jewlofthelotus | #OSCON
Semantic
DRY HTML VS
DRY CSSPresentational
@jewlofthelotus | #OSCON
SMACSS Scalable & Modular Architecture with CSS
http://smacss.com
Jonathan Snook
@jewlofthelotus | #OSCON
CATEGORIZATION
@jewlofthelotus | #OSCON
• Base
• Layout
• Module
• State
• Theme
SMACSS Categories
@jewlofthelotus | #OSCON
CSS Resets +
Default Styles
What things should generally look like.
SMACSS Base Objects
@jewlofthelotus | #OSCON
Containers +
Grids
Hold the modules together.
SMACSS Layout Objects#IDs for single use “major” components
.classes for reusable “minor” components
@jewlofthelotus | #OSCON
Reusable Parts +
Subclasses (Modifiers)
The good stuff.
SMACSS Modules
@jewlofthelotus | #OSCON
Tacked on to layout & module objects
Indicate a JavaScript dependency.
SMACSS State Objects!important is allowed and even recommended!
@jewlofthelotus | #OSCON
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
Themes can apply to all other
object types
In the case that your site has multiple holistic themes.
SMACSS Themes
@jewlofthelotus | #OSCON
ATOMIC DESIGN
http://bradfrost.com/blog/post/atomic-web-design
Brad Frost
@jewlofthelotus | #OSCON
ASSEMBLING
@jewlofthelotus | #OSCON
Atomic Design
atoms molecules organisms templates pages
@jewlofthelotus | #OSCON
Atomic Design
atoms molecules organisms templates pages
+@jewlofthelotus | #OSCON
The basic building blocks of matter.
Single element. Global styles.
Atoms
@jewlofthelotus | #OSCON
Groups of atoms bonded together.
Simple combinations built for reuse.
Molecules
@jewlofthelotus | #OSCON
Groups of molecules joined together.
Complex, distinct sections of an interface.
Organisms
@jewlofthelotus | #OSCON
http://patternlab.io
A collection of tools to help you create atomic design systems.
Pattern Lab
WHAT NOW?
@jewlofthelotus | #OSCON
ORGANIZE OPTIMIZE
REPEAT@jewlofthelotus | #OSCON
ITERATING ON ABSTRACTION
@jewlofthelotus | #OSCON
FINDING THE RIGHT
GRANULARITY
@jewlofthelotus | #OSCON
ESTABLISH CONVENTIONS
@jewlofthelotus | #OSCON
DOCUMENT EVERYTHING
@jewlofthelotus | #OSCON
ARCHITECT A STYLEGUIDE
@jewlofthelotus | #OSCON
UTILIZE A CSS PREPROCESSOR
@jewlofthelotus | #OSCON
STOP USING CSS SELECTORS FOR NON-CSS
@jewlofthelotus | #OSCON
http://github.com/davidtheclark/scalable-css-reading-list
http://bit.ly/dc-scrl
LEARN MORE
@jewlofthelotus | #OSCON
Questions?
Decoupling the Front-end with
Modular CSS
Julie Cameron @jewlofthelotus
#OSCON 2015 bit.ly/decoupling-css