Amelia Wattenberger’s The CSS Cascade

Avatar of Chris Coyier
Chris Coyier on

Take your JavaScript to the next level at Frontend Masters.

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 →