How does !important actually work? (It's not what you think!)

Подписаться 4,6 тыс.

Просмотров 7 тыс.

50% 1

CSS !important does more than just increase the important of a style rule, it inverts the CSS cascade! Learn what exactly that means in this week's video
(NOTE: Most of the time I say "rule" in this video, I mean "declaration". "Rule" in CSS includes the selector, declaration is the property/value pair)
Links:
My previous video on cascade layers: • CSS Cascade Layers: An...
Article on Cascade Layers: developer.chro...
Short !important demo: codepen.io/una...
Cascade Layers Explainer: css.oddbird.ne...

Опубликовано:

6 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 17

@ChaiFlyGuy 2 года назад

Learned something new today - thanks! I found it easier to conceptualize the inverted order of precendence via: Normally, here's the order of precedence. Then when you are in "!important"-land, it's flipped.

@zachjensz 2 года назад

Very important video

@KonRud5 2 года назад

In my opinion, those @layers might needlessly overcomplicate understanding of the cascade and overall work with CSS.

@kevinivan91 2 года назад

Didn't understand the @layer thing. Had to look it up to see that it was actual CSS syntax (experimental). Now I kind of get it. Thanks Una!

@theonlyandy 2 года назад

OMG I wrongly assumed user stylesheets always had the highest specificity. Because how else could a user apply preferred link colours? But the answer actually is !important, it seems! When picking “Always set these colours“ in Firefox, this is probably adding an !important to the user styles, which in turn will even overrule !important rules in the author stylesheet. On the other hand, user stylesheets without !important are probably pretty useless.

@Gregorius421 2 года назад

I was also surprised that user stylesheets are not for the use-case that the Stylus/Stylish extensions target. What's their purpose is, idk.

@Gregorius421 2 года назад

Thank you, interesting... Certainly the opposite of what I expected along the lines of common sense. I wonder what's the benefit of doing it this way, for ex. when would an !important user-agent style be more important than the author's !important wish?

@JimRoberts 2 года назад

more importantly this hurts my head.

@josesantoslizcanoolivares2174 2 года назад

kinda difficult to work with css, right?

@xxwaldi 2 года назад

@@josesantoslizcanoolivares2174 not really, just don't use important

@CodeyMcCodeFace 2 года назад

I'm kind of curious about the common issue cascade layers is attempting to solve. Is it minded toward scoping css to components in the way CSS in JS does, or more like low level utilities like open props?

@rishabhanand4270 2 года назад

how do you read it as "important". I almost always read it as "not important" and then my right brain slaps my left brain and corrects it to "super important".

@UnaKravets 2 года назад

Haha that's a good point. It is kind of funky isn't it

@Gregorius421 2 года назад

Should be !!important 🤣