Historically, CSS has been a difficult language to work with. CSS preprocessors made it easier to work with CSS and also provided additional features like loops, mixins, and more. Over the years, CSS has gotten more capable and adopted some of the features originally introduced by CSS preprocessors. One such feature is “nested styling”.
Nested styling allows developers to nest CSS rules within one another, reflecting the HTML structure. This results in more organized and readable code, as the relationship between HTML elements and their corresponding styles is visually apparent.
Nested Styling: The Old Way
Nested Styling is a feature available in manyCSS preprocessors like Sass, Stylus, and Less CSS. Although the syntax might differ among these preprocessors, the underlying concept remains consistent. If you wanted to style all theh1elements in adivwith the class name ofcontainer, in regular CSS, you would write:
In a CSS preprocessor like Less CSS, you implement nested styling like this:
The code block above achieves the same results as the regular CSS implementation but makes it easy for any developer reading the code to grasp what is going on. This sense of “hierarchy” was one of the biggest selling points of CSS preprocessors.
The nesting tree can be nested to any depth without limitations, but it’s essential to be cautious, as excessively deep nesting may lead to code verbosity.
Native Nested Styling in CSS
Not all browsers include support for native nested styling. TheCan I use…website can help you check if your target browser supports this feature.
Native nested styling in CSS works similarly to CSS preprocessors, meaning that it is possible to nest any selector inside another. But there is one key difference that you should note. Take a look at the code block below:
In the code block above, the div with the class namecontainerhas a red background color. The styling for theh1element lies in the.containerblock. Thish1element has the color yellow. When you run this code in the browser, you might notice something wrong. The browser correctly applies a red background color to thecontainerdiv, but theh1does not have the appropriate styling.
This is because nested styling work a bit differently in CSS compared to CSS preprocessors like Less. You cannot directly reference an HTML element in a nested tree. To fix this, you need to use an ampersand (&) as illustrated below:
In the code block above,&acts as a reference to the parent selector. Putting the ampersand before theh1element should let the browser know that you are targeting all the childh1elements on thecontainerdiv. When you run the code in the browser, you should see the following:
Since&is the symbol used to reference a parent element, it is quite possible to target an element’s pseudo-classes and pseudo-elements like this:
Nesting Media Queries
Prior to the implementation of CSS nested styling, if you aimed to apply styles conditionally, depending on the browser width, you had to resort to a method like the following:
When the browser renders the page, it determines the color of thepelement based on the browser width. If the browser width exceeds 750px, it uses the color gray; otherwise, it applies the default color (black).
This implementation works fine, but as you’re able to imagine, things can become pretty verbose quickly, especially when you need to apply different styles based on certain rules. It is now possible to nestmedia queriesdirectly in the style block of an element.
This code block does basically the same thing as the previous one, but it comes with the advantage of being easy to understand. By merely looking at the media query and the nesting parent element, you can tell how the browser will apply the appropriate styles when the defined conditions are met.
Styling a Website With CSS Nested Styles
It is time to put everything you have learned so far into practice bybuilding a simple websiteand leveraging the nested styling feature in CSS. Create a folder and name it whatever you want. In that folder, create anindex.htmand astyle.cssfile.
In theindex.htmfile, add the following boilerplate code:
The code block above defines the markup for a mock news website. Next, open thestyle.cssfile and add the following code:
The code block above styles the website entirely with CSS nested styling. The.containerselector acts as the root depth. You can make reference to this selector using the&symbol. When you run the code in the browser, you should see the following:
Do You Still Need a CSS Preprocessor?
With the introduction of nested styles to native CSS, CSS preprocessors might appear to be unnecessary. However, it’s crucial to keep in mind that CSS preprocessors offer more than just nested styling. They provide features like loops, mixins, functions, and more. Ultimately, whether to use a CSS preprocessor or not depends on your specific use case and personal preferences.
