@jordanlewiz
Senior Frontend Dev
Co-organiser
<button class="btn--primary">
<button class="btn btn--green btn--large">
Single class approach
Variation
A different or distinct form or version of something
Oxford Dictionary
Variation
<button class="btn--primary">
Mutliple class approach
A ... thing that makes partial
or minor changes to something
Oxford Dictionary
Modifier
<button class="btn -color-primary -size-large">
Chainable modifiers provide us with the ability to configure a module in the HTML with a short, concise syntax.
Leading hyphen
-color-primary
Namespace
Descriptor for the modification
-color-primary
Chainable modifiers should never modify the same CSS property twice for a given module
How we got here?
// Multiple Classes
<button class="btn btn--green btn--large">
// Single Classes
<button class="btn--primary">
// Chainable Modifer
<button class="btn -color-primary -size-large">
.btn{
font-size: 20px;
background-color: grey;
&.-size-large{
font-size: 30px;
padding: 10px;
}
&.-color-primary{
background-color: green;
}
}
.btn{
font-size: 20px;
background-color: grey;
}
.btn.-color-primary{
background-color: green;
}
.btn.-size-large{
font-size: 30px;
padding: 10px;
}
Chainable Modifiers
.t-body
+font-smoothing
color: $grey-a-bit-dark
font-family: $helvetica
font-size: 16px
font-weight: 400
line-height: 1.5
margin-bottom: 1em
a
+typography-link
// Size
// ------------------------------------------------
&.-size-xl
font-size: 20px
&.-size-l
font-size: 18px
// default size (16px)
&.-size-m
font-size: 14px
&.-size-s
font-size: 12px
// Color
// ------------------------------------------------
&.-color-light
color: $white
&.-color-inherit
color: inherit
// Style
// ------------------------------------------------
&.-style-italic
font-style: italic
// Weight
// ------------------------------------------------
&.-weight-bold
font-weight: 700
Chainable Modifiers full example (.sass)
.btn{
font-size: 20px;
background-color: grey;
}
.btn--primary{
@extend .btn;
background-color: green;
font-size: 30px;
padding: 10px;
}
.btn, .btn--primary{
font-size: 20px;
background-color: grey;
}
.btn--primary{
background-color: green;
font-size: 30px;
padding: 10px;
}
Original BEM Modifier (single class approach)
.btn{
font-size: 20px;
background-color: grey;
}
.btn--green{
background-color: green;
}
.btn--large{
font-size: 30px;
padding: 10px;
}
Original BEM Modifier (multiple class approach)