4 ms·

Can anyone give an ELI5 to us curious non-webdevs about why !important seems to be A Thing? (As a sysadmin I'll probably never have a practical need for this,

Can anyone give an ELI5 to us curious non-webdevs about why !important seems to be A Thing? (As a sysadmin I'll probably never have a practical need for this, but it's always fun learning about the various niches in 'tech'.)

kradeelav 5y ago
Not a webdev by profession, but hand-coded a few hobby sites - !important is used as a duct-tape "just do the dang thing" hack if you need to overrule a bunch of the current styling rules and don't want to think too hard about it.
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.
  - adzm 5y ago
    Should have been !!important instead.
    - oblio 5y ago
      Or, in the spirit of Javascript == / ===, !!!
jvalencia 5y ago
A sysadmin analog: When you have $PATH defined globally, but you want to overwrite it for a specific command: >> PATH=/special myscript.sh
randomdata 5y ago
Apparently to force font-size directives when legal requirements are present.

kradeelav 5y ago

Not a webdev by profession, but hand-coded a few hobby sites - !important is used as a duct-tape "just do the dang thing" hack if you need to overrule a bunch of the current styling rules and don't want to think too hard about it.

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.
- adzm 5y ago
  Should have been !!important instead.
  - oblio 5y ago
    Or, in the spirit of Javascript == / ===, !!!

jvalencia 5y ago

A sysadmin analog: When you have $PATH defined globally, but you want to overwrite it for a specific command: >> PATH=/special myscript.sh

randomdata 5y ago

Apparently to force font-size directives when legal requirements are present.