h1 {
color: blue;
}
h1 {
color: black;
}
<h1>Title</h1>
In general, later CSS rules override earlier ones.
.title {
color: red;
}
h1 {
color: black;
}
<h1 class="title">Title</h1>
Order is overruled by "specificity," which is determined by the selector you use (element, class, id, etc.)
h1.title {
color: blue;
}
Combining multiple selectors adds their specificity "score" together.
#foo {
color: blue
}
.bar {
color: red;
}
h1 {
color: black;
}
h1 {
color: #BADA55 !important;
}
Inline Styles
<h1 style="color: green;">Title</h1>
IDs
Elements
Classes
!important trumps everything else
#foo {
color: blue
}
.bar {
color: red;
}
h1 {
color: black;
}
section.article .title {
color: purple;
}
1000
<h1 style="color: green;">Title</h1>
0100
0001
0010
Specificity can be calculated using a "point" system.
0021
BEM is a naming convention which helps you keep your CSS specificity "flat"
BEM is a naming convention which helps you keep your CSS specificity "flat"
BEM stands for Block Element Modifier
Block: An abstract component
Element: A descendant or relative of the block, which helps form the block
Modifier: A different state or version of a block or element
.person {} // Block
.person__hand {} // Element
.person--female {} //Modified block
.person {} // Block
.person__hand {} // Element
.person--female {} //Modified block
.person__hand--left {} // Modified Element
.person--female__hand {} // Element of a modified (type of) block
.modal {} // A modal popup
.modal--open {} // Styles the modal when open
.modal__header {} // The header of a modal
.button {} // Basic button styles (can include defaults)
.button--alert {} // Styles to make the button red
.button--small {} // Styles to make the button small
In practice...
Or...
.modal {
display: none; // Hide by default
width: 500px; // Base styles, etc.
}
.modal--open {
display: block; // Show the modal.
}
.modal__header {
text-transform: uppercase; // Modal headers are uppercase
}
CSS
<div class="modal modal--open">
<h1 class="modal__header">Signup Successful!</h1>
<p>You are now a member.</p>
</div>
HTML
.button {
padding: 10px; // Padding around text
background-color: grey; // Default background color
color: black; // Default text color
}
.button--success {
background-color: green;
color: white;
}
.modal__button {
float: right; // Modal buttons are on the right side
}
CSS
<div class="modal modal--open">
<h1 class="modal__header">Signup Successful!</h1>
<p>You are now a member.</p>
<button class="modal__button button button--success">DONE</button>
</div>
HTML
Separation of concerns!
<div class="modal modal--open">
<h1 class="modal__header">Signup Successful!</h1>
<p>You are now a member.</p>
<button class="modal__button button button--success">DONE</button>
</div>
HTML
This represents both a feature and a limitation of BEM.
A BEM class cannot have more than one element or one modifier, so at some point you must name a new block.
<div class="modal modal--open">
<h1 class="modal__header">Signup Successful!</h1>
<div class="modal__body">
<p class="modal__body__paragraph">This is not BEM!</p>
<p class="modal__paragraph">This is BEM.</p>
</div>
</div>
<div class="header">
<img class="site-logo" src="logo.png">
</div>
<div class="header">
<img class="header__logo" src="logo.png">
</div>
Is the site-logo styled a certain way because it's in the header? Probably not, but if so...
Ask yourself:
BEM is just a way of writing classes which imply structure (with elements) and variation (with modifiers).
Not every class name needs __ or --.
Let it help you, not hinder you!
.modal {
// Base modal styles
&--open {
// .modal--open styles
}
&__header {
// .modal__header styles
}
&__button {
// .modal__button styles
}
}
Sass's ampersand (&) feature makes BEM super easy to write and read.
<div class="modal modal--open">
<h1 class="modal__header">Signup Successful!</h1>
<p>You are now a member.</p>
<button class="modal__button button button--success">DONE</button>
</div>
.button {
// Base button Styles
&--success {}
&--warning {}
&--small {}
&--large {}
}