Nesting Your BEM? (csswizardry.com)
almost 7 years ago from Raluca Partenie, in UI & UX
almost 7 years ago from Raluca Partenie, in UI & UX
This is pretty much how I do it.
What I'm struggling with is the optimal way to do media queries. I prefer to keep them in the same area as the element so that it's easier to grab one bit of code for the whole thing. Something like this. It can get a bit messy though.
.nav-primary {
&#{&} {
/* mobile-first styles */ @media (min-width $break-small) { /* small / tablet styles */ }
}
}
Interesting article from Harry. I'm not sure how I feel about this - I'm into keeping specificity flat/uniform, but the method he references seems a little messy.
This can help us working in environments where other developers do not understand how BEM works, or who are prone to just hacking things around until things look right.
This is the only advantage I see with this, which is actually a really great one. One other negative not mentioned is you're theoretically nearly doubling css file size.
Anyhow, interesting take—I like the thought behind this.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now