Hacker News Reader

Comment by vehemenz | Hacker News Reader

Lack of rules nesting is more about CSS's incompatibility with the predominant paradigm of stylesheet design (mapping high abstraction class names to specific elements). And honestly, you can easily solve this problem with preprocessors if you like that way of doing things.

Can you give an example of repeating the selector slug to make a rule for children?

View on HN

I guess something like:

  foo bar {
    ...styles
  }

  foo bar baz {
    ...more styles
  }

  foo bar baz > bim {
    ...even more
  }
  
  foo bar baz > bim:not(bop) {
    ...stuff
  }

instead of a more SCSS like syntax:

  foo bar {
  ...styles
    & baz {
      ...more styles
      & > bim {
        ...even more
        &:not(bop)
          ...stuff
        }
      }
    }
  }

SCSS seems like it gets out of control after a while though without rigor from the developers. The last app I worked on had a half-assed SCSS approach that started off with a decent base, and then got tacked onto with a ton of ad-hoc styles that weren't nested where they "belonged." Inconsistent usage of paddings/margins everywhere. It was a mess.

Ah, I see.

At some level, this is unavoidable and just something to get used to. But those longer selectors can be mitigated somewhat with a sane CSS methodology. One of the benefits of CSS is that there are 100 different ways to achieve the same result—and I personally wouldn't trade that for a more opinionated CSS spec.

Reply on news.ycombinator.com