3 ms·
CSS stands for Cascading Style Sheets. The cascading part refers to the fact that when you have a HTML element which is targeted by multiple style rules (e.g. b
by cxcorp 5y ago
CSS stands for Cascading Style Sheets. The cascading part refers to the fact that when you have a HTML element which is targeted by multiple style rules (e.g. browser defaults, style sheets, inline `style=""` attributes, inherited from a parent element's rules, etc.), there's a well defined priority order which decides which style "wins" and is in effect.
For example, you might define that all body text is black, but then also have a rule that says that if it's a link (an `<a>` element), it's blue. Suppose you want other links to be blue, but the links in your navigation bar should also be black. Can do, just specify `nav a { color: black }` - now rest of the links are blue, except inside your navbar.
This is neat, because with relatively concise notation, you can specify styles for the majority of your site, but can also easily specialize styles when you need to. Compare that to manually setting `style=""` attributes on every single HTML element!
So what's the problem with !important then? !important is #1 in the priority order I mentioned previously, so when you add !important to a CSS declaration, you throw out the first C from CSS. You're saying "I don't care what any other stylesheet or style rule says - ignore them and use this rule". To beat !important, you need to also add !important, and additionally make your CSS rule more "specific" than the other, e.g. `nav a { color: black }` beats `a { color: black }` because it's more specific - "target <a> inside a <nav>".
This becomes very problematic if e.g. a third party component uses !important in its rules. Let's say that third party component's stylesheet overrides all <a> elements to be red. Great! Every single link is now red - including the ones in your navbar. You'll now need to go back to your own rules and add !important there - meaning now you need to use !important in every single declaration to get the C back into CSS.
- throw0101a 5y ago> !important is #1 in the priority order I mentioned previously, so when you add !important to a CSS declaration, you throw out the first C from CSS. So the exclamation mark basically takes on its 'linguistic meaning' that this particular definition should be given extra emphasis. I was interpreting the "!" in this conversation as it is often used in tech, as a "not-" prefix. :) Thanks.