New native nested CSS feature in 2024: An absolute game changer
![New native nested CSS feature in 2024: An absolute game changer](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fnested-css.png&w=3840&q=75)
The new native nested CSS feature changes everything for frontend development and makes SASS & LESS useless.
❌ Before:
How would you style the nested elements in this HTML?
<section>
Hi!
<div>
<p><span>codingbeautydev.com</span> -- coding as a passion</p>
Coding helps you achieve a sense of purpose and growth
</div>
</section>
You'd normally stress yourself and waste a lot of time repeating the outer element names.
No wonder SASS and LESS became so popular.
section {
font-family: Arial;
}
section div {
font-size: 1.5em;
}
section div p {
color: blue;
}
section div p span {
font-weight: bold;
}
✅ But now: with native CSS:
section {
font-family: Arial;
div {
font-size: 1.2em;
p {
color: blue;
span {
font-weight: bold;
}
}
}
}
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2Fimage-25.png&w=3840&q=75)
So much cleaner and easier. All the styles are now encapsulated together instead of being scattered all over the place.
As intuitive as encapsulation in object-oriented programming:
// ❌ redundancy
const personName = 'Tari Ibaba';
const personSite = 'codingbeautydev.com';
const personColor = '🔵blue';
// ✅ encapsulate field
class Person {
name = 'Tari Ibaba';
site = 'codingbeautydev.com';
color = '🔵blue';
}
In some browsers, you'll need to use &
:
section {
font-family: Arial;
& div {
font-size: 1.2em;
& p {
color: blue;
& span {
font-weight: bold;
}
}
}
}
What about classes and IDs?
What if you wanted to style nested elements by their class
or id
attribute?
<section class="class1">
Hi!
<div id="id1">
<p class="class2">
<span id="url">codingbeautydev.com</span> -- coding as a
passion
</p>
Coding is cognitively challenging and mentally stimulating
</div>
</section>
The nested CSS will be quite similar:
.class {
font-family: Arial;
#id1 {
font-size: 1.2em;
class2 {
color: purple;
#url {
font-weight: bold;
}
}
}
}
![](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2024%2F07%2F2024-07-13-22_11_48-Document-and-8-more-pages-Personal-Microsoft%E2%80%8B-Edge.png&w=3840&q=75)
It also works with sibling selectors:
div {
section {
+ p {
color: blue;
~ p {
color: red;
}
}
}
}
Pseudo-classes and elements
Yes:
button {
background-color: blue;
:hover {
background-color: yellow;
}
}
Media queries
Another huge selling point of nested CSS:
❌ Before:
Creating media queries was messy and the query styles and main styles for an element were separated:
.hamburger {
display: none;
}
.header {
font-size: 40px;
}
@media (orientation: landscape) {
.header {
font-size: 32px;
}
@media (max-width: 480px) {
.hamburger {
display: block;
}
.header {
font-size: 24px;
}
}
✅ Now:
It makes more intuitive sense for the element styles to contain query styles -- than for the query styles to contain small segments of the element styles.
Nested CSS lets you do this easily:
.hamburger {
display: none;
@media (max-width: 480px) {
display: block;
}
}
.header {
font-size: 40px;
@media(orientation: landscape) {
font-size: 32px;
}
@media(max-width: 480px) {
font-size: 24px;
}
}
With native nested CSS you can create styles in a more intuitive manner.
SASS is practically useless now -- especially now that we also have native variables in CSS:
$base-font-size: 16px;
$gutter-width: 10px;
.container {
padding: calc($gutter-width * 2); // Use calc with Sass variable
font-size: $base-font-size;
}
.heading {
font-size: calc($base-font-size * 1.5); // Modify base font size with calc
}
See also
- New HTML <dialog> tag: An absolute game changer
- Every amazing new feature in GPT-4 Turbo
- 5 amazing new features in the new Next.js 15
- 5 amazing new JavaScript features in ES15 (2024)
- 95% of users will never use your app again without this JavaScript feature
- Top 10 new JavaScript features from 2021 to 2023