Skip to content

Commit f0eab14

Browse files
tabatkinstabatkins
committed
[css-nesting-1][editorial] Steal most of the Apple blog post to form an Explainer chapter.
1 parent 5409a6d commit f0eab14

File tree

1 file changed

+122
-43
lines changed

1 file changed

+122
-43
lines changed

‎css-nesting-1/Overview.bs

Lines changed: 122 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ TR: https://www.w3.org/TR/css-nesting-1/
1010
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
1111
Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
1212
Abstract: This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.
13+
Default Highlight: css
1314
</pre>
1415

1516
<pre class=link-defaults>
@@ -46,54 +47,132 @@ Values</h3>
4647

4748
This specification does not define any new properties or values.
4849

49-
<h3 id="motivation">
50-
Motivation</h3>
50+
<h2 id="explainer">
51+
Explainer</h2>
5152

52-
The CSS for even moderately complicated web pages
53-
often include lots of duplication
54-
for the purpose of styling related content.
55-
For example, here is a portion of the CSS markup for one version of the [[CSS-COLOR-3]] module:
53+
<em>This section is non-normative.</em>
5654

57-
<div class='example'>
58-
<pre class=lang-css>
59-
table.colortable td {
60-
text-align:center;
61-
}
62-
table.colortable td.c {
63-
text-transform:uppercase;
64-
}
65-
table.colortable td:first-child, table.colortable td:first-child+td {
66-
border:1px solid black;
67-
}
68-
table.colortable th {
69-
text-align:center;
70-
background:black;
71-
color:white;
72-
}
73-
</pre>
74-
</div>
55+
Imagine you have some CSS that you’d like to write in a more compact way.
7556

76-
Nesting allows the grouping of related style rules, like this:
57+
<pre>
58+
.foo {
59+
color: green;
60+
}
61+
.foo .bar {
62+
font-size: 1.4rem;
63+
}
64+
</pre>
7765

78-
<div class='example'>
79-
<pre class=lang-css>
80-
table.colortable {
81-
& td {
82-
text-align:center;
83-
&.c { text-transform:uppercase }
84-
&:first-child, &:first-child + td { border:1px solid black }
85-
}
86-
& th {
87-
text-align:center;
88-
background:black;
89-
color:white;
90-
}
91-
}
92-
</pre>
93-
</div>
66+
With Nesting, you can write such code as:
67+
68+
<pre>
69+
.foo {
70+
color: green;
71+
.bar {
72+
font-size: 1.4rem;
73+
}
74+
}
75+
</pre>
76+
77+
If you’ve been nesting styles in Sass
78+
or other CSS preprocessors,
79+
you will find this very familiar.
80+
81+
You can nest any rules inside of a parent style rule:
82+
83+
<pre>
84+
main {
85+
div { ... }
86+
.bar { ... }
87+
#baz { ...}
88+
:has(p) { ... }
89+
::backdrop { ... }
90+
[lang|="zh"] { ... }
91+
* { ... }
92+
}
93+
</pre>
94+
95+
By default, the child rule's selector
96+
is assumed to connect to the parent rule
97+
by a [=descendant combinator=],
98+
but you can start the nested selector
99+
with any combinator to change that:
100+
101+
<pre>
102+
main {
103+
+ article { ... }
104+
> p { ... }
105+
~ main { ... }
106+
}
107+
</pre>
108+
109+
The new ''&'' selector lets you refer to
110+
the elements matched by the parent selector explictly,
111+
so the previous examples could have been written as:
112+
113+
<pre>
114+
main {
115+
& + article { ... }
116+
& > p { ... }
117+
& ~ main { ... }
118+
}
119+
</pre>
120+
121+
But you can place the ''&'' in other locations
122+
within the nested selector,
123+
to indicate other types of relationships
124+
between the parent and child rule.
125+
For example,
126+
this CSS:
127+
128+
<pre>
129+
ul {
130+
padding-left: 1em;
131+
}
132+
.component ul {
133+
padding-left: 0;
134+
}
135+
</pre>
136+
137+
Can be rewritten using Nesting as:
138+
139+
<pre>
140+
ul {
141+
padding-left: 1em;
142+
.component & {
143+
padding-left: 0;
144+
}
145+
}
146+
</pre>
147+
148+
Again, the ''&'' gives you a way to say
149+
“this is where I want the nested selector to go”.
150+
151+
It’s also handy when you don’t want a space between your selectors.
152+
For example:
153+
154+
<pre>
155+
a {
156+
color: blue;
157+
&:hover {
158+
color: lightblue;
159+
}
160+
}
161+
</pre>
94162

95-
Besides removing duplication,
96-
the grouping of related rules improves the readability and maintainability of the resulting CSS.
163+
Such code yields the same result as <code>a:hover {</code>.
164+
Without the ''&'',
165+
you’d get <code>a :hover {</code>--
166+
notice the space between <code>a</code> and <code>:hover</code>--
167+
which would fail to style your hover link.
168+
169+
You can nest more than one layer deep--
170+
nesting CSS inside already-nested CSS--
171+
in as many levels as you desire.
172+
You can mix Nesting with
173+
Container Queries, Supports Queries, Media Queries, and/or Cascade Layers
174+
however you want.
175+
(Nearly) anything can go inside of anything.
97176

98177
Nesting Style Rules {#nesting}
99178
==============================

0 commit comments

Comments
 (0)