4 ms·
As the author says, in SASS, nesting that produces deeply nested selectors like `body#homepage header .navbar:first-child li>a` should definitely be avoided. Ho
by blowski 11y ago
As the author says, in SASS, nesting that produces deeply nested selectors like `body#homepage header .navbar:first-child li>a` should definitely be avoided. However, you can do BEM style selectors quite neatly in SASS:
.navbar {
&__element {
&__hover {
...
}
}
}
which will produce a selector like:
.navbar__element__hover { ... }
This is a great compromise between readability, maintainability and performance.
Also, the first point about keeping all your CSS in the same file works for smaller projects. But on bigger projects, managing a 5000 line CSS file is a nightmare. Better to break your project into multiple files, and import them as mixins or straight includes. Again, using BEM-style CSS helps with that.
In the end, managing CSS is always a pain whatever approach you use. Too much of the advice on CSS doesn't talk about the context in which to apply or ignore the advice. What works for for a massive team working on a high-profile, big-budget, mission critical website will be enormous overkill for a small project with one front end developer.
- emn13 11y agoWhat's the motivation to pick .navbar { &__element { &__hover { ... } } } over .navbar__element__hover { ... } ?
- blowski 11y agoAssuming that .navbar contains lots of elements, and those elements have lots of modifiers, then repeatedly writing .navbar__ is not very DRY. Want to change .navbar to .primary-navbar? You have to change it for every selector in that block.
- marrs 11y agoI would actually argue that DRYness is to be avoided in this case. How many selectors you are specifying, and what they are, is something you should be explicitly aware of. You may find that your DRY SASS is producing very non-DRY CSS.
- paulojreis 11y agoI like and use that way of writing compound, nomenclature-based, selectors in SASS. There's a catch, though: you wouldn't find your style definitions by searching via the resulting selector (e.g. .navbar__element__hover). It's a smaller problem when you have the CSS split across files, but it's a problem nonetheless.
- blowski 11y agoTrue, and I've experienced that very problem. It's not a solution, but SASS does at least output the line number of each rule set on the generated CSS file.