Amelia Wattenberger’s The CSS Cascade


If you’re on a small screen, remind yourself to check it out on a big screen when you have the chance.

Did you know that styles from an active transition beat !important rules, but styles from an active animation do not? I definitely did not.

Or that there are “origins” that are almost like a secret layer of specificity, and are reversed when !important rules are in play? What?!

Oh and speaking of origins, there is discussion (that’s a tweet from Jen about an idea that came from Miriam) about opening them up to having user-authored origin levels. As in, loading Bootstrap at a lower origin level on purpose, and your own styles at a higher origin, so that anything you write wins. I keep going back and forth on it. I love having powerful tools, and this kind of overriding power seems clearly useful, but I don’t like the idea that I can’t look at a selector and know if it’s going to win or not, I need to know information about the origin too, which will be tricky to find out as it’s likely in another file who-knows-where as CSS can be loaded a number of different ways.

Direct Link to ArticlePermalink

The post Amelia Wattenberger’s The CSS Cascade appeared first on CSS-Tricks.

This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.


Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »