• Nesting Has Come to CSS
• Akash Shyam
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: jaredliw
• Proofread by: KimYangOfCat, Nia3y

CSS selector nesting has come 🤯🤯🤯!

CSS used to have variables, but now it supports nesting! It seems that features in preprocessors like Sass and Less are slowly being introduced into CSS. This is a bit like what happens between JavaScript and TypeScript. If you’ve noticed, some of the current JavaScript features didn’t exist a few years ago, but they are implemented in TypeScript.

I’m not saying it’s a bad thing, it’s actually great! This reduces the need for CSS/JavaScript preprocessors.

Having said that, selector nesting is still only in the future. No browser currently supports it, but I hope that will improve. For more information, see the draft of the CSS Working Group.

What exactly is nesting?

To illustrate this effectively, I’ll compare two code examples.

No nested:

button.btn {
  color: blue;
  background: white;
  transition:.2s all ease-in;
  /* More on button styles. * /
}

button.btn:hover {
  color: white;
  background: blue;
}

button.btn:focus {
   /* Add more style. * /
}

button.btn-group {
  /* Some styles. * / 
}

button.btn-primary {
  /* This is the last one, I promise. * / 
}
Copy the code

Now let me show the same nested code as above:

.btn {
  color: blue;
  background: white;
  transition:.2s all ease-in;

  &:hover {
    color: white;
    background: blue;
  }

  &:focus {
   /* Add more style. * /
  }

  &-group {
    /* Some styles. * / 
  }

  &-primary {
    You know what I'm talking about, don't you? * /}}Copy the code

As in Sass, & is used to refer to the parent selector (in this case.btn). Not only that, it also supports multiple layers of nesting.

.btn {
  color: white;
  background: cyan;

  &-container {
    margin: 10px 20px;

    &:hover {
      /* Some fancy animations. * / 
    }

    & .overlay {
       /* Nested selectors always have an ampersand. * /}}}Copy the code

@nest

This is a new at-rule that helps us overcome some of the limitations of using & nesting. Look at the following code:

.section {
    / * etc... * /
}

.section {
    / * etc... * /

    .blog {
        /* We want to reference the blog container in.section. * /}}Copy the code

To do this, we can use the @nest rule. This rule transfers a reference to & to another selector we specify.

.main {
    / * etc... * /

    .blog {
        @nest .section & {
            /* "&" refers to.blog */
            background: red; }}}Copy the code

Nested media queries

For those familiar with Sass, “normal” code looks like this:

.section {
  @media(/* Some media queries */) {/ * style... * /}}Copy the code

However, this is slightly different in CSS. In CSS, styles must be surrounded by ampersands.

  @media(/* Some media queries */) {& {/ * style... * /}}Copy the code

• General case code

.table.xyz > th.y > p.abc {
  font-size: 1rem;
  color: white;
}

.table.xyz > th.y > p.abc-primary {
  font-size: 1.4 rem;
}
Copy the code

• The power of nesting 💪💪💪

.table.xyz > th.y > p.abc {
  font-size: 1rem;
  color: white;

  &-primary {
    font-size: 1.4 rem; }}Copy the code

Improve code readability

When you look at the code, you say, “Aha, anything between these curly braces has to do with buttons or.btn! None of my business!”

A trap

One thing to keep in mind is that any CSS styles after nested selectors are completely ignored. However, any nesting after it is completely valid.

.x {
  &-y {
    / * style... * /
  }

  a {
    / * * / invalid
  }

  &-z {
    / * * / effectively}}Copy the code

That’s all, everybody! Thank you for reading this article.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.