Astro JS - CSS Cascading Order

Quiz

What is CSS Cascading Order?

Cascading order is a set of rules to evaluate multiple sources of CSS. For example, if you import multiple CSS files or use inline styles, the cascading order determines which styles will be applied to the elements. When conflicting CSS rules apply to the same element, browsers first use specificity and then order of appearance to determine which value to show. Learn what is CSS Specificity.

In Astro, CSS rules are evaluated in this order of appearance:

CSS of <link> tags (lowest precedence)
The imported styles
The scoped styles using <style> tag (highest precedence)

The Astro's cascading preference does not works over CSS specificity. That is, using scoped styles does not increase the specificity of your CSS, but they will take precedence over other styles of the same specificity.

CSS Cascading Example

In the code below, we have two CSS rules for the h1 element. The first rule sets the color to black, and the second rule sets the color to red. Since the second rule is more specific (body > h1), the h1 element will be red.

<style>
    h1 { color: black }
    body > h1 {
        color: red
    }
</style>
<body>
    <h1>
        This header will be red!
    </h1>
</body>

Output

In the output, you can see that the h1 element is red because the second rule is more specific.

Scoped Styles

Scoped styles are the styles that are applied to a specific component using <style> tag inside the component. As discussed above, the scoped styles have higher preference in Astro framework. For example if you import a stylesheet with the same CSS rule as a scoped style, the scoped style will take precedence. Let's see an example.

Example

To understand scoped styles, first we will create a component with scoped style and imported CSS, then we will see which style will be applied.

/* src/components/make-it-blue.css */

h1 {
    color: blue;
}

Now, we will create a Astro component with scoped style and imported CSS.

---
import "./make-it-blue.css"
---
<style>
    h1 { 
        color: green
    }
</style>
<div>
    <h1>
        This header will be green!
    </h1>
</div>

The output h1 tag will in green color. Because the scoped style has higher precedence than the imported CSS. Now, we will increase specificity of imported CSS and see the difference in output.

/* src/components/make-it-blue.css */

div > h1 {
    color: blue;
}

Now, the output h1 tag will be blue color. Because the imported CSS has higher specificity than the scoped style.

The Import Order Rule

When importing multiple stylesheets in an Astro component, the CSS rules are evaluated in the order that they are imported. A higher specificity will always determine which styles to show, no matter when the CSS is evaluated. But, when conflicting styles have the same specificity, the last one imported will be applied.

Example

In the code below, we have two CSS files that set the color of the h1 element to blue and red.

/* src/components/make-it-blue.css */
div > h1 {
    color: blue;
}

/* src/components/make-it-red.css */
div > h1 {
    color: red;
}

Now, we have imported blue file first and then red file. So, the output h1 tag will be red color.

---
import "./make-it-blue.css"
import "./make-it-red.css"
---
<div>
    <h1>
     This header will be red!
    </h1>
</div>

Print Page