Managing CSS Projects With ITCSS - Harry Roberts
Managing CSS Projects With ITCSS - Harry Roberts
Location in Stylesheet
Specificity
Location in Stylesheet
An ID? An !important?
A nested selector?
Specificity
Location in Stylesheet
Specificity
Location in Stylesheet
How do we solve this?
Specificity
Location in Stylesheet
tl;dr: Write CSS in specificity order.
Specificity
Location in Stylesheet
Generic Base Objects Components Trumps
Specificity
Location in Stylesheet
These sections form the basis of ITCSS.
In short…
We need…
Explicit
Far-reaching
Localised
Low specificity
High specificity
Settings
Tools
Generic
Base
Objects
Components
Trumps
Default layers
Settings: Global variables, config switches.
Tools: Default mixins and functions.
Generic: Ground-zero styles (Normalize.css, resets, box-sizing).
Base: Unclassed HTML elements (type selectors).
Objects: Cosmetic-free design patterns.
Components: Designed components, chunks of UI.
Trumps: Helpers and overrides.
Settings
Globally-available settings.
Config switches.
Brand colours, etc.
$color-ui: #BADA55;
$spacing-unit: 10px;
Tools
Globally-available tools.
Public mixins.
Helper functions.
@mixin font-brand() {
font-family: "UI Font", sans-serif;
font-weight: 400;
}
Generic Ground zero styles.
Low-specificity, far-reaching.
Resets, Normalize.css, etc.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Unclassed HTML elements.
H1–H6, basic links, lists, etc.
Base
Last layer we see type
selectors (e.g. a {},
blockquote {}).
ul {
list-style: square outside;
}
OOCSS.
Design patterns.
No cosmetics.
Begin using classes
Objects exclusively.
Agnostically named (e.g. .ui-
list {}).
.ui-list {
margin: 0;
padding: 0;
list-style: none;
}
.ui-list__item {
padding: $spacing-unit;
}
Designed pieces of UI.
Still only using classes.
More explicitly named
(e.g. .products-list {}).
Components
.products-list {
@include font-brand();
border-top: 1px solid $color-ui;
}
.products-list__item {
border-bottom: 1px solid $color-ui;
}
Overrides, helpers, utilities.
Only affect one piece of the
DOM at a time.
Usually carry !important.
Trumps
.one-half {
width: 50% !important;
}
You should notice…
Add or remove layers if, as, and when you need to.
Not using a preprocessor? Remove the Settings and Tools layers.
Don’t use OOCSS? Remove the Objects layer.
Need theming? Add a Theme layer.
Settings
Tools
Generic
Base
Components
Theme
Trumps
Booking.com run a lot of A/B tests.
How do we isolate temporary styles?
Create a Test layer (before the Trumps layer).
Adding layers