DEV Community

Discussion on: The Differences Between CSS, LESS, & SASS

thebouv profile image
Anthony Bouvier

I like it. BEM has some issues too in getting hyper-specific and tripping over its own verbosity.

Just like I don't nest more than once or twice in SCSS, you can create a nightmare with BEM once you start getting into grandchild selectors and the like.

Like for your example I probably wouldn't nest employer and position, but instead have them on the first level.

Of course I know your example isn't trying to teach BEM or be a shining example, just a quick example. But for those interested in BEM, definitely keep an eye out for traps:

Personally I've tried sticking to BEM on a few projects but feel I drift away pretty fast from it. That's my own personal bugaboo and not for any technical reason. I just .. drift. Haha.

Thread Thread
kenbellows profile image
Ken Bellows

Yeah absolutely, I'd flatten it if possible, I was just trying to intentionally demonstrate multiple levels of nesting. But I have also found plenty of real-life cases where I needed to nest values like that for layout and/or semantic reasons. With the advent of CSS Grid it's becoming a lot less necessary to nest for layout's sake, but I still find it can be useful semantically, just to better organize the markup for reading, and in some cases for a11y purposes as well.

I personally haven't had much trouble with even pretty deeply nested BEM, as long as you're careful to refactor commonly repeated styles and component patterns out into reusable utility classes where it makes sense. But of course, as with any technique, you can take BEM too far.