I've used SCSS for years and never once in the context of Ruby. I think it is phenomenal and the organizational benefits alone make it worth using.
You definitely have to be careful with its nesting feature though -- it is easy to nest too much and end up with generated CSS that has such high specificity that you make everything more complicated.
Generally I stick to 1 level of nesting, 2 if I really think there's a benefit. But rarely more than that lest I create a monster.
One of the biggest benefits of the organization SCSS allows for is being able to nest media queries together with the elements that query is affecting. Love it.
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
I'm a big fan of combining BEM with the ampersand operator to let me use nesting in LESS or SASS while maintaining flat CSS selectors:
<sectionclass="user-details"><h1class="user-details__name">Ken Bellows</h1><divclass="user-details__employment"><h2class="user-details__employment__employer">
My Cool Job, LLC
</h2><spanclass="user-details__employment__position">
Web Dev
</span></div></section>
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.
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I've used SCSS for years and never once in the context of Ruby. I think it is phenomenal and the organizational benefits alone make it worth using.
You definitely have to be careful with its nesting feature though -- it is easy to nest too much and end up with generated CSS that has such high specificity that you make everything more complicated.
Generally I stick to 1 level of nesting, 2 if I really think there's a benefit. But rarely more than that lest I create a monster.
One of the biggest benefits of the organization SCSS allows for is being able to nest media queries together with the elements that query is affecting. Love it.
Thanks for the comment! It's good to know that the level of nesting (5th level or higher) in that crap project was unusual.
I'm a big fan of combining BEM with the ampersand operator to let me use nesting in LESS or SASS while maintaining flat CSS selectors:
SCSS/LESS:
Output CSS:
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:
smashingmagazine.com/2016/06/battl...
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.
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.