The BEM Pattern3: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.
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