Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Modular CSS with Sass

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The BEM Pattern

3:23 with Guil Hernandez

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.

Quick Reference

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up