BEM pattern in CSS

Asked

Viewed 117 times

0

I am using the standard WELL and came to me a doubt, when I have an element with children and grandchildren, how should I name my classes?

I will use code to give this example: 

<header class="header">
  <div class="header__container">
    <!-- BURGUER MOBILE MENU -->
    <div class="header__burguer">
      <img class="??????" src="burguer.png" alt="Menu Mobile">
    </div>
  </div>
</header>

The part of the image inside the header__burguer that you’re confusing me,

if I use header__img would be kind of meaningless, because img is too generic and use 4 underscores I think comes out of the pattern of WELL. header__burguer__img

Could anyone suggest something according to this pattern? Looking, I haven’t found anything yet.

css bem

  • This is a clear signal that is making your element more complex than it should be. If I create a "burger" button in the header and another in the footer, what are the differences? The button really needs to depend on header?

  • In this case, it does not. In my conception I put the header_burguer because this element is inside the header. With your answer I see that I had understood so it has nothing to do, right?

  • Correct. You use GOOD for only its isolated element. By definition it cannot depend on the context that is inserted.

  • actually on the footer would be something like <footer class="footer">...&#xA; <div class="footer__ burguer">

  • Take a look at this answer, and especially the two links I mention at the end https://answall.com/questions/412137/comon%C3%a3o-repeat-c%C3%b3digo-css/412151#412151

  • @hugocsl thanks but now confused me a little again kkk. For example, even Header, now in the footer, imagine that inside the footer_Burguer I have an image, as I would name the <img> and I can not use 4 underscores as it is in the BEM pattern, ie footer___burguer_img

  • 1

    I know the question is of the technical part, but there is a question, they invented the GOOD to help "correct" problems that should not even exist and it seems to me that people adopt things like this (not only WELL and not only in CSS) as if it were the one truth that will save you from all your troubles. I’ve used CSS for years, tried to practice and understand very well the selectors and rules (Rules) and organized myself well (really well, not WELL) and never had problems, even received praise for my minimalist CSS that presented the same result and often much lighter...

  • 1

    ... The GOOD by itself is to write a lot of things, even more than normal in a supposedly organized way, and in the end you will have much more things than expected and maybe even get lost in the supposed organization. I will summarize, learn the Rules and practice seems to me much more advantageous, most claim to know CSS, but only know the minimum of the basics and so end up believing in alleged solutions and "cake recipes"... It is not a criticism of you, it is a criticism of "the standards" (in various places and languages) which are sometimes problems disguised as "solution"

  • Thanks for the advice, @Guilhermenascimento!

  • 2

    @Guilhermenascimento is a way to write WELL more than you need to get the result,

Show 5 more comments

1 answer

2


Part of philosophy of nomenclature defined by BEM is that a component of the site should not depend on its context. If the display of the component changes according to the context, it will be the CSS that defines this with the specific rules for this, but for the construction of the component itself should be independent.

For a burger-like menu button, as posed in the question, it shouldn’t depend on whether it’s in the header or anywhere else on the page. In other words, it is not the responsibility of the knowing button of the header information, so classes should not mix.

So a possible component would be:

<div class="hamburguer">
  <span class="hamburguer__line"></span>
  <span class="hamburguer__line"></span>
  <span class="hamburguer__line"></span>
</div>

Where you would get stylized regardless of context. By pressing the element, to change the view, you could add the modifier class via JS.

<div class="hamburguer hamburguer--opened">
  <span class="hamburguer__line"></span>
  <span class="hamburguer__line"></span>
  <span class="hamburguer__line"></span>
</div>

When you insert your component into the header, it would look something like:

<header class="header">
  <div class="header__container">
    <div class="hamburguer">
      <span class="hamburguer__line"></span>
      <span class="hamburguer__line"></span>
      <span class="hamburguer__line"></span>
    </div>
  </div>
</header>

Browser other questions tagged css bem

You are not signed in. Login or sign up in order to post.