B.E.M and Components

I’ve got a naming convention, but I’d rather be in yours.

CSS frameworks are essential for giving structure to your stylesheets, preventing name clashes, and ensuring consistency across your codebase. One of the most popular CSS naming conventions is BEM, which stands for Block Element Modifier.

What is BEM?

BEM is a methodology for naming and structuring your CSS classes to make them more understandable and maintainable. It breaks down the components of your UI into three parts:

• Block: A standalone entity that is meaningful on its own.
• Element: A part of a block that has no standalone meaning and is semantically tied to its block.
• Modifier: A flag on a block or element that changes its appearance or behavior.

For example, consider a simple button component. Using BEM, the naming would look something like this:

<button class="button button--primary button--large">
  <span class="button__text">Click Me</span>
</button>

Here:

• button is the Block.
• button__text is an Element of the button block.
• button--primary and button--large are Modifiers that change the button’s appearance.

Benefits of BEM

1. Prevents Name Clashes: BEM’s strict naming convention reduces the risk of class name conflicts, making your styles more predictable and easier to maintain.
2. Clear Structure: By breaking down the components into blocks, elements, and modifiers, BEM provides a clear and logical structure for your CSS, enhancing readability.
3. Scalability: BEM makes it easier to scale your codebase, especially in larger projects with multiple developers.

Downsides of BEM

One of the main criticisms of BEM is the potential for very long class names. This can sometimes make the HTML harder to read and increase the file size.

<div class="header header--large header--dark">
  <nav class="header__nav">
    <ul class="header__nav-list">

      <li class="header__nav-item header__nav-item--active">
        <a class="header__nav-link" href="#">Home</a>
      </li>

      <li class="header__nav-item">
        <a class="header__nav-link" href="#">About</a>
      </li>

    </ul>
  </nav>
</div>

Do We Still Need BEM with Scoped CSS?

With the advent of CSS-in-JS and component-based frameworks like React, Angular, and Vue, the necessity of BEM has come into question. Scoped CSS or CSS Modules, where styles are encapsulated within the component, significantly reduces the chance of name conflicts.

// Example in React

import styles from './Button.module.css';

function Button({ type, size, children }) {
  return (
    <button className={`${styles.button} ${styles[type]} ${styles[size]}`}>
      {children}
    </button>
  );
}

In this example, the CSS classes are scoped to the Button component, making it easier to manage styles without worrying about global name clashes.

Conclusion

While there is much less need for BEM when using scoped CSS, good naming conventions are always beneficial. BEM provides a consistent structure that makes your code easier to read and understand. Whether you choose to use BEM or not, the principles of clear, descriptive class names and modular CSS are key to maintaining a clean and scalable codebase.

Additional Resources

• BEM Official Website
• Using BEM in components