7 ms·

"Considering it’s a point of professional pride to avoid nested structures as much as possible in other languages..." Nested loops can be bad. Nesting logic de

by thebouv 11y ago

"Considering it’s a point of professional pride to avoid nested structures as much as possible in other languages..." Nested loops can be bad. Nesting logic deeply in other languages is bad. Nesting style rules that belong together, well, together isn't nesting as much as it is putting like stuff together. I may create section.myawesomesection {...} and everything to do with the stuff in there is in there, not leaking out. I don't accidentally use a class name used somewhere else and globally change it, I don't change all global UL tags to be flat, inline, no list-style. I change them in context of section.myawesomesection. Not to mention allowing me to put my breakpoints together in context (particularly useful with a mixin like breakpoint(small) or something). Yes you can really go nuts with the nesting and create a giant pile of crap. But then that's you being a bad planner (not even going to say coder here, as CSS/SASS is more about planning than coding).

stoikerty 11y ago
I agree, nesting has been one of the most helpful parts in SASS to keep everything organised. Nestin is just harder to do right, you need some experience in organising files. Even with the specifity I vastly prefer nesting to a bunch of files with flat selectors and a huge amount of globals where you need a lot of time just to understand which elements affect which. The post is quite opinionated and puts every issue in a bucket, as if there is only one way to write CSS. A few examples would have been useful. Not using Nesting is the worst offender in the list.
- marrs 11y ago
  The trouble is that untangling nested selectors can be a real challenge, especially if you have inheritance between them, and the implications can be chronic. On a project I was working on recently, a colleague reported to the team that the addition of one line of code to a SCSS file resulted in an increase in size of the target CSS by 800KB. Looking at the spaghetti code that had been written, none of us could work out how many rules were being combined out of the deceptively clean looking SCSS. A recommendation for that project was to lint for some ground rules forbidding certain behaviours, nesting being one of them. I've actually been considering avoiding SASS altogether in the future.
- smpetrey 11y ago
  Couldn't agree more there. I tend to avoid nesting more than 3 levels deep, because I don't want someone else looking at my code and cry.
paulojreis 11y ago
That approach - nesting everything inside section.myawesomesection- would hurt: a) Performance (rule matching gets significantly harder as you nest); b) Maintainability (did a change in the mark-up? Then check the CSS to see if it still matches); c) Code reuse (obviously). Using a nomenclature-based solution such as BEM, in the other hand, would avoid all these issues (complex, slow and over-specific selectors; DOM dependence; ease of reuse) while still avoiding style leaks. I'd argue BEM is even better at avoiding leaks: if you change all your global <ul> inside your section.myawesomesection, then it will - eventually, sooner or later - leak to a <ul> which you didn't want to style.
- thebouv 11y ago
  a) Granted. But we're talking about a specificity after compiling to CSS of: section.myawesomesection { h2{..} } to section.myawesomesection h2 {..}. Definitely not wanting to create nests that are so deep the specificity is insane. Could I have just given a class to the h2? Yep. But performance difference between h2.myclass{..} vs section.awesomesection h2{..}? Worth worrying over? Of course, if there really is a difference, it would add up I suppose over a mega-site. So thanks for the food for thought. I'll have to weigh it versus developer happiness I get from the tidy style rules. b) Well, if the markup changes, that can just as well change your CSS too. At some point, some change in the markup, you're going to reexamine the CSS for it. It's not like you write the perfect CSS and walk away because it will always work with the document and all its iterations. Of course, like you said, maintainability is an issue but it isn't exclusive to SASS or my use of nesting via section.myawesomesection either. c) Styles that are in many places get noted and placed so they can be reused. But that one special snowflake of a rule that applies only to this section of content because my designer wants to especially call it out? The rule can be specific. I'm not creating 200 line section.myawesomesection definitions. Reusable items are resuable. Specific items are specific (most often to overwrite a global style say like font, color, this specific absolutely positioned icon, etc). Generally a dozen lines or so. If longer, just like a function getting too long, and I rethink/rewrite. d) I absolutely 100% will check out BEM. I'm no slave to SASS, nesting, or anything like that. I have no idea about BEM will happily switch if it is better.
  - 11y ago

by thebouv 11y ago

stoikerty 11y ago

I agree, nesting has been one of the most helpful parts in SASS to keep everything organised. Nestin is just harder to do right, you need some experience in organising files. Even with the specifity I vastly prefer nesting to a bunch of files with flat selectors and a huge amount of globals where you need a lot of time just to understand which elements affect which. The post is quite opinionated and puts every issue in a bucket, as if there is only one way to write CSS. A few examples would have been useful. Not using Nesting is the worst offender in the list.

marrs 11y ago
The trouble is that untangling nested selectors can be a real challenge, especially if you have inheritance between them, and the implications can be chronic. On a project I was working on recently, a colleague reported to the team that the addition of one line of code to a SCSS file resulted in an increase in size of the target CSS by 800KB. Looking at the spaghetti code that had been written, none of us could work out how many rules were being combined out of the deceptively clean looking SCSS. A recommendation for that project was to lint for some ground rules forbidding certain behaviours, nesting being one of them. I've actually been considering avoiding SASS altogether in the future.
smpetrey 11y ago
Couldn't agree more there. I tend to avoid nesting more than 3 levels deep, because I don't want someone else looking at my code and cry.

paulojreis 11y ago

That approach - nesting everything inside section.myawesomesection- would hurt: a) Performance (rule matching gets significantly harder as you nest); b) Maintainability (did a change in the mark-up? Then check the CSS to see if it still matches); c) Code reuse (obviously). Using a nomenclature-based solution such as BEM, in the other hand, would avoid all these issues (complex, slow and over-specific selectors; DOM dependence; ease of reuse) while still avoiding style leaks. I'd argue BEM is even better at avoiding leaks: if you change all your global <ul> inside your section.myawesomesection, then it will - eventually, sooner or later - leak to a <ul> which you didn't want to style.

thebouv 11y ago
a) Granted. But we're talking about a specificity after compiling to CSS of: section.myawesomesection { h2{..} } to section.myawesomesection h2 {..}. Definitely not wanting to create nests that are so deep the specificity is insane. Could I have just given a class to the h2? Yep. But performance difference between h2.myclass{..} vs section.awesomesection h2{..}? Worth worrying over? Of course, if there really is a difference, it would add up I suppose over a mega-site. So thanks for the food for thought. I'll have to weigh it versus developer happiness I get from the tidy style rules. b) Well, if the markup changes, that can just as well change your CSS too. At some point, some change in the markup, you're going to reexamine the CSS for it. It's not like you write the perfect CSS and walk away because it will always work with the document and all its iterations. Of course, like you said, maintainability is an issue but it isn't exclusive to SASS or my use of nesting via section.myawesomesection either. c) Styles that are in many places get noted and placed so they can be reused. But that one special snowflake of a rule that applies only to this section of content because my designer wants to especially call it out? The rule can be specific. I'm not creating 200 line section.myawesomesection definitions. Reusable items are resuable. Specific items are specific (most often to overwrite a global style say like font, color, this specific absolutely positioned icon, etc). Generally a dozen lines or so. If longer, just like a function getting too long, and I rethink/rewrite. d) I absolutely 100% will check out BEM. I'm no slave to SASS, nesting, or anything like that. I have no idea about BEM will happily switch if it is better.
- 11y ago