This content originally appeared on DEV Community and was authored by Akash Shyam
First we had variables and now nesting in css! It seems that the functionality we get pre-processors like Sass and Less are slowly being introduced in CSS. It's similar to what's happening between javascript and typescript. If you have noticed, a few years ago, some of the current javascript features did not exist in javascript but were implemented in typescript.
I'm not saying this is a bad thing, it's actually great! This decreases the need for pre-proccessors which need to be compiled into CSS/Javascript
That being said, selector nesting is still in the future. No browsers support it yet, but I expect this to improve. For more information, checkout the draft.
What Really Is nesting???
To explain this effectlively, I'm going to compare two code samples.
Without Nesting
button.btn {
color: blue;
background: white;
transition: .2s all ease-in;
/* More styles for the button */
}
button.btn:hover {
color: white;
background: blue;
}
button.btn:focus {
/* Add more styles */
}
button.btn-group {
/* Some styles */
}
button.btn-primary {
/* I promise, this is the last. */
}
Now let me show the same code with nesting.
.btn {
color: blue;
background: white;
transition: .2s all ease-in;
&:hover {
color: white;
background: blue;
}
&:focus {
/* Add more styles */
}
&-group {
/* Some styles */
}
&-primary {
/* You get the point right??? */
}
}
Just like in Sass, The & is used to refer to the parent selector(in this case, .btn). That's not all, we can also nest multiple levels deep.
.btn {
color: white;
background: cyan;
&-container {
margin: 10px 20px;
&:hover {
/* Some fancy animation */
}
& .overlay {
/* There should always be an "&" in a nested selectors */
}
}
}
@nest
This is a new at-rule that helps us overcome some of the limitations of nesting using the &. Look at the following code:
.section {
/* etc ... */
}
.section {
/* etc ... */
.blog {
/* We want to reference the blog container which is inside the .section. */
}
}
For this, we can use the @nest rule. This rule shifts the reference of the & to another selector we specify.
.main {
/* etc ... */
.blog {
@nest .section & {
/* The "&" refers to ".section" */
background: red;
}
}
}
Nesting Media Queries
For people who are familiar with Sass, the "normal" code looks like this:
.section {
@media(/* some media query */) {
/* styles... */
}
}
However, this is slightly different. In css, the styles must be enclosed in "&".
@media(/* some media query */) {
& {
/* styles... */
}
}
- Normal code
.table.xyz > th.y > p.abc {
font-size: 1rem;
color: white;
}
.table.xyz > th.y > p.abc-primary {
font-size: 1.4rem;
}
- The Power of nesting ? ? ?
.table.xyz > th.y > p.abc {
font-size: 1rem;
color: white;
&-primary {
font-size: 1.4rem
}
}
Makes code more readable
As soon as you look the code, you can go "Aha, anything between those outer curly braces is related to buttons or .btn! Not my business!"
A gotcha
One thing to keep in mind is that any css which is after nested selectors is flat out ignored. However, any nesting that is followed is completely valid.
.x {
&-y {
/* styles... */
}
a {
/* invalid */
}
&-z {
/* valid */
}
}
That's it guys! Thank you for reading this post. Please give it a like and follow me on dev.to for more content based on HTML & CSS, Javascript, React and NodeJS. To my dear regular readers, I'm sorry about not writing any articles in the past few weeks, I was quite busy. Bye guys ?
This content originally appeared on DEV Community and was authored by Akash Shyam
Akash Shyam | Sciencx (2021-05-02T06:33:40+00:00) Selector Nesting Has Come to CSS ??? !!!. Retrieved from https://www.scien.cx/2021/05/02/selector-nesting-has-come-to-css-%f0%9f%a4%af%f0%9f%a4%af%f0%9f%a4%af/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.