Css style

W3C: CSS Nesting Module for grouping style rules is in progress

The World Wide Web Consortium (W3C) has published the first working draft of a new module for CSS Nesting Modules. At the current stage as a first public work project, it is still not clear whether the consortium will ultimately approve the module and include it in the CSS specifications. Cascading Style Sheets (CSS) have their own working group (CSS Working Group) within the organization, which presented the proposal and is currently developing it.

The motivation for advancing is the previously necessary repetition of style-related content. According to the working group, duplicates make CSS stylesheets confusing and expensive to maintain. The nesting option provided should allow developers to group associated style rules. According to the authors of the Working Draft, this makes style sheets more readable and easier to maintain.

For example, the following CSS markup could also be displayed more compactly:

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

Nesting would group the style rules together and make them clearer:

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

According to the working draft, “nested” style rules behave like normal style rules in that they assign properties to elements using selectors. However, they take the context of the top-level selector (parent rule) and can rely on the parent selector – without unnecessary repetition. The syntax currently has direct nesting and a @nest– Usually planned. A rule marked in this way is only valid in a certain style rule; it loses its validity in other contexts.

With direct nesting, on the other hand, developers write the style rule to be embedded in the parent rule, with the selector for that “nested” rule to be marked as a prefix (nested prefix). In the wording of the Draft, it means: “A nested selector must be the first simple selector in the first composite selector of the selector.” If the selector consists of a list of selectors, each complex selector in the list must be “nested” so that the entire (composite) selector is “nested”. “(§ 2.1 Direct nesting)

It sounds complicated, because the CSS code looks like this for valid nests:

/* & can be used on its own */
.foo {
  color: blue;
  & > .bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo > .bar { color: red; }
*/


/* or in a compound selector,
   refining the parent’s selector */
.foo {
  color: blue;
  &.bar { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.bar { color: red; }
*/

/* multiple selectors in the list must all
   start with & */
.foo, .bar {
  color: blue;
  & + .baz, &.qux { color: red; }
}
/* equivalent to
  .foo, .bar { color: blue; }
  :is(.foo, .bar) + .baz,
  :is(.foo, .bar).qux { color: red; }
*/

/* & can be used multiple times in a single selector */
.foo {
  color: blue;
  & .bar & .baz & .qux { color: red; }
}
/* equivalent to
  .foo { color: blue; }
  .foo .bar .foo .baz .foo .qux { color: red; }
*/

/* Somewhat silly, but can be used all on its own, as well. */
.foo {
  color: blue;
  & { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo { padding: 2ch; }

  // or

  .foo {
    color: blue;
    padding: 2ch;
  }
*/

/* Again, silly, but can even be doubled up. */
.foo {
  color: blue;
  && { padding: 2ch; }
}
/* equivalent to
  .foo { color: blue; }
  .foo.foo { padding: 2ch; }
*/

/* The parent selector can be arbitrarily complicated */
.error, #404 {
  &:hover > .baz { color: red; }
}
/* equivalent to
  :is(.error, #404):hover > .baz { color: red; }
*/

/* As can the nested selector */
.foo {
  &:is(.bar, &.baz) { color: red; }
}
/* equivalent to
  .foo:is(.bar, .foo.baz) { color: red; }
*/

/* Multiple levels of nesting "stack up" the selectors */
figure {
  margin: 0;

  & > figcaption {
    background: hsl(0 0% 0% / 50%);

    & > p {
      font-size: .9rem;
    }
  }
}
/* equivalent to
  figure { margin: 0; }
  figure > figcaption { background: hsl(0 0% 0% / 50%); }
  figure > figcaption > p { font-size: .9rem; }
*/

The two methods, direct nesting and limited nesting with the @nest-Rule, are equivalent in terms of functionality. According to the project, the fact that two rules are necessary is due to the fact that not everything can be directly nested.

The working draft goes into more detail and, in addition to exceptions and case studies, conditional rules and individual selectors, also lists the exact set of rules in the specification into which the intended module is to be incorporated. The official introduction of the nesting module would also affect other specifications which would have to be adapted accordingly. Obviously, the basics for level 4 selectors and a document called CSS 2.1 (Cascading Style Sheets Level 2 Revision 1) should be revised.

Extending extensions is considered tricky, as the changes haven’t been incorporated into the official standard for a long time. Therefore, according to the CSS Working Group, there is some wild growth and development teams are makeshift and rely on so-called snapshot pages that collect currently valid data. In addition, all changes should also be transferred to the CSS 2.2 follow-up document (this refers to the second revised version of the Level 2 Cascading Style Sheets).

If you want to cover it in more detail, you will also find an index with the specified terminology and related references at the end of the working document. The August 31, 2021 project is currently the state of play, but according to the preamble, future versions will replace this state. If you want to stay up to date on the subject, you can post on the appropriate mailing lists at W3C.


(Yeah)

Disclaimer: This article is generated from the feed and not edited by our team.