Hacker News Reader

Comment by LAC-Tech | Hacker News Reader

Whenever I see nested CSS, I always think the non-nested version is cleaner.

Then again, I'm lucky enough to often work with my own 'hand-crafted', semantic html, and not some div soup generated by a tool.

View on HN

I generally agree and wince at anything deeply nested, but there's no question that the biggest benefit here by far will be pseudoclasses. Especially when you wanna do something to children elements based on a pseudoclass

  .page form
    border: 2px solid #223;
    border-radius: 0.15rem;

    & button {
      background-color: red;
      transition: background-color 0.15s ease;
    }

    &:hover button {
      background-color: blue;
    }
  }

seems way cleaner, easier to read, and more maintainable than the alternative which I don't even wanna type out

Yeah I agree. Most of my CSS files end up feeling like a big, append-only list of selectors for seemingly random stuff. Its so hard to tell if there are selectors in there that are no longer in use.

I really like the look of nested selectors for this reason - because I can group my selectors by component.

You could always use tailwind - the problem of CSS classes no longer in use is the exact use case for it.

Am I missing something… isn’t it just a simple substitution?

    .page form {
      border: 2px solid #223;
      border-radius: 0.15rem;
    }

    .page form button {
      background-color: red;
      transition: background-color 0.15s ease;
    }

    .page form:hover button {
      background-color: blue;
    }

Yes it's terrible. Not just that you have to type ".page form" 3 times, but that you don't have a convenient way to group together these bits of style that clearly are meant to go together

Imagine those three rules in a 200 line CSS file.

That’s the point. Why should we be doing the trivial substitution if tools can do that for us!?

You are forgetting that it will also make files smaller. I tested here, and it reduced from 172b to 160b, on minified versions. Bigger files will have a bigger reduction on file size.

Any way to turn the second use of `button` into a second level of nesting there?

E: or would you have to use `>` somehow?

Reply on news.ycombinator.com