5 ms·
I feel that yes SASS requires less source code, but the nesting is kind of an anti-pattern and encourages complex hierarchies of styles which are hard to follow
by gitgud 8y ago
I feel that yes SASS requires less source code, but the nesting is kind of an anti-pattern and encourages complex hierarchies of styles which are hard to follow and maintain.
- rhizome 8y agoHow come I haven't experienced these downsides?
- andykx 8y agoI'm with you. My SCSS is really just CSS with nesting. My CSS is cleaner without any downside. I've never experienced issues with maintainability, even in large CSS files.
- pixelbash 8y agoThat's where I am on this. Before nesting I had to take great care to avoid conflicts. I guess this is what BEM set out to solve, but it seems to have limitations.
- BigJono 8y agoWhy would sass have any effect on whether or not you have conflicts? You can just do things in plain CSS with descendant (' ') selectors, same as if they were nested in sass.
- mercer 8y agoSure, but that's a bit like arguing that you don't need 'scope' for your variables and you can just prepend the function name (or multiple nested function names). Or that you don't need modules but can just put all your code in one file. At the very least support of nesting is a huge convenience, but in practice I've also found that it saves me from all sorts mistakes, whether it's because I'm being stupid, or refactoring things. That said, overusing nested selectors can be a problem too. I generally try to limit myself to two levels of nesting (component -> element), and then a third for pseudo-classes (:hover, :selected, etc.) and pseudo-elements (:before, etc.).
- gitgud 8y agoProbably for the same reason some people don't see the downsides of C++ or Java... you tend not to see the downsides, if you're good at it. I just feel that nesting (which Sass encourages) leads to complexity and fragility.
- type0 8y agoAs with everything, don't overdo it and you'll be fine.
- GordonS 8y agoI generally stick to only 1 level of nesting - I still find that really beneficial.
- stickfigure 8y agoHi, you seem to be the leading critic of nesting on this page, so I have a question for you. Assuming you're using a component framework like React, Vue, or Angular (and not a shadow dom based system like Polymer), how do you isolate your component CSS? When I make a component 'MyComponent', I give it the className 'MyComponent'. Then I can create a SCSS file and scope its entire contents: .MyComponent { // all the css specific to MyComponent } Without nesting, how do you keep your component-specific CSS from polluting the rest of your app? Do you scope every rule every time? Isn't that tedious?
- gitgud 8y agoThank you, I'll wear the title of: leading critic of nesting proudly! disclaimer I'm not a hugely experienced programmer, but have done a few open source projects in Vue, React and am currently working on a series of Angular applications with a team at work. In Vue and Angular component styles are automatically encapsulated at the component level by scoping (I think) so nesting isn't really necessary to target specific components. Angular also recently deprecated a method of breaking out of component styling and soon it will be completely removed from the framework. Although I'm a critic I'm not totally against nesting, I just feel that SASS encourages it, so without discipline things can get very complex and fragile. One level of nesting is OK with me though I suppose...
- riz_ 8y agoNot OP, but you could use CSS modules, styled components or styled-jsx, all of which auto-generate unique classnames (styled-jsx uses a HTML attribute for it, I think).