If you find yourself consistently modifying elements of the same component together in the same way, then consider adding the modifier to the base of the component and adjusting styles for each child element based on that one modifier. Style Elements Based on the Component Modifier I’ve found that modifying elements is much less common and less useful than modifying entire components. In those cases add a modifier to the element instead of the component. In some cases, you may want to vary a single element in a component. In the examples below, note that photo_caption_quote is an incorrect usage of BEM, while photo_quote is more appropriate. A BEM class name representing a child element in the component should only include the base/block name and the one element name. BEM is not intended to communicate structural depth. If your component has child elements several levels deep, don’t try to represent each level in the class name. One goal of BEM is for most selectors to use just a single class name. Leaving those classes off may be more succinct, but you will increase risks of cascade issues in the future. That will force you to use a selector with increased specificity to style those bare elements inside the component (see img and figcaption elements below). Don’t omit class names from the child elements in your HTML. One of the purposes behind BEM is to keep specificity low and consistent. Each child element that needs styled should include a named class. More complex components will have child elements. The modifier class is intended to augment, not replace, the base class. The variation should be implemented with a modifier class. Simple components may only employ a single element and thus a single class which would be the block. Examples Component With No Elements or Modifiers If all three are used in a name it would look something like this:Īfter that brief introduction, let’s look at some specific examples.
Modifier: Either a block or element may have a variation signified by a modifier.Element: Inside of the component may be one or more children called elements.Block: The outermost parent element of the component is defined as the block.It sets a consistent low-level of specificity for styling selectorsĪ BEM class name includes up to three parts.Apply Today Why BEMīEM naming provides three specific benefits: We’re Hiring Frontend Developers!ĭo you have a solid knowledge of HTML, CSS, and JavaScript while being mindful of the diverse ecosystem of devices and connections? We’re looking for experienced Frontend Developers who love to learn and collaborate. It has fairly wide adoption and is immensely useful in writing CSS that is easier to read, understand, and scale. BEM (which stands for Block-Element-Modifier) is a naming convention standard for CSS class names.
0 kommentar(er)
