Skip to content

Commit c4ffc27

Browse files
committed
[css-nesting] Proposal summary: Fix formatting
1 parent cc76f78 commit c4ffc27

File tree

1 file changed

+42
-44
lines changed

1 file changed

+42
-44
lines changed

css-nesting-1/proposals.md

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ To organize the discussion a bit, the options we're looking at are:
1010
2. [(link)](https://github.com/w3c/csswg-drafts/issues/7834#issuecomment-1268979633) The above, plus any style rule starting with an `&`. (Rules following the switch can start with whatever.)
1111
3. [(link)](https://github.com/w3c/csswg-drafts/issues/7834#issuecomment-1270665794) The above, plus any style rule starting with a non-ident. (So `.foo`, `:hover`, etc will trigger the switch, but `div` won't.) (Rules following the switch can start with whatever.)
1212
3. [Lea's proposal](https://github.com/w3c/csswg-drafts/issues/7834#issuecomment-1272373216) - No parsing switch, instead every nested rule has to be unambiguous on its own, by starting with anything but an ident. (You can write `& div` or `:is(div)` if you need to start a selector with a type selector.) (This employs the same parsing strat as (2.3) to avoid accidentally parsing invalid properties like `//color: red;` as rules.)
13+
4. [Post-nesting proposal](https://github.com/w3c/csswg-drafts/issues/7834#issuecomment-1276360012) - Block after main rule containing nested rules, no `&` needed in nested selectors except for disambiguation
1314

1415
------
1516

@@ -22,69 +23,66 @@ Arguments for each of the above options:
2223
<tr>
2324
<th>(1)
2425
<td>
25-
<ul>
26-
<li>Every rule is valid or invalid "locally", no need to track context.
27-
<li><code>&</code> or <code>@nest</code> is visually distinct from properties.
28-
<li><code>@nest</code>, if used only when needed, signals "odd" nesting. (But might be used anywhere.)
29-
<li>Theoretically can mix properties and rules in any order, tho we won't retain their relative order in the data model. (All properties will be treated as preceding all rules.) (Currently the spec disallows this, to avoid confusion.)
30-
</ul>
26+
27+
- Every rule is valid or invalid "locally", no need to track context.
28+
- `&` or `@nest` is visually distinct from properties.
29+
- `@nest`, if used only when needed, signals "odd" nesting. (But might be used anywhere.)
30+
- Theoretically can mix properties and rules in any order, tho we won't retain their relative order in the data model. (All properties will be treated as preceding all rules.) (Currently the spec disallows this, to avoid confusion.)
31+
3132
<td>
32-
<ul>
33-
<li>Syntax is different from other nesting contexts (like <code>@scope</code>, or global <code>@media</code>), so you can't copy from <code>@scope</code>/etc to nesting. (It might be safe to copy from nesting to <code>@scope</code>/etc, if we explicitly allow <code>&</code> and <code>@nest</code> globally; see <a href="https://github.com/w3c/csswg-drafts/issues/5745">#5745</a>.)
34-
<li>Requiring each selector in a list to be modified with & is error-prone (easy to forget) and is complicated to convert manually or automatically
35-
<li>More verbose than Sass/etc-style, which many authors are used to. (And is arguably just a good design.)
36-
</ul>
33+
34+
- Syntax is different from other nesting contexts (like `@scope`, or global `@media`), so you can't copy from `@scope`/etc to nesting. (It might be safe to copy from nesting to `@scope`/etc, if we explicitly allow `&` and `@nest` globally; see <a href="https://github.com/w3c/csswg-drafts/issues/5745">#5745</a>.)
35+
- Requiring each selector in a list to be modified with & is error-prone (easy to forget) and is complicated to convert manually or automatically
36+
- More verbose than Sass/etc-style, which many authors are used to. (And is arguably just a good design.)
3737

3838
<tr>
3939
<th>(2.1)
4040
<td>
41-
<ul>
42-
<li>After the switch, syntax is the same as other nesting contexts.
43-
<li>Syntax is same as Sass/etc-style, which many authors are used to. (And is arguably just a good design.)
44-
</ul>
41+
42+
- After the switch, syntax is the same as other nesting contexts.
43+
- Syntax is same as Sass/etc-style, which many authors are used to. (And is arguably just a good design.)
44+
4545
<td>
46-
<ul>
47-
<li>The <code>@nest;</code> no-op rule is weird and requiring it everywhere is very noisy.
48-
<li>Can't *quite* naively move code between nested contexts; need to make sure the switch is there (or add it) when moving *to* plain nesting. (But moving to other contexts is always safe, even if you copy over the <code>@nest;</code> too.)
49-
<li>Can't mix properties and rules - all properties have to come first. (But this matches the data model anyway.)
50-
</ul>
46+
47+
- The `@nest;` no-op rule is weird and requiring it everywhere is very noisy.
48+
- Can't *quite* naively move code between nested contexts; need to make sure the switch is there (or add it) when moving *to* plain nesting. (But moving to other contexts is always safe, even if you copy over the `@nest;` too.)
49+
- Can't mix properties and rules - all properties have to come first. (But this matches the data model anyway.)
5150

5251
<tr>
5352
<th>(2.2)
5453
<td>
55-
<ul>
56-
<li>Same as (2.1), but you can avoid using <code>@nest;</code> most of the time if you instead start your first rule with <code>&</code>.
57-
</ul>
54+
55+
- Same as (2.1), but you can avoid using `@nest;` most of the time if you instead start your first rule with `&`.
56+
57+
5858
<td>
59-
<ul>
60-
<li>Need to pay somewhat more attention to context, and make sure your first rule is written correctly - either preceded by an at-rule, or starting with <code>&</code>.
61-
</ul>
59+
60+
- Need to pay somewhat more attention to context, and make sure your first rule is written correctly - either preceded by an at-rule, or starting with `&`.
6261

6362
<tr>
6463
<th>(2.3)
6564
<td>
66-
<ul>
67-
<li>Same as (2.2), but you can avoid using <code>@nest;</code> in even more cases: unless your first selector starts with a type selector, you can just nest naively.
68-
</ul>
65+
66+
- Same as (2.2), but you can avoid using `@nest;` in even more cases: unless your first selector starts with a type selector, you can just nest naively.
67+
6968
<td>
70-
<ul>
71-
<li>Still somewhat context-sensitive, just less so than (2.2).
72-
<li>Prevents us from ever changing property syntax to start with an ascii glyph. (Like <code>+transform:...;</code> for additive properties?) (But these are probably already ruled out anyway, due to people using garbage to "comment out" their properties, like <code>//color: red;</code>, or <code>*color:red;</code> for an old IE hack.)
73-
</ul>
69+
70+
- Still somewhat context-sensitive, just less so than (2.2).
71+
- Prevents us from ever changing property syntax to start with an ascii glyph. (Like `+transform:...;` for additive properties?) (But these are probably already ruled out anyway, due to people using garbage to "comment out" their properties, like `//color: red;`, or `*color:red;` for an old IE hack.)
7472

7573
<tr>
7674
<th>(3)
7775
<td>
78-
<ul>
79-
<li>Like (1), every rule is valid or invalid "locally", no need to track context.
80-
<li>Like the (2.X) set, can *mostly* transfer rules between nested contexts. Going *from* nested to <code>@scope</code>/etc is always valid; going from <code>@scope</code>/etc *to* nested is *usually* valid, unless the rule starts with a type selector.
81-
<li>Like the (2.X) set, syntax is same as Sass/etc-style except for selectors starting with a type selector.
82-
<li>Like (1), can theoretically mix properties and rules again, but the data model will still have to act as if all properties as coming first.
83-
<li>No <code>@nest</code> rule needed
84-
</ul>
76+
77+
- Like (1), every rule is valid or invalid "locally", no need to track context.
78+
- Like the (2.X) set, can *mostly* transfer rules between nested contexts. Going *from* nested to `@scope`/etc is always valid; going from `@scope`/etc *to* nested is *usually* valid, unless the rule starts with a type selector.
79+
- Like the (2.X) set, syntax is same as Sass/etc-style except for selectors starting with a type selector.
80+
- Like (1), can theoretically mix properties and rules again, but the data model will still have to act as if all properties as coming first.
81+
- No `@nest` rule needed
82+
8583
<td>
86-
<ul>
87-
<li>Rules are invalid if they start with a type selector, requiring them to be rephrased somehow. (Using `:is(div)`, starting with <code>&</code>, etc.)
88-
<li>Like (2.3), prevents us from changing property syntax to start with an ascii glyph in the future. (But similarly, this is probably already lost to us.)
89-
</ul>
84+
85+
- Rules are invalid if they start with a type selector, requiring them to be rephrased somehow. (Using `:is(div)`, starting with `&`, etc.)
86+
- Like (2.3), prevents us from changing property syntax to start with an ascii glyph in the future. (But similarly, this is probably already lost to us.)
87+
9088
</table>

0 commit comments

Comments
 (0)