Oddbean new post about login | logout @957492b3 & stands for the parent selector. For example: a { & b {} c & {} } is the same as a {} a b {} c a {}
@0ffd42b0 Thanks! But what about a { b {} } That's the same as a b {} right? That seems counter to your example with c & a as the c is outside the scope but in my example b is inside the scope. Both don't use the &. I'm saying only that not using the & is indeed shorter but leads to inconsistency, which makes the coffee harder to read, especially for novices
@957492b3 almost It’s two rules: a {} a b {} Take a look at the spec. It has some examples that might help. https://drafts.csswg.org/css-nesting/#example-82c7d228
@0ffd42b0 But that's kind of my entire point, if something as basic as simple nesting requires "reading the spec" to get it right, something is wrong. CSS is overly agressive with brevity hacks which causes readability problems and bugs. It's optimizing for writers not readers. Too many times I've stared at CSS thinking I was looking at a REGEX-style expression, it was far too baroque. Easy to fix in this case, just use the & all the time. Will likely prevent a few bugs in the process