Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
With the BEM methodology, we're able to define a meaningful naming convention that will help make our CSS more modular, portable and easier to understand by other designers and developers.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Without some kind of naming convention, a
project's code can end up
0:05
looking like it's been through the hands
of a dozen developers.
0:08
So it's good to have a form of discipline
in how we write our code.
0:11
Especially when working on teams.
0:14
With the BEM methodology, we're able to
define a meaningful naming
0:17
convention that will help make our CSS
more modular, portable.
0:20
And easier to understand by other
designers and developers.
0:24
BEM stands for Block Element Modifier.
0:27
It uses class names to convey information
about blocks, elements and
0:30
modifiers in our code.
0:35
To understand how it works, let's break
down the BEM naming pattern.
0:36
Now the main thing we need to remember
when writing class names with BEM is that
0:41
we start with a base component or module,
then we sometimes have a child element of
0:44
that component, and something might be a
variation or modifier of the element.
0:49
So really it's all about abstracting our
CSS styles into
0:55
three distinct types of classes.
0:58
Block classes, Element classes and
Modifier classes.
1:01
We write our BEM classes by first defining
a block.
1:04
The block is the root of the class and the
highest level of an abstraction.
1:08
Think of the block as the module grabber.
1:13
Blocks usually contain child elements that
help form a block.
1:16
So next, to define a class for a
descendent element.
1:21
We again, write the block class, followed
by a double underscore and the element.
1:24
Now, sometimes we may have different
styles for an element.
1:29
Those different styles are the modifiers.
1:32
To define a modifier class, we keep the
block and
1:34
element names, then add two dashes
followed by the modifier name.
1:37
Remember, a modifier is any variation of
an element or a block.
1:41
So that means we could also have a block
modifier pattern in our class.
1:46
Now, you might be wondering the reason for
the double underscores and hyphens.
1:50
That's so we're able to clearly delimit
each part of the BEM selector.
1:54
The double underscores scope child
elements to a module.
1:58
So they should always be written before
the element.
2:02
And the two hyphens are used to indicate
the modifier.
2:04
Next, let's take a look at a more
practical example of how we
2:08
might map these band principles to a
module.
2:11
So say we want to build a simple
component.
2:14
A simple list for instance.
2:17
First, we define a block class named list.
2:19
This is the list module wrapper.
2:22
And all the base stops for the wrapper
need to be defined here.
2:25
Then, to style the elements of the list
component,
2:28
we can define an element class named, list
Item.
2:32
This is where we can write list item
styles for
2:35
padding, colors, borders and more.
2:38
Now if we need a modifier or create a
variation of the list item class.
2:40
So, say we need to remove the border from
the last one.
2:45
Well, we can do that with something like
list, item, and.
2:49
Or, if we need a modifier to highlight one
of our list items,
2:52
we can create the class, list item
highlight, with those specific styles.
2:56
Finally, in our markup, we can add the
list component classes, like so.
3:01
And there you have it, Block Element
Modifier.
3:05
So, as we learned with BEM, we can do a
better job of communication what
3:08
a block of HTML or a CSS rule does just
from its naming convention.
3:12
And selectors are easier to understand
because the context directly into
3:17
the selector.
3:22
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up