1. 7

  2. 2

    We’ve been using BEM exclusively for all new projects in my department and love it. It has much clearer and simpler rules to follow than most other CSS naming conventions.

    It’s true, you are not going to have a proper grid layout and other styles the CSS frameworks provide.

    There isn’t anything inherent to BEM that prevents you from using a CSS grid. For example:

    <div class="grid">
        <div class="grid__row">
            <div class="grid__column grid_column--3"></div>
            <div class="grid__column grid_column--6"></div>
            <div class="grid__column grid_column--3"></div>

    I realize that the above may look excessively verbose. But there is a good reason for the repetition, which is that it keeps specificity very low.

    1. 2

      Sure, but you could still extract those classes grid__column to something more meaningful to understand the content and structure of the HTML. Later, you could move all that grid logic to an inner class, with a better description of the HTML, by putting it inside a mixin (later imported with a include and most encouraged way) or in the class (later imported with a extend). In any case I usually decouple the grid logic from the classes in my HTML. Because, in the end, using classes that can actually describe the content and structure will make it agnostic to any grid we want to use (CSS grid, Bootstrap, etc) just by adding it to SASS or LESS mixins later (when using preprocessors, of course).

      1. 2

        Yeah. I totally understand why you might want to avoid putting the grid into your HTML. It is pretty fantastic for rapid prototyping by non-frontenders, though. :-)

        1. 1

          My company recently recorded a podcast interview about how we organize our CSS - spoiler alert, we use BEM as a part of our system. We also DO use grid css classes, however, without converting them to mixin into more-semantic classes. I think it’s just easier to see how the content maps to the layout that way.

          It’s been proving a really nice system for growing applications, though. It’s seldom we get caught in specificity wars, and the structure we throw on top of it makes it fairly easy to guess where you’re going to find css class definitions.