As developers, we put a lot of effort into keeping our code clean, clear, and flexible. So why do we let our CSS become such a mess? It's time to grow up as web developers and take responsibility for writing high-quality CSS and keeping it that way. Here's how I did it on a recent project.
24. Base
Set the default style for an element type
a {
color: red;
}
a:hover {
color: purple;
text-decoration: none;
}
This is the only place you should see
tag names in your stylesheets.
25. Layout
Define a component that structures a page
.l-sidebar {
float: left;
width: 320px;
}
Prefix layout components with ’l-’.
26. Module
Define a type of thing
.activity {
border-bottom: 1px solid #eee;
}
Most CSS we write will define modules
27. Module subclass
Define a variation of a module
.activity--metric-share {
background-color: white;
}
Prefix subclassed modules with ‘module-name--‘.
28. Module component
Define a component that exists
only within a specific module.
.activity__icon {
float: right;
color: #d5d5d5;
}
Prefix a component with ‘module-name__’.
29. State
Define a state of a layout or module
.is-collapsed {
height: 0;
margin-bottom: 0;
}
.activity-is-read {
background-color:#eee;
}
Prefix global states with ‘is-‘.
Prefix module-specific states with ‘module-name-is-‘.
30. *
Module subclasses and states
are both variations on modules.
!
How do we tell them apart?
!
A subclass is applied at markup time.
A state is applied and removed at runtime.
31. Theme
Define the appearance of a module
We won’t use this intent
// in _thing.less
.thing {
display: block;
}
// in fun_theme.less
.thing {
border: 4px dashed magenta;
}
32. Theme
Define the appearance of a module
We won’t use this intent
Define modules without decorative properties
in a module file.
Decorate all modules in a single theme file.
Include a single theme file on a page.
33. Where do we put this stuff?
Base /_base.less
!
Layout
/_layout.less
Global states /_states.less
Modules /modules/_module_name.less
Subclassed modules, components, and modulespecific states go with their parent module.
35. JS selectors
We want to know which classes are safe to change,
and which will cause behavior to break
<div class=“js-toggle-agreers"></div>
!
$('.js-toggle-agreers')
.click(this.toggleAgreers);
When you need to select an element in a view
give that element a classname beginning with ‘.js’.
Apply no style to that class.