What is nesting?

Category: CSS, design

 

According to this source:

Explain nesting and grouping in CSS - GeeksforGeeks

For instance, if you write a structured CSS module, instead of specifying the separate selectors for every HTML element ie, by using many classes or ID selectors, you can simply specify properties to selectors within other selectors. While nesting the CSS properties, HTML elements form a tree-structured shape. Nesting is a shortcut to create CSS rules for multiple selectors for a specific property. So, instead of rewriting the same set of properties for the different selectors, we can simply nest selectors inside other selectors. For this reason, we are not only reducing the size of the code but also reducing the overall loading time.

Then what should I expect? This concept sounds like similar to 'wrapping' norm just like how we did in reactjs. Like styled-components, this one also requires wrapping up the area I want to apply for it. So, either using styled-components or nesting method, it may be fine in react.js. 

 

Syntax:

class1_selector class2_selector id_selector  {
  property: value;
}

Example:

table tr th {
  background-color: beige;
}

For more examples, see the link above.

 

Also, I found some good thing to note regarding this issue.

https://blog.logrocket.com/native-css-nesting/

Native CSS nesting: What you need to know - LogRocket Blog

You may be familiar with writing CSS this way:

.header {
  background-color: blue;
}

.header p {
  font-size: 16px;
}
.header p span:hover{
  color: green
} 

Consider another way of writing these same styles with CSS nesting:

.header {
  background-color: blue;
  p {
    font-size: 16px;
    span {
      &:hover {
        color: green
      }
    }
  }
}

Did you get the spot? Yes, the second code block is the css nesting I reckon.

Just minimising any repeatitive code - which is the thing to indicate 'css nesting.'.

 

Then why do I use this?

1. Writing more modular and maintainable stylesheets. Rather than having the same selector in multiple places in a stylesheet, you can place all styles related to that selector in one place. This will make development time and debugging time much faster
2. It allows you to nest media queries. With nesting, there’s no need to have a separate media query rule for a selector. You can add this right where you defined the selector

Ah, media query. This explains exactly the way how we use css nesting.