Organizing CSS
Amanda Cheung
Front-end Dev at DockYard
SMACSS
Scalable and Modular
Architecture for CSS
Jonathan Snook
Organization by Category
Base: CSS resets and element defaults
Layout: Major component positioning and layout, grid system
Module: Minor component styling
State: Styling different states of a module
Theme: Theming options
Naming Conventions
Layout:
<aside class='l-aside aside'>State:
<div class='is-expanded'><div class='is-collapsed'><a class='is-active'>
Decouple styles from layout
<aside> <div><a>Call to action!</a></div></aside>aside div a {font-weight: bold;color: purple;}
Decouple styles from layout
Extract patterns into reusable modules
<aside> <div><a class='cta-link'>Call to action!</a></div></aside>.cta-link {font-weight: bold;color: purple;}
BEM
Block, element, modifier
.footer__buttons--eventbrite:before {content: "E";}.footer__buttons--twitter:before {content: "T";}
Code Smells
What constitutes a code smell?
Styles that undo other styles
.aside {margin: 0;padding: 0;}.email-link {text-decoration: none;}.logo {display: none;}
Overlapping media queries
Problem:
@media (max-width: 300px) {
div {background-color: blue;}
}
@media (max-width: 800px) {
div {background-color: red;}
}
@media (max-width: 1200px) {
div {background-color: green;}
}
Solution:
@media (max-width: 320px)@media (min-width: 320px) and (max-width: 680px)@media (min-width: 680px) and (max-width: 1200px)
More Code Smells
Harry Roberts' blog: CSS Wizardy
Thanks!
Organizing CSS
By Amanda Cheung
Organizing CSS
Fresh Tilled Soil's Lightning Talk 2013
