Extract key selector
(NOTE: A key selector is the element being styled in the css, usually it is the last element in the chain of a selector)
Extract each repeated use of a key selector into its own class.
From:
.footer .btn,
.header .btn {
padding: 5px;
}
.content .btn {
padding: 10px;
}
To:
.btn {
padding: 5px;
}
.btn--large {
padding: 10px;
}
Why?
Extracting a key selector's style to its own class encourages modularity. .btn--large
can be used anywhere, whereas .content .btn
had to be inside .content
.
Last updated
Was this helpful?