5 ms·
Nested selectors are some of the least maintainable language features i have ever worked with. Once the number of embedded classes, or layers of embedding gets
by liquidise 11y ago
Nested selectors are some of the least maintainable language features i have ever worked with. Once the number of embedded classes, or layers of embedding gets too big, the entire file descends to a bad place.
Here is a real world example of what i am talking about, from a code base i currently work with, and don't dare touch:
http://i.imgur.com/fMlvoRS.png http://i.imgur.com/fMlvoRS.png
The idea of maintaining legacy sass with heavy embedding in years to come makes me shudder.
- leetrout 11y agoI think they are easily abused. I don't think they should be lumped in to the untouchable feature category but definitely have some rules around their use. I think it's always ok to use them for pseud-oclasses and I think in general if you've nested something more than 2 levels deep you probably have a sign you might need to refactor something.
- liquidise 11y agoI'd agree in theory, but the problem remains: will a future dev share the same foresight? As far as i can tell their spec contains no standard regarding depth or length
- jessaustin 11y agoIf one mistrusts future developers enough, one sets up linting to enforce one's own standards: https://github.com/CSSLint/csslint https://github.com/CSSLint/csslint
- pcurve 11y agoThat is pretty bad. Sadly I've seen much worse. Most sites don't need variables and nestings of CSS. I would rather see duplicate class names like this in CSS. .wrapper1 .header {} .wrapper1 .header h2 {} .wrapper1 .body {} .wrapper1 .body .article {} .wrapper1 .body .article .blurb {} .wrapper1 .body .article .quote {} .wrapper1 .footer {} Repetition doesn't bother me. In fact, it is surprisingly helpful.
- stdbrouw 11y agoSo you'd also prefer if wrapper and header: ... if wrapper and body: ... to if wrapper: if header: ... if body: ... when coding?
- id 11y agoTwo If statements, no nesting vs. Three If statements, 1 level deep nesting To me, the first option is clearly simpler and more readable. Then again, looking at the second option I notice immediately that I can dismiss it if wrapper happens to be false. But it really depends on what the other code lines contain.
- obelisk_ 11y agoI have never really considered repeating conditions instead of nesting. I might try doing so next time since I'm generally not happy with the depth of nesting I sometimes land myself in. The problem I foresee with repeat conditions is that during a change, I might forget to update one or more of the repeat conditions. Also, I wonder, do gcc and/or clang recognize repeat conditions and produce the equivalent of what nested statements would?
- johnmaguire2013 11y agoPython taught me some good practices in regards to this. Python's "enforcement" (or rather, strong PEP-8 suggestions) of 80 characters per line teaches you to come up with a lot of ways to avoid nesting. The most useful one, and the one that drives me crazy when I see it, is when people write code like this: if something: value = do something else: value = do something else return value These days I write code like this: if something: return do something return do something else In the simple example, it's not a big deal. But once you have 30 lines of code in between each statement (and nested if statements), it gets trickier to maintain every possible code path in your head. This isn't the same as "show all conditions at once" -- instead it's "ignore the conditions that have already been satisfied." Seeing that we already returned out in condition #1 lets me focus more on condition #2.
- kaishiro 11y agoI agree and empathize, especially with your example. Just out of curiosity, do you find this more or less readable: https://gist.github.com/kaishiro/fda6d9e6cb9876944901 https://gist.github.com/kaishiro/fda6d9e6cb9876944901 No right or wrong answer here, just genuinely curious.
- iamphilrae 11y agoIf you placed comments on the closing curly brackets to state where they started, then that's perfectly readable. e.g .myclass { ...30 loc ... } /* .myclass */ I really don't see this enough.
- paulddraper 11y agoI guess I'm bad at CSS/SASS, but I must be missing something. Maybe context.
- EC1 11y agoEnable sourcemaps, click on the selector, and it literally tells you what line to edit. Then go to sublime, cmd+p -> filename:line number -> enter. in 5 seconds you went from finding a css problem and finding its exact line. What that guy posted is fine (only if you have SOME sort of rules around nesting - our team has been getting along great ever since using rscss.io methodology)
- kuschku 11y ago> Enable sourcemaps, click on the selector, and it literally tells you what line to edit. Then go to sublime, cmd+p -> filename:line number -> enter. in 5 seconds you went from finding a css problem and finding its exact line. Doesn’t firefox even support in-browser viewing and editing of SASS?
- jordanlev 11y agoAgreed. Nested selectors in SASS/LESS is a classic case of something that makes writing code easier, but reading (understanding) code harder. And I think the benefit of the ease-of-writing is minimal (especially if you're using something like BEM where you're trying to avoid cascading anyway), whereas the drawbacks in terms of understandability are super duper high.
- jbeja 11y agoReally? This is pretty much bearable is not that bad as you make it sound. Is not really unmaintainable and horrible unless the code-base doesn't has a defined specification through variables and guide lines.
- betadreamer 11y agoNesting makes CSS easier to read and is more maintainable than having multiple similar names, especially for containers. That one you mention is a huge problem. Hence the documentation states "Don't nest more than 3 layers deep".