8 Comments

  1. sky

    It is pretty sweet! Thanks for explaining that so thoroughly. If your work will be built upon or extended by others in any way, they will be thankful that you used such a thoughtful approach.

  2. Danny Cooper

    Hey Justin,

    If you were to go another level deep, what would the BEM name be? For example:

    Written by Justin Tadlock

    I’m assuming .entry__byline span {} wouldn’t be correct in this system.

    .entry__byline—name?

    • Justin Tadlock

      You’d use .entry__name. For example, you might have .entry__author, .entry__date, and so on. Element names are built from the block.

    • Justin Tadlock

      I was on my phone earlier and couldn’t go into as much detail (I’m not a great phone typist).

      BEM doesn’t care about hierarchy. It’s all about the block/component. Let’s take a look at the following structure.

      <article class="entry">
          <header class="entry__header">
              <div class="entry__byline">
                  Written by <span class="entry__author">Justin Tadlock</span>
              </div>
          </header>
      </article>
      

      It keeps the class names flat, regardless of the structure. .entry__author is an element within .entry. It doesn’t matter that it’s also nested within .entry__byline, which is itself nested within .entry__header.

      Let’s look at a different example. Sometimes, some “elements” should be separated into their own “blocks”. I do this with comments:

      <section class="comments">
          <h2 class="comments__title">100 comments</h2>
          <ol class="comments__list">
              <li class="comment"></li>
          </ol>
      </section>
      

      Instead of .comments__comment, I use .comment because it is going to be a distinct block on its own with several elements.

      Being able to recognize what is a distinct block vs. what is just an element of another block is half the battle. Sometimes, it’s obvious. Sometimes, it’s a personal choice. On the whole, most Web site elements are pretty easy to break down into blocks.

  3. […] For many theme developers, Mythic’s use of the BEM (Block-Element-Modifier) CSS class-naming system is their first introduction to a system of non-hierarchal, component-based CSS. Because BEM doesn’t rely on nested selectors, it’s easier for users to overwrite CSS that they want to change. Tadlock explains the benefit for child themes in a recent post about why Mythic uses BEM. […]

  4. Mahesh Waghmare

    It is definitely good to use it in the large project. But, How to add support for the 3rd party plugins?

    • Justin Tadlock

      There’s really not much you can do with third-party plugins.

      One of the biggest problems with WordPress is that it doesn’t go far enough setting coding standards for theme and plugin authors.

      The bigger plugins that have a lot of front-end output should really be following some sort of class-naming system. And, if they’re not, it’s really up to us theme authors to push them to adopt a standardized system.

Comments are closed.