menu using these/bem guidelines about css-guidelines HOT 4 CLOSED

You can have multiple elements within a block, for example:

.menu {}
    .menu__list {}
    .menu__list-item {}
    .menu__link {}

Then the html would be:

• link

This is the approach I have taken on a project recently.

from css-guidelines.

Yeah, that's what I said in "The other option would be to give the li some BEM class as well, like .menu__listitem along the class for a which would be .menu_item" but then you are kind of much coupling it with html, aren't you?

On the other hand, for this particular case I could use the utility class, and the other cases I was talking about could probably be dealt with using another elements..

from css-guidelines.

Hey!

If you were to use BEM, you would have:

.menu {}
    .menu__item {}
        .menu__link {}

but then you are kind of much coupling it with html, aren't you?

The opposite :)

A selector like .menu > li {} is tightly coupled to the HTML in that you have to use lis. Using a class means that, for whatever reason, that styling could be applied to anything :)

BEM can seem redundant at times, but it’s a powerful naming convention that, for the most part, works perfectly :)

from css-guidelines.

Thanks!

from css-guidelines.