BEM methodology and sub-blocks

Asked

Viewed 134 times

3

I’m having doubts about best practices using methodology WELL, see below an example (example with Jade):

nav(class='c-ngroup')
  div(class='wrap')
    div(class='row')
      div(class='col-md--2')
        h4(class='c-ngroup__title') Promote
        ul(class='c-ngroup__list')
          li(class='c-ngroup__list__item')
            a(href='#', class='c-ngroup__list__link') Event
          li(class='c-ngroup__list__item')
            a(href='#', class='c-ngroup__list__link') Place
          li(class='c-ngroup__list__item')
            a(href='#', class='c-ngroup__list__link') Promotion

Notice that I’m nesting two levels of elements c-ngroup__list__item, Would that be a bad practice? Is there a better way to do it?

Thank you.

css bem

2 answers

2


First the process of the BEM methodology has as a premise: blocks are a set of elements, however elements can come to see blocks, and of course, both may have modifications.

See its structure:

nav.c-ngroup

  //-div e bloco class modificador 
modificador

  div.wrap

    //- bloco

    .row

      //- col bloco md-2 modificador

      .col-md-2

        //- elemento

        h4.c-ngroup__title Promote

        //- bloco 

        ul.c-ngroup__list

          // elemento/ bloco

          li.c-ngroup__list__item

            //- elemento semântico 

            a(href='#') Event
         ...

CSS/Less

.c-ngroup__list{
   &__title{
   }
   &__item{
     a{

     }
   }
}

  • Thank you! I tried to contribute through the mobile but apparently he got very strange.. Thank you!

2

Yes, nesting two levels of elements is a bad practice in the GOOD. The correct, according to the methodology, is to ignore intermediate levels when naming classes of elements.

The class c-ngroup__list__item would be c-ngroup__item and the class c-ngroup__list__link would be c-ngroup__link.

Browser other questions tagged css bem

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