Re: [csswg-drafts] [css-nesting-1] Yet another nesting proposal (Option 5) (#7970)

The CSS Working Group just discussed `[css-nesting-1] Yet another nesting proposal`, and agreed to the following:

* `RESOLVED: call this Option 5 :)`

<details><summary>The full IRC log of that discussion</summary>
&lt;jensimmons> I'd like to begin this discussion by requesting we call this "Option 5".<br>
&lt;fantasai> RESOLVED: call this Option 5 :)<br>
&lt;fantasai> plinss: This is something I've been wanting to do since the 90s, and immediately ran into problem of conflicts when nesting selectors inside a rule that expects properties<br>
&lt;fantasai> plinss: I understand option 3 is trying to find workaround, an doption 4 a different approach<br>
&lt;fantasai> plinss: Wondering what if we turn the problem around entirely<br>
&lt;fantasai> plinss: and introduce a top-level construct that only contains nested rules<br>
&lt;fantasai> plinss: so never mix properties and rules in a single context<br>
&lt;fantasai> plinss: My concern with Option 3 is that even if we have a syntactic way to disambiguous, that does paint us into a corner<br>
&lt;fantasai> plinss: harder to introduce new things in the future<br>
&lt;fantasai> plinss: My proposal is to introduce an @rule, calling @nest<br>
&lt;fantasai> plinss: and inside that block is nothing but nested rules<br>
&lt;fantasai> plinss: Can have no selector for a block, and that applies properties to the top-level selector<br>
&lt;TabAtkins> q+<br>
&lt;fantasai> plinss: No parsing changes, no extra lookahead, no changes to OM, easy to explain, no special bizarre syntax rules, just works<br>
&lt;fantasai> plinss: Downside is you add an extra layer of indenting for properties that apply to top-level rule<br>
&lt;fantasai> plinss: but I don't see that as a problem because I add extra blocks to code all the time, modern tools make this easy<br>
&lt;fantasai> plinss: it's easy to see what happens<br>
&lt;oriol> q+<br>
&lt;fantasai> plinss: I think this is much better than adding cognitive load to authors, learning weird parsing exception rules<br>
&lt;fremy> q?<br>
&lt;Rossen_> ack TabAtkins<br>
&lt;oriol> q-<br>
&lt;fantasai> TabAtkins: As I said in issue, my objection is still that it requires a non-local edit<br>
&lt;fantasai> TabAtkins: Can't just add stuff, need to go back and change the existing rule to allow nesting<br>
&lt;fantasai> TabAtkins: It's a non-trivial bit of work, and is distinct from the way that every preprocessor has tried to do things since they invented nesting<br>
&lt;fantasai> TabAtkins: Also, I continue to think that any statement about complexity of the rules for Option 3 is overstated, it's literally just "does the selector start with an identifier? if so need a prefix"<br>
&lt;fremy> q+<br>
&lt;fantasai> TabAtkins: not that big a deal to learn or work around<br>
&lt;fantasai> TabAtkins: Doing non-local edits to add nested rules to something is also a cognitive load when making edits in place<br>
&lt;fantasai> TabAtkins: I don't like it<br>
&lt;fantasai> TabAtkins: it does have better qualities than some other proposals<br>
&lt;fantasai> TabAtkins: but it's roughly equivalent to just prepending @nest to all rules in terms of overall functionality, just changes where @nest shows up basically<br>
&lt;fantasai> TabAtkins: That's been mildly rejected by authors and WG already, would like to avoid<br>
&lt;fantasai> plinss: On the conflict issue, the point that you're missing is that mixing selectors and properties in one block does constrain us for future expansion<br>
&lt;fantasai> plinss: if we ever want to put [missed] in a property block, we can't do that<br>
&lt;fantasai> plinss: I'm very concerned about contraining our ability to expand CSS later<br>
&lt;fantasai> TabAtkins: I share your concern. Still have some room for expansion, so I'm okay with it. E.g. if your expansion is after property name, can still do that; or if we introduce functional notations, we can still do that<br>
&lt;fantasai> TabAtkins: neither of these would be parsed as a nested rule<br>
&lt;fantasai> TabAtkins: so think there's still enough space for expansion, in my opinion<br>
&lt;ydaniv> s/contraining/constraining/<br>
&lt;fantasai> plinss: Also, you can interleave properties and nested rules, how does that show up in the OM? Will lose that on reserialization<br>
&lt;fantasai> plinss: my proposal avoids because can't do that<br>
&lt;fantasai> TabAtkins: Assigning meaning to ordering seems fraught in first place, but it does mean when reserialize it'll look different from input<br>
&lt;Rossen_> q<br>
&lt;fantasai> plinss: no functional difference, but authors will order things for organizational reasons, and it's a loss to the author if lost on reserializatoin<br>
&lt;astearns> In option 5 you can still interleave, I think `@nest foo { &amp; {} bar {} &amp; {} }`<br>
&lt;fantasai> fremy: I feel like there's a way of serializing this<br>
&lt;fantasai> fremy: I don't agree that if you allow properties after rules it's meaningless<br>
&lt;fantasai> fremy: it's same as selector with &amp; only<br>
&lt;fantasai> fremy: It affects ordering<br>
&lt;fantasai> fremy: If your property defined after a rule doesn't work<br>
&lt;fantasai> fremy: but that's a different topic, but it's something to consider<br>
&lt;plinss> astearns, yes, but the ordering is preserved because they're all style rules<br>
&lt;astearns> ok<br>
&lt;fantasai> fremy: Other than that, I feel like one positive point from plinss's proposal he didn't mention<br>
&lt;fantasai> fremy: Shared with Option 4<br>
&lt;fantasai> fremy: It's ability to copy / paste<br>
&lt;fantasai> fremy: If you nest with Option 3, cannot copy paste without running into problems maybe<br>
&lt;fantasai> fremy: Both this and option 4 have this ability<br>
&lt;fantasai> fremy: I agree that when you change from one rule to nesting, you have t oadd some stuff before/after, but I think it's worth mentioning that for Option 3 that if you go from nesting to not nesting or vice versa<br>
&lt;fantasai> fremy: you need to change things<br>
&lt;fantasai> fremy: refactoring is a pain in both cases, but it's different kind of paint<br>
&lt;fantasai> fremy: but I wanted to mention this important point<br>
&lt;tantek> copypaste++ and and also +1 for adding/removing nesting without having to rewrite the contents as a design principle<br>
&lt;Rossen_> q?<br>
&lt;argyle> q+<br>
&lt;Rossen_> ack fremy<br>
&lt;jensimmons> +q<br>
&lt;fantasai> argyle: I'm confused by the copy/paste scenario? I'm writing CSS using nesting 1, 2, 3,<br>
&lt;fantasai> argyle: I copy paste stuff in and out of socpe, in and out of ..., just use &amp; everywhere<br>
&lt;fantasai> fremy: You decided to use &amp; everywhere, but if you remove nesting it'll break<br>
&lt;Rossen_> ack argyle<br>
&lt;fantasai> argyle: it only breaks with :has()<br>
&lt;fantasai> fremy: that's not what I mean, what I mean is if you have a CSS file with a lot of rules, they can start with any selector<br>
&lt;fantasai> fremy: html or p or whatever<br>
&lt;fantasai> fremy: If you want to take all these rules and nest them, and say they only apply in this div with special ID<br>
&lt;fantasai> fremy: you have to add &amp; to selectors or they will break<br>
&lt;fantasai> fremy: You can't just copy paste them into the brackets<br>
&lt;fantasai> argyle: Concern in general, &amp; makes it better and more clear<br>
&lt;fantasai> fremy: Even if it was required, you would have to add these when you paste into nested context<br>
&lt;fantasai> fremy: When you have a stylesheet with normal selectors, if you want to nest this stylesheet, you have to add &amp; before every selector or it won't work<br>
&lt;fantasai> argyle: I would like to see examples<br>
&lt;fremy> stylesheet was " html { color: red }<br>
&lt;fantasai> Rossen_: Sounds like some conversation paste each other, but 2-3 line example from fremy you will be able to see what he means about usability<br>
&lt;fremy> if you want to nest this in #id<br>
&lt;fremy> "#id { html { color: red } }" is not valid<br>
&lt;fantasai> argyle: I've been using this stuff, it's not just theoretical<br>
&lt;fantasai> argyle: I have 100s of lines of nested lines of CSS, I don't find a portability issue<br>
&lt;fremy> you have to go and edit "#id { &amp; html { color: red } }"<br>
&lt;fantasai> argyle: I don't see what you're talking about<br>
&lt;Rossen_> q?<br>
&lt;fremy> and you have to do that for potentially a lot of selectors<br>
&lt;fantasai> argyle, you're one of 50% of authors who think it's fine to prefix all their style rules everywhere forever with &amp;. The other 50% of authors don't want to do this.<br>
&lt;argyle> i'm in both camps, trying both..<br>
&lt;fantasai> jensimmons: I really like this option, I like this a lot. I like it better than Option 4<br>
&lt;fantasai> jensimmons: what I would hope is that folks who've done a lot of work on this, and advocating to make this reality<br>
&lt;fantasai> jensimmons: I hope that you are honestly willing to consider these other possibilities<br>
&lt;fantasai> jensimmons: what's interesting about this is that it's a deviation from how web developers have thought about nesting from e.g. sass<br>
&lt;fantasai> jensimmons: it is more like writing an @rule and doing stuff inside it, isntead of having the shape from sass<br>
&lt;fantasai> jensimmons: but I don't think we should reject out of hand<br>
&lt;fantasai> jensimmons: there is something elegant of it<br>
&lt;miriam> q+<br>
&lt;fantasai> jensimmons: and I thinkw e ened to think of the full range of ppl who write CSS, from students to hobbyists to professionals that write lots of JS to professionals that do other type of software engineering to professionals that do [msised]<br>
&lt;fantasai> jensimmons: want it to be not breaking<br>
&lt;fantasai> jensimmons: make it easy to understand<br>
&lt;fremy> q?<br>
&lt;fantasai> jensimmons: think this proposal is very elegant and straightforward<br>
&lt;fantasai> miriam: 2 things<br>
&lt;fantasai> miriam: 1. This proposal is very much like @scope, doesn't have scoping aspects but otherwise the shape of it is basically identical to socpe<br>
&lt;fantasai> miriam: I don't know if that's positive or negative, but worth pointing out<br>
&lt;fantasai> miriam: I agree with Jen about who we should think about, but also with Tab about how this seems problematic<br>
&lt;fantasai> miriam: copy/paste is pitched as an advantage, but you're not abile to copy/paste int osomething not @nest, takes a lot of adjustment<br>
&lt;fantasai> miriam: All of these proposals have tradeoffs, and we keep fighting about which tradeoffs, and aruging which are better for authors<br>
&lt;Rossen_> ack jensimmons<br>
&lt;Rossen_> ack miriam<br>
&lt;fantasai> miriam: I think all of theme are hard for authors, but we need to pick one<br>
&lt;fantasai> fremy: I thought we agreed to make a survey and see what ppl think, but we now have another proposal<br>
&lt;fantasai> fremy: but we should probably should do that<br>
&lt;fantasai> Rossen_: Agreed<br>
&lt;fantasai> Rossen_: getting away from topic which is review of this proposal<br>
&lt;fantasai> Rossen_: appreciate plinss for describing the proposal and its pros/cons wrt others<br>
&lt;jensimmons> q+<br>
&lt;fantasai> Rossen_: My hope is that we'll get to next step and at some point will need to close the door on more options<br>
&lt;fantasai> Rossen_: and start scoping down which we will go with, which will work best for authors<br>
&lt;fantasai> Rossen_: with that, I want to move on...<br>
&lt;fantasai> Rossen_: but I want to simply take the conversation down to a closure with next steps being, let's figure out what ppl think about these options in a representative way<br>
&lt;fantasai> Rossen_: and then come back to making some choices<br>
&lt;fantasai> jensimmons: I would really love for us to come to a decision, a final decision, by the end of the year. That might be a little ambitious<br>
&lt;fantasai> jensimmons: I do think we're close.<br>
&lt;fantasai> jensimmons: we could just decide on Option 3 and call it a day, but I think we do want to have a bit more debate about 4 or 5<br>
&lt;fantasai> jensimmons: but I also hear the clock ticking, so would like a decision by early January<br>
&lt;fantasai> Rossen_: Appreciate pressure and urgency, and hope we'll have something end of year or beginning of next<br>
&lt;fantasai> Rossen_: Ok, let's wrap up this conversation. Thanks plinss for bringing this up<br>
&lt;fantasai> Rossen_: one last closing question, do we have a path forward to organize non-biased survey, and who would that be?<br>
&lt;fantasai> Rossen_: jensimmons, can you do that? You seem most non-biased :)<br>
&lt;fantasai> fremy: I think last time miriam, TabAtkins, fantasai and leaverou agreed to help<br>
&lt;fantasai> plinss: I can edit the new proposal into the table<br>
&lt;fantasai> -> https://drafts.csswg.org/css-nesting-1/proposals<br>
&lt;fantasai> ACTION: plinss to update proposals table<br>
&lt;fantasai> ACTION: jensimmons, miriam, leaverou, fantasai, etc. to create survey<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7970#issuecomment-1332528034 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 30 November 2022 17:48:47 UTC