Question :
I am having doubts about best practices using the methodology GOOD , 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 any better way to do this?
Thank you.
Answer :
First of all, the BEM methodology process has the premise: blocks is a set of elements, however elements can see blocks, and of course, both can 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{
}
}
}
Yes, nesting two levels of elements is a bad practice in WELL. The correct one, according to the methodology , is to ignore intermediate levels when naming element classes.
Class c-ngroup__list__item
would be c-ngroup__item
and class c-ngroup__list__link
would be c-ngroup__link
.