CSS's !important was added because of laws about font size for some text | Hacker News Reader

CSS's !important was added because of laws about font size for some text

twitter.com

489 pointsmmastrac330 comments

Engineering is doing what you can with what you've actually got. If what you've actually got is an inherited tremendous ball of spaghetti css, a need to change just one thing on the page, and scant prospects for future changes in the area, then it may be good engineering to use "!important" to make your change over a more complex solution. This is in fact the situation I find myself in at work somewhat often, although luckily I can't recall the last time I had to use "!important". But I wouldn't issue a blanket disendorsement of it.

Technical debt in CSS seems to be both more inevitable and less problematic than application code. By the time it becomes a problem, either marketing decides on a redesign or the latest frontend lead wants to use a new framework.

So “screw it, this works” seems to be an entirely justifiable methodology.

In my career, I've gone from Waterfall, to XP, to Agile/Scrum methodologies.I've also spent some time doing V-Model. Personally, I'm looking forward to the switch to the "Screw It, This Works"™ methodology. Looking forward to the Addison-Wesley book series!

Edit: I've just founded the "Screw It, This Works"™ Alliance. Sign up today to become a certified SITW Master.

we call that “fuck it, ship it”

I like the saying that software isn't released, it's allowed to escape.

or exceptionally better "Fuck it, we'll do it live"

I've seen the "it mostly works, ship it and we'll fix it later" approach used. The second part usually doesn't happen of course

> fuck it, ship it

This is a sub-domain of Fuck Users, Ship Excrement, or FUSE-Dev.

Followed by "The Production environment is just Big Test"

Brand it FISIcal Project Management.

> "Screw It, This Works"™ Alliance.

Where is the conference and the website to download a frameable printable "Certified SITW Master" certificate?

The way you earn the certificate is by making it yourself in MS Paint, from one of your other certs and a screenshot of the logo you take from the website.

It's all fun and games until you drop a decimal and end up in some real trouble fast.

And in 10 years, there would be daily team screwing sessions...

If you use "Helps" instead of "Works" (Screw It, This Helps)

Then you can have the SITH Alliance and give out SITH master certifications.

It's way better than "Screw it, it probably doesn't work, but we have new projects to work on."

Or my personal favourite: "Screw it, this works, but I'm bored so I'm going to add 3rd party libraries to it until it doesn't work".

When do we get to write a manifesto?

you are looking at it

I'm a fan of the TFTGAF (too fried to give a fuck) Coding Methodology... Everything else is an anxiety disorder.

> So “screw it, this works” seems to be an entirely justifiable methodology.

I've become more aware over the years that some developers, especially very senior ones, are under the fatally mistaken assumption that the problems start when the complaining starts, when it's closer to the truth to say that the real problems start when the complaining ends.

There can be bad developers on any team of course, but there are many developers who know or suspect what they are considering doing is wrong, and discover that asking someone about it is far more trouble than its worth. They either get yelled at or saddled with a bunch of homework because they've drawn attention to a can of worms and are being deputized to fix four things instead of the one they knew about.

Every project has problems. Even the ones that are making millionaires out of relatively new team members. If you aren't hearing about those problems, that's entirely, 100% your fault.

> when it's closer to the truth to say that the real problems start when the complaining ends

Oh, no, when the complaining ends, the problems didn't just start, they reached the magnitude where they are unsolvable long enough ago that no one even harbors any glimmer of hope of fixing or even meaningfully mitigating them.

... yeah... that's a whole row of ice cream flavors of its own. There's depressed despair, betrayed despair (chocolate and vanilla), cold disdain (mint) and red-hots (if I think about this I will get so angry that I will do something career limiting, so I cannot think about it anymore).

I'm still trying to work out how I communicate to someone that the things I have stopped mentioning might still be bothering me, and so fixing the two things I'm actually harping on won't magically make me happy. Maybe that's just something people are supposed to work out for themselves. Mostly I seem to have figured out how to do this when three or more people are involved (basically hand all of my fodder to someone who is still engaged, and let them run with it), but not when it's one on one. Conversations with people who can't 'look at things' can be exhausting, and that seems to hold no matter which party you are.

> real problems start when the complaining ends

I really like this quote, and I'm gonna reuse it in a slightly rewritten fashion. In SE teams, indeed, the amount of complacency is directly related to the amount of increasing technical debt.

Not all problems have to be solved before they become an issue though.

Its often a pointless effort, especially if the problem boils down to "this architecture isn't pure enough"

> They either get yelled at or saddled with a bunch of homework because they've drawn attention to a can of worms and are being deputized to fix four things instead of the one they knew about.

There is a gradient I've seen with IT workers in general, that is doing IT as a passion and doing IT for a job. Disciplining someone for not knowing enough though is a bit much.

> real problems start when the complaining ends

By this point no one cares anymore and the technical debt is beyond fixing.

> Technical debt in CSS seems to be both more inevitable and less problematic than application code

Nicely put. I've stressed over finding unused rules, restructuring, etc. but in the end it never matters as long as it displays correctly.

The big problem is knowing all the places which could be displaying incorrectly when you make a change. This is a fundamental design issue with the cascade: unbounded silent failure because rule activation is implicit.

In addition, there is the difficulty of inspecting those sites which you can identify to verify that display is correct, which is hard to achieve programmatically.

It's not inevitable. I love Svelte partly because it solves the problem by compartmentalizing CSS to the UI component I'm working on. It feels natural that if I write CSS in a file for a component it shouldn't be seen by other components in general.

Even without Svelte, most of the problems people have with CSS go away if you do the following:

- Avoid cascading (i.e. no nested selectors except when there's "no other way")

- Implement separate selectors for styling and page/component layout (separation of concerns)

- Using a good naming convention and stick with it

The first point can also be achieved with using style attributes if that floats your boat, although Svelte kind of gives you the best of both worlds just by compartmentalizing the CSS, not necessarily by preventing cascading.

I can't remember the last time I ever had to use !important except when I had to work with some ridiculous CSS "framework" my predecessors chose to use. At least !important was understandable back in the days when it was really hard to achieve some things with CSS, but these days I believe there's little to no excuse.

Mind telling a bit more on this second part "Implement separate selectors for styling and page/component layout (separation of concerns)"? Are you referring to classes (for styles) and probably id's for Javascript?

I believe that Svelte is so natural extension to the current web that - just like with CoffeeScript and ES6 - some of it should be adopted.

Importing HTML files as modules with localized CSS+JS as web components would be one such option for example.

> I can't remember the last time I ever had to use !important except when I had to work with some ridiculous CSS "framework" my predecessors chose to use. At least !important was understandable back in the days when it was really hard to achieve some things with CSS, but these days I believe there's little to no excuse.

Yep. I find of the usage of !important I see daily is failure of the programmer to understand precedence rules, which, as you pointed towards, is mostly due to cascading.

Points 1 and 2 sound a bit like CSS's new "layer" feature

On the other hand, I find Svelte's handling of this half-baked, as there's no way to pass scoped classes to a component, only to a HTML element. [1] In fact, I find this so frustrating that I have actually given up on Svelte's CSS scoping entirely and I use Tailwind instead, which also solves the same problem by almost [2] completely disregarding the cascade altogether.

[1] Why would you want to do this? Well, what about layout? And what if you have a component that wraps or otherwise behaves like an HTML element?

[2] Of course Tailwind supports modifiers, which do cascade, but everything is still local to a single element.

One of the questions for passing scoped classes to a component is why you want to do it. If you have complex selectors, it would effect the implementation of the component, so I think that would be an anti-pattern. Just modifying the root would be great, but in Svelte I believe one component can translate to multiple root nodes, so all of them would need to get the styles, which again would increase the coupling between the component usage and implementation. I think there's just no clean way to do what you want.

Over a lengthy career writing code, I feel like I've gotten pretty good at writing clean, maintainable, legible, changeable code. Especially in the languages I have the most experience in.

I don't feel like I have any idea how to write maintainable legible changeable CSS. Like, it's not just that I can't afford the time -- I just don't know how to do it, despite all my efforts the CSS becomes monstrous, always.

This is why, as someone who loves writing CSS and thinks they're reasonably good at it, I've come to the conclusion that writing CSS is an anti pattern, and if you want teams to quickly build interfaces with a maintainable "frontend styling layer", it should prevent the ability to write css.

I've come to the conclusion that writing CSS is an anti pattern

I don't think this is true. The biggest problem is people who write CSS do it as if they want CSS to be something else and are trying to force it to be that.

Writing CSS using ITCSS (Inverted Triangle CSS) [1] solves so many of the issues devs complain about it. It's simple: create layers in specificity order. Don't fight the cascade; make it work for you.

Writing good CSS isn't about getting the syntax right; it's about getting the architecture right [2].

Harry Robert's video does a great job of describing all the pain points ITCSS solves [3].

[1]: https://dev.to/carlillo/understanding-itcss-real-case-using-...

[2]: https://www.xfive.co/blog/itcss-scalable-maintainable-css-ar...

[3]: https://www.youtube.com/watch?v=1OKZOV-iLj4

I think the problem is that just not that many people know how to write good css and good JavaScript. So I try and just require them to only know JS.

I think it’s hard to hire lots (…hundreds) of developers who’s going to know CSS well enough to not screw it up.

What would you recommend instead of CSS?

It must be CSS in the end, but you should create/use a component library, that has the right set of primitives (and less-primitives) that lets end feature developers create the UIs without having to resort to manually write CSS.

THis is made significantly easier when you have designers working with this "design library" mindset also.

tables

Tailwind

I think utility-first frameworks like Tailwind are becoming popular because they allow frontend teams to say "screw it" without descending into total anarchy.

Eh, the successors of those current teams will still curse them and throw it all out when it comes time for a big revision.

Yeah, code written by the people before you is always bad

That’s fine for your brochureware whatever. Not fine for a line-of-business application meant to be useful for the next decade or more.

I used to work with 3 versions of a whole css system co-existed. To unfuck css debt is like to do surgery, make it done quick or you have vein spaghetti bleeding .. while is also running service.

OOCSS leads you to technical debt. The bigger you become, the easy you land into techdebt.

OO leads to technical debt in most cases. You can limit it to a narrow scope (interfaces), or you can have objects that wont move or inherit much (bascially if the parents can be replaced by traits), but someday someone will try to be clever and your team will soon enter OO hell. Bonus hell points if you allow third-party plugin in your software (shoutout to Jenkins!).

One place where I end up using !important very frequently is writing user-styles/extensions for websites. Obviously not a common use case, but it makes me glad that CSS has `!important`.

If you're explicitly trying to overwrite another rule that you do not control, `!important` is more idiomatic than the alternative. (If you've lucky enough to have never had to do this, the alternative is adding otherwise pointless qualifiers to your selector, since CSS gives higher priority to "more specific" selectors. e.g `html > body > div {...}` takes precedence over `div {}`)

You can make the qualifiers less silly looking by matching the qualifier you're trying to override exactly. This makes it more obvious what exactly it is that you are overriding, and has the added benefit of only applying in that one place.

If you explicitly want to change one element in every place, though, !important comes in handy.

Right, the flaw in this argument: > Anything else is probably misuse, and a sign you may not understand the cascade properly.

is that it assumes the cost of changing the "whole cascade" is minimal. And that it would be easy to design an initial cascade which works perfectly for your needs without any changes needed as the design evolves. In other words it assumes the classical waterfall method where the spec and design are complete and never-changing once the "implementation" phase begins.

The suggestion is that there is nothing wrong with CSS, only in developers who can not come up with a perfect CSS-design before they start coding.

A big problem with CSS in my view is precisely its cascading nature. When you change anything anywhere it can break things in many other places, and there is no good tool as far as I know that would tell you what all can change because of any given change in a single CSS-rule. It is assumed that developers should have such a tool in their brain, and if you don't you are not a worthy developer. :-)

Having a good justification for misuse doesn't make it not misuse. And bad tooling and hard-to-understand CSS design might be reasonable excuses to not understand cascades, but the point is valid -- even more valid.

> Having a good justification for misuse doesn't make it not misuse.

If there is a good justification for misuse, that would logically mean the original intent isn't applicable to real world scenarios -- which doesn't make the intent incorrect, but it does betray short-sightedness. To claim misuse strictly because it's outside of that extremely narrow original vision, is completely disregarding the actual logistics of front-end development.

It's a bold claim to say that "anything else is misuse". To prove a claim like that you would have to show how every possible use of !important is "misuse", except when it is for font-size problems. Now maybe it is possible to show that every conceivable other use is misuse, but until we see such a proof we shouldn't just take for granted just because somebody makes such a claim.

A better claim would be "I don't see any good reason to use it". Just because one person doesn't see any good reason to use it doesn't mean there isn't one, or two, or three, or more.

It is always very hard to prove a negative ("There isn't any such that ...")

That's not what it means at all. It just means you find it easier to work outside of the spec's design. He's very clearly saying that if you are doing that, it's always possible to avoid it and work within the intent of the spec instead. If you're happier working outside of that, good for you. The "logistics" of you needing to get your work done has no bearing on what the designers of the tools you're using intended.

The cascade is awesome! See my post further up: https://news.ycombinator.com/item?id=30761462

While I agree with your statement overall, most of the time, using !important just kicks the problematic spaghetti-code can down the road. The CSS eventually becomes un-workable/maintainable.

At one place I worked (a subsidiary of NTT), the effort to clean up the CSS and remove all the !important overrides was so time consuming management wanted to make sure it never happened again, so using !important at all would affect our performance reviews. We were expected to fix any bad CSS right away without overriding the default cascading rules.

"The CSS eventually becomes un-workable/maintainable..."

True that, but sometimes one has already reached that point, and yet must make this change anyway somehow. But I don't recall using "important" in years, so I guess it's not that often.

You should probably use specificity first, then important, just in case you need to over-ride it in the future.

Being more specific often ends up more tightly coupling your selector to the structure of the DOM. .className { property: value !important; } is more resilient to DOM changes than adding extra selectors to increase specificity.

I’ve noticed many CSS authors don’t seem to know that you can just repeat a selector to increase its specificity. For your example, `.className.className` increases the specificity without adding more reliance on DOM structure.

Wow, I've been doing CSS for a very long time, and had no idea about repeating the selector to increase specificity. That'll come in very handy, thank you!

But that only works if you only need to increase "class-level" specificity. If you're trying to overwrite a style set with IDs, you're gonna need to either use IDs yourself or use !important. Sometimes you may not want to use IDs.

I did not know this, thanks for the tip

Very cool tip. Do you know if that's an implementation artifact or part of the spec?

Mind blown. How the hell did I not know this.

EDIT: Memory was playing tricks on me

This is a really cool tip.

having an id on the top <html> tag and mentioning it in css rules seemed very effective to me- especially when the tag was the name of the page, which is what i wanted to override by anyway

I personally like the body:not(#fakeid) trick :-)

I haven't found that to be the case.

This, if you understand the CSS rules for specificity, you almost never need to use !important.

On the other hand, using ever-increasing specificity to emulate !important is about as elegant and semantic as using the hypothetical properties !importanter, !importanterer and !importantererer

Ever-increasing specificity is how CSS works, to call that "emulating !important" is misleading. I'm suggesting using CSS as intended, the cascading part of cascading style sheets, instead of relying on a troublesome override.

Edit: Take this example:

    div {font-size: 60% !important;}

If I can't control the order the CSS is loaded, and I can't change that line directly, how do I modify it? Like this:

    html div {font-size: 70% !important;}

The use of !important isn't some simple way of bypassing ever-increasing specificity. In many cases it just makes things more complex.

One caveat: every time I use !important, there's at least a clear reason why ("X" library is doing stupid stuff) and you could be surfacing this like any other tech debt. Often, 'spaghetti css' is an easy excuse to not even look into what's going on.

Yup. If you've used important it should be accompanied by documentation. So much of frontend development work is using, adapting, updating, or integrating code you have no control over that it's inevitable to need to use some blunt force on occasion...

That's a quick fix and I fail to see anything engineering specific about it. The same approach can be applied to any other problem in any other profession. Personally, I'm not a fan of this approach.

I also think it's the wrong quick fix. What you want is a rule of increased specificity. Better use a unique id, maybe in conjunction with an element selector.

!important rules should be avoided like the plague

Also, "!important" is a blessing when you're writing a user stylesheet to apply to someone else's website.

I agree that you often need to be pragmatic. Not that the keyword is the definition of grace in any way. If you have to overwrite something later you can append it as the last !important gets precedence.

I am no web developer and I honestly don't like html/css, even if I use it nearly exclusively for visualization by now. There is so much baggage that you basically have to know to be able to create efficient solutions. Wanted to visualize some data where you basically color small cells in a larger table. I used a HTML table tag and styled it with CSS. Big mistake! It was incredibly slow for something very simple, I had perhaps 50,000 cells. Little did I know about the background calculation of html table cells and I also did not know why no browser version of Excel derivative uses that tag to implement their grid.

Of course you can say that everyone knows this. Doesn't change the fact of the severe baggage.

Speaking of working with what you've actually got, CSS source code so looks dull and boring, all in the same font and style and format.

I want to be able to mark up my CSS sources with HTML tags, and style it with CSS, so it's beautiful self documenting literate code!

Imagine how easy and pleasurable to read and understand CSS would be you could simply use CSS in your CSS to format "font-weight: bold" in bold, and "font-style: italic" in italic!

Xzibit Style; Pimp my sheetz

This can be a slippery slope. I’ve seen projects with an initial nice hierarchy become spaghetti when engineers looking to save time start throwing important everywhere.

Not that it should never be used. It’s like gotos in C code. They definitely have a purpose but if you find you’ve implemented more than half of your program control via gotos you’ve probably made your codebase into a horrific mess.

> Engineering is doing what you can with what you've actually got.

Well said.

There's also no mention about !important having that specific purpose in the CSS spec, nor the tweet discusses why other already existing solutions would've not fit that use case.

That's hacking (or coding), not engineering.

hm maybe we need "important levels"?

!important-10 > !important-9 > ...

we need more important stuff!

I use !important all the time to get rid of fucking GDPR popups and things like that.

What do you do if you encounter GDPR popups with !important directive? I think we need !!important...

I think if your CSS comes after theirs in the DOM yours will take priority.

I think one concept that's slowly coming into focus for me is just how many engineers want you to experience _their_ experience and spend your time reveling at how clever _their_ stuff is. As if they think you wake up and want to do CSS work. CSS is not the goal. The website I'm building isn't even the goal. The goal is to solve some problem.

Everything that I have to do to solve that problem is an unfortunate (but inevitable) reality. But let's be clear: the goal is to minimize as close to zero, how much time you have to spend doing these things.

CSS, like all code, is a total liability. I want to spend as little time designing and writing it as possible. Which is why I hate CSS: it demands you know the exact current and future (hahahaha) structure of your webpage. `!important` is not some panacea, but I cackle at the ignorance of suggesting that the user is wrong for misusing it.

> Which is why I hate CSS: it demands you know the exact current and future (hahahaha) structure of your webpage.

Replace structure with users, environment or other factor you can't control and you'll realize you must hate every other aspects of development :)

Boy this is exactly how it felt to me as a junior. I was just sure it was the fault of everyone else’s configuration that was the problem, not mine. The hardest lesson a junior has to learn is that the customer is always right. No one cares if your program runs perfectly on your machine, because of course it does, it has to run perfectly on every machine.

Some machines are configured by the devil himself.

This is the concept of Byzantine faults

I think some are configured in such a way the devil itself is perplexed by its sheer chaos.

> The goal is to solve some problem.

but you also have instrumental goals, like you don't want to relearn how to reinvent the wheel every time. you don't want to figure out from first principles every time how to transmit style information next to HTML in a concise way, to apply that to the DOM, etc.

hence the tools of the trade.

and there's an endless iteration of this problem. that's why every new version of each tool helps to do certain things faster, in an easier way, with less code. usually tools focus on trendy things, and as a consequence other things usually become harder to accomplish with the tools (simply because the tools become more complex, their documentation becomes bigger, etc)

there are certain abstractions that are very powerful, work well, sort of simple to grasp and compose (Turing machines, loops, map-reduce, structural pattern matching, types / interfaces, distance vector routing & IP addresses)

and the cascade is somewhere along the spectrum of tools.

sure, it's far from perfect, but learning the basics is okay, it gets the job done, so it's a quite expressive tool.

This is the main reason to use modern methodolgies such as (pick only one):

- css BEM with class only selectors

- css modules

- functional librairies (like tailwindcss)

with those you first write your html, then "apply" css.

The problem is that people don't treat css as code. If you use styled components or css in js you'll treat it as code.

Nobody would change private properties in a js class from outside that class. Same to css, you should not change css attributes from parents. Those are private to their component they are rendering.

If you need that, provide a public attribute to the component and he'll change it's design.

Do this, and css is very maintainable.

Misuse literally means "the wrong or improper use of something", so your statement also suggests the user is wrong...

What's the source for this, I do see they're the CSS co-designer, was this requirement originally written somewhere? I'm looking at the description of important, and I don't see this intention carried through.

https://www.w3.org/TR/css-cascade-5/#important

https://www.w3.org/TR/css-cascade-5/#importance

If the intention is indeed as described, then the CSS designers failed to communicate it properly, and not "a sign you may not understand the cascade properly."

I don't know of it's a joke tweet, or a pompous person trying to make other devs feel inferior.

The example or use case they describe doesn't even make sense to me. Nor does it even seem to line up with how CSS specificity or cascade works.

"Here's a paper to write on, oh wait why are you drawing, this is a writing paper, you're doing it wrong!"

> or a pompous person trying to make other devs feel inferior

This is how I felt reading it as well. IMO Steven should exercise a little humility.

It was bad design on his team's part. How is anyone supposed to know that there was only one super secret reason for "!important" to exist? Why not call it something like "!break-cascade-override"? They put an emphasize on making the language look "clean" over real world usability and this is the outcome.

How is a legal requirement different to a business requirement? Both need to be satisfied.

But not satisfying one may cost a lot more than the other, especially if it's a small difference that's small to catch visually.

>> Are there public discussion records about this? That'd be entertaining to read

> Alas not. I wish there had been an agreement that after some number of years the records would be made public.

https://twitter.com/stevenpemberton/status/15059585359763456...

If the intention had been to comply with laws, why use “!important” as the keyword?

For the same reason we call it "accessible entrance" and not "government-mandated alternative door with ramp." Making the phrase more general is just good design.

But nobody is saying that accessible entrances should only be used for disabled persons and nothing else.

Here, the author is asserting that there is only one valid use case of !important, and that it shouldn’t be used in the general case. If it shouldn’t be used generally, having a general name is bad design.

It should have been "!legally-required", or "lawful-font-size:"

or the React way, "!enforce--only-use-this-for-legal-font-size-or-you-will-be-fired"

Likely because they felt the law is “not important”.

When you say "If the intention is indeed as described," are you referring to the tweet in the submission? Because it looks like the intention is indeed so described in the links you give:

> This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

Yeah, I seem to recall it was added in Firefox to solve some browser chrome styling issues, or something like that. Anyone any idea where I got that idea from?

Do you mean the important rule? It predates the existence of Firefox as best I remember.

Yeah I have that story in mind for the addition of !important. Might have been for Mozilla/Netscape?

I agree with that tweet there:

> If you need to set font-sizes with !important you also don't understand the cascade

If law requires you to make certain text a certain size, just do so.

Without any more background information, this explanation for !important doesn't make any sense.

I wasn't there, but putting myself in the headspace of someone who was and may have had to comply with that law: There are things outside of the individual control of the designer that can override everything except !important. The most obvious example is non-!important rules in user stylesheets.

Today it's obvious that overriding a font-size with a user stylesheet is a bit of an extraordinary measure. You're unlikely to have any legal issues based on somebody shrinking your text using one. This may not have been obvious in the meetings in which CSS was being designed: it's plausible that I might think user stylesheets would be all over the place and have unpredictable effects, including shrinking disclaimers or whatever. On the other hand, putting !important in a user stylesheet could've seemed like an extraordinary measure even then.

But again, I wasn't there. I'm just making semi-educated guesses.

Still, it doesn’t make sense why US law makes it necessary to have this feature, but any other business or design requirement wouldn’t make this feature necessary. Surely if the CEO or designer says “this text must be 24px” that’s not any different from the implementer’s perspective as a law which says the same thing. This whole thing doesn’t really add up.

It's different from the implementer's perspective because the implementer can go back to the CEO (maybe indirectly) saying "I can make that work 80% of the time, but it just can't be done for the 20% of users who have expressed a preference to the contrary". In your example the CEO gets the option to say "OK, make it work most of the time". In a compliance situation, the CEO is legally obligated to can the whole project, find someone willing to put the text in a JPEG with the attendant accessibility issues, or some other draconian maneuver.

If you send me a government mandated form, and I scrible on it, you aren't liable for anything. The only potential concern is if the content is deployed through a framework like Wordpress that might add CSS.

> This whole thing doesn’t really add up.

If the originally purported intent had carried through to the specifications, it adds up in a sense. If !important overrides indicated an explicitly set formatting/sizing for compliance/legal reasons, implementers touching it without any historical context would know at a glance what it signified and that it shouldn't be touched lightly without explicit approval. And when the implementer updates the stylesheets to use 24px text on a page based on direction from the CEO/designer and the element with an !important override stays at 26px, the implementer can point to the !important override as the cause and confirm if the person requesting the change has confirmed legal/compliance approval to change that one as well. Even if the parties involved in the change (the designer, CEO, or implementer) aren't familiar with the compliance reason for the override's origins, the fact that it's there is a known flag that changes can lead to potential violations and costs/fines and need to be properly vetted for approval.

It would also make it easier to go in and update the stylesheets to comply with changes in compliance/legal requirements, as you can easily search through the styles for !important flags and find all the spots that need reviewed for potential change needs.

That said, its use in practice is completely different than this purported rationale for the flag's existence, and !important is sprinkled so cavalierly in existing codebases to crudely but effectively get a desired effect that the above situation is impossible at this point and the original rationale is moot.

> You're unlikely to have any legal issues based on somebody shrinking your text using one. This may not have been obvious in the meetings in which CSS was being designed: it's plausible that I might think user stylesheets would be all over the place and have unpredictable effects.

Someone predicting "stylesheets all over the place" would have been exactly right, though - practically every single news page on the Internet has questionably-sourced ads, Facebook like buttons, Twitter embeds, and chat/discussion/engagement widgets, all of which have custom stylesheets. The only saving graces come from frequent use of iframes for isolated embeds (which will become less common now with cookie restrictions!), stylesheets well-engineered by well-funded corporations to have every rule prefixed by a custom and dedicated class name for compatibility, and preprocessors and CSS-in-JS that would make that latter approach viable.

Now imagine a world where you're a site operator, !important doesn't exist, and you cannot trust that a site component provider will not install a global CSS rule that will break your legal or branding requirements, with no real way for you to work around it if they do, without unmaintainable specificity boosters for your own components. You simply won't use that site component provider unless it's well-vetted. Which means that there's significantly less innovation on the Internet, because "nobody ever got fired for embedding IBM CSS" becomes an actual thing to think about. !important becomes the escape hatch that the web needs.

>The most obvious example is non-!important rules in user stylesheets.

You are fundamentally unable to force the user to render the text you send them in a particular font size, !important or not. What if they use a text browser and small font size in the terminal?

The legal requirement explanation makes 0 sense.

There is no law for the designer of CSS system. Only the developers who build UI have any liability to comply with the law. As long as CSS allowed them to render the required font-sizes there was no reason for them build breaks to the cascading to "comply with law", perhaps it makes it easier for developers with this feature to comply to the law, but there was no requirement to make it easy .

I don't doubt the explanation but agree it doesn't totally make sense: an !important-set font-size is not really any more "guaranteed" than another one, as it can just be overridden with another more-specific or later-appearing !important style. So you still have to look at all the styles to be sure you're complying, and if you're going to do that then you might as well just not use !important at all.

Though I'll admit that once you have your "mandatory" size style as !important you'd only have to look at the other !important ones to be sure, so there's something to it.

Of course there's lots of perfectly reasonable uses of !important now: dealing with other peoples' uses of !important.

It's hard for me to imagine a website actually managing to comply with such a requirement. Even if you set a font to "12 points" or whatever in CSS, and the browser respects it, will it actually turn up on every screen at exactly 4.2336 millimetres? I don't know if the law actually requires a particular point size, or uses some other definition.

Well, my !important story - at the beginning of 2014 I joined a project that was being done for the Danish government, the JavaScript implementation of NemID which unless you're in Denmark you probably don't know what it is.

Styling in this project was done with a sass compilation to CSS, and it had hundreds if not thousands of !important declarations inside it. It seems the guy who was there before me had set up the import order of the Sass files incorrectly from more specific to less specific to some really super specific couple things on top of it all (most of the code base was in Java using GWT to compile to JavaScript, so as a consequence most of the programmers were Java guys and did not notice this), basically I cut 800kb of CSS out of the build in the first few weeks by restructuring and getting rid of !important declarations (for anyone who knows NemID you can probably see how this was definitely way too much CSS for what you need to render!)

It was my first time consulting, I sometimes thought, man if I could find the guy who did this (who was I'm told a pretty good designer) I could just follow him around and make money cleaning this stuff up! But alas, I ended up having to work for a living.

Someone should do the same with the new MitID implementation! :-)

I mean what I see when I use MitID at my bank is basically 2 screens, I can't remember how many screens we had to make for NemID, I think 16 (at the most) and of course they had to be responsive and support Danish, English, and Inuit (Greenlandic) and work the same across a wider number of platforms than most applications.

So I doubt it has too many CSS issues in comparison? But haven't looked.

on edit: also lots of accessibility requirements of course.

This confirms my suspicion that CSS was designed in an ivory tower.

Despite being a "good developer" cut my teeth in C++ etc always had difficulties with CSS. The mental hurdles required to understand various concepts bore no relation to anything else I had encountered in CS.

I'm sure a notable percentage of my grey hairs are attributable directly to its incredible user-unfriendliness.

I've also lost count of the number of systems/backend guys on this website who hate the frontend world even though they've... Never really done it professionally.

I think because frontend has a reputation for being easier, there's this assumption that if you can do the 'harder' thing, you should be able to pick up JS and CSS pretty easily.

But the truth is, what separates a great frontend engineer from an ok one is mostly knowledge of the history and the ecosystem. The web is a big stack of compromises. Knowing why things are the way they are is one of the only ways to make sense of the frontend. That and just actually doing it.

> what separates a great frontend engineer from an ok one is mostly knowledge of the history and the ecosystem

And here I thought it was related to getting the best result (most value for the user/customer) in a set of constraints such as requirements, team and time...

Clearly I'm talking about what helps you get the best result.

Exactly. CSS is doing too much. All the decisions seemed to make sense at the time but it all ends up being a clusterfuck. Part of it has to do with everyone having to rebuild HTML/CSS parsers from scratch and the ever changing and evolving nature of the markup.

Just when you think everything is going to be OK you are faced with feeding your document into another parser that isn't at parity with the browsers. A lot of people struggle to build PDFs from HTML where the parser (itext) only understands a certain subset. That nice grid layout you designed? ...throw that out. You need page breaks with common headers and footers? Get ready to commit some really dirty hacks. Should this data be in a div table or a semantic table? Better predict the future.

Why do you need to rebuild parsers from scratch? You can just use Chromium. Want to build a PDF form an HTML page? You can launch chromium in headless mode and tell it to print your HTML. Guaranteed that you will have a good result. I don't understand where you have this problem these days.

Also, nobody really asks you to do complex things with CSS. Unless you use a huge framework (that I tend to avoid, I prefer writing everything from scratch) you don't need too much rules to make a page look good. In 200 lines of CSS you can get a good style for your site.

The problem is that people:

- think that frontend development is easy and have less dignity than other kind of software development - don't want to spend time learning CSS since it should be simple - don't know CSS and don't understand it - use a framework like Bootstrap because they don't want to learn CSS - complain that CSS is shit because they have to use a ton of !important to make things work

CSS is easy if you dedicate enough time to learn the basics of it, and start to make some stylesheets from scratch without Bootstrap or other shit.

Nobody wants to ship Chromium with their pdf library or application. How do I get a print preview? If I do convince myself to lug around chromium, do I invoke Chromium each time for 1000 PDFs in a batch? Do I want to pay to invoke chromium on a EC2 instance or lambda?

Every document production library that handles HTML (a very popular feature) has had to implement HTML/CSS parsing.

I and many others are using HTML and CSS to declaratively lay out complex , dynamic documents (or trying to at least). Seems to make sense but we have ten more years to go before it's fully solved. Right now it costs serious coin to do it (unless you are releasing FOSS) and it ain't fun.

I find the hardest thing with css is getting it right the first time. If I'm on a project and I can care about css I find I'll end up refactoring classes a couple time before I'm happy.

it's not programming, it's markup for a renderer. it's just a different skillset--people who fiddle with shaders in a blender GUI are better prepared to work with CSS than most programmers. i was great at css when i was 12 but wasn't a half-decent programmer until i was 25

it's not programming

Turns out, it is. CSS is Turing Complete: https://notlaura.com/is-css-turing-complete/

this was cute ten years ago

Having to comply with a legal requirement is very real world. Practically the opposite of the ivory tower.

I don't think that's the part that is "ivory tower." It's the attitude of "you should never use this feature that you rely on unless you are doing one very specific thing that necessitates it" as opposed to just saying "let's design it in a way that such things can be done easily and without violating the spirit of the language."

I think it’s fair to say at this point that the “semantic classes with reusable cascading CSS” experiment has lost to local, component-based solutions. Overuse of !important is just another sign of that.

Having “clean” CSS doesn’t have the same benefits as clean, well structured code in other areas. The underlying assumption that you can change the visuals without major surgery to the HTML is basically never true, so if you do put the time in to structure the CSS perfectly it’s often wasted when the design changes a little.

Also (as someone said in another comment) the lifetime of CSS is short compared to other application code and certainly compared to backend data structures and business logic, meaning the technical debt isn’t a huge issue. Iteration speed is often more important.

" The underlying assumption that you can change the visuals without major surgery to the HTML is basically never true,"

I would disagree. I think an amazing amount can be done with CSS alone, but developers never take the time to really leverage the power of CSS.

I think perhaps it's worth making a distinction between web app development, and content, (e.g. marketing, articles, weblogs, personal websites). While there is often crossover between the two I think that CSS was originally designed for styling content, which was the primary use of the web at the time. It fits less well at styling complex interactive component based web applications.

Having “clean” CSS doesn’t have the same benefits as clean, well structured code in other areas.

I disagree. There are huge benefits to clean, well structured CSS, including avoiding specificity wars and general fragility of making changes.

See my other comment with more details: https://news.ycombinator.com/item?id=30761462

“Anything else is probably misuse” is simultaneously true and brushes away all the realities of front end development.

It requires discipline beyond the capabilities of many organizations to structure CSS so that it's maintainable. The ubiquity of `!important` is not so much "a sign you may not understand the cascade properly" as a sign that the cascade is a flawed design that falls apart in practice.

Step 1: Write component-based UIs Step 2: Give each component a unique name Step 3: Repeat this principle even for building routes Step 4: your CSS will struggle to clash, no matter how hard you try

The cascading is pretty nice actually. Think about using CSS vars... you can dynamically theme apps because of the cascade, by changing just 1 class. there's other nice attributes, and it's true it requires discipline. Just not nearly as much as you imply

When hunting down a function you want to deprecate/remove in your private imperative language codebase, you can probably find all call sites just by grepping — and even if you miss some, in most cases you'll get a hard error of some kind (either compile time or runtime) after removal.

But with the cascade, call sites are implicit — and removal, for better and worse, doesn't cause a hard error.

All it takes is a single rogue engineer or product manager to mess things up. And then cleaning things up later is difficult because of all the places that have to be inspected.

Step 2 demands there be a way for one developer to control the global namespace.

That's completely impractical[0] given inclusion of 3rd-party code and no enforceable standard for imposing step 2 on other developers.

(Web components now exist to facilitate this, but of course, web components are relatively recent; most of CSS's history did not support this 4-step process).

[0] To be fair, maybe completely is too strong an assertion. I've seen something like it done... A compiler rewrites the CSS selectors and the CSS classes to create a sort of top-level namespace by prepending some garbage per module so that no component can accidentally reference another component. It's not great for debuggability (about as much fun as having to deal with the actual entrypoint names in the binary for constructors and overloads when debugging C++), but it gets the job done.

If component-based UIs are such a good idea, maybe the w3c shouldn't have designed literally every piece of the HTML/CSS/JS infrastructure around global namespaces, particularly ones where every declaration is global by default in the case of CSS and HTML IDs.

"Global all the things" seems to clash with "component".

Very few clients care about how "proper" the CSS is behind the scenes. I'd also venture that they would not want to pay for proper CSS (and the expense of expertise that comes with it) when a single attribute would deliver the same end result. !important actually seems like a practical and valuable attribute in this regard.

It comes in real handy when the css hits about 300k lines. True story.

I hate that the general conversation around !important is simply: "Important is bad. You should never use it".

Its more of a belief rather than knowledge at this point.

I'd be interested to hearing a good answer as to why one wouldn't use !important on a modifier class such as ".padding-20" or even something like ".full-width".

Surely the problem lies with your html composition if either of these classes are being used on an element that does not need them?

It’s a developers version of a “wive’s tale.”

Over time, accrued wisdom has turned into a rule of thumb such that Grumpy Old Developers sit around the fire with Young Energetic Developers and say “ya know, child, never use !important, it’s bad design.”

The web development industry is getting mature enough to even have this kind of wisdom, which is wonderful, even if (like “wive’s tales”) the principle is overstated.

A lot of people have been pointing this out in the responses. The author has been defending himself for people misreading his tweet when he should have simply left out that last sentence

If this guy was one of the designers of CSS then I have no idea why he’s acting so smug in that twitter thread.

To be fair, I find many of those replies (by other people, that is) painful to read. Completely missing his point. I'd probably also get a bit annoyed after the fifth person pointed out something because they completely misunderstood what I said.

What is his point? It just reads as blame-shifting. Introduction of an unidiomatic feature into the standard for a particular use case is an acknowledgment of deficiency or incompleteness of the whole standard.

I read his point being that !important used for anything but the original intent is "code smell", and I'm fully behind that. He doesn't imply that you mustn't use it for anything but its designed purpose, I'm sure he is enough of an engineer to know that sometimes you cannot stick to your ideals. He's probably well aware that some people have to rely on frameworks which already use !important, so they have to work around that by using !important as well. None of that contradicts what he says, but it's still a misuse of the feature.

> I read his point being that !important used for anything but the original intent is "code smell", and I'm fully behind that.

It doesn't explain why using !important for the original intent isn't equally a "code smell".

Unless that is smelly too, in which case there are even more questions to answer about why this is the workaround and why you're supposed to use it for the original intent despite that.

> "...anything but the original intent"

We're only hearing about the "original intent" now, via a smug tweet in 2022. It doesn't say much about someone who insinuates people "don't understand the cascade" if they don't follow an undisclosed design spec.

And if they wanted it to be for font size only, they should have made it work only for fonts rather than any property.

I think his point is that they added it because they had to not because they thought it's a good idea.

the point is it should never been in css in first place. and css works better without it. I think he is frustrated because nobody takes the time to understand the cascade

Unless I'm missing some context it seems like this guy tweeted something intentionally cryptic, inflammatory, and baiting for no apparent reason then got mad when people took the bait?

I would be annoyed as well, however if I tweet this instead of say write a well thought out article/blog with some references then I should expect low quality responses.

If you look at the original CSS spec, you wouldn't be surprised by smug overconfidence in its designers.

Sure man, blame the user.

How many hours did humanity lose trying to center things in CSS?

How many hours did humanity lose trying to understand if the size of a box is set by the parent or the child?

Why not admit that CSS has been a giant shit show since inception, and that !important is just another crappy band-aid feature in that mess of a toolbox?

I have been designing APIs for 15 years and I know people misuse them all the time. And I know it’s frustrating. I also know when I have been wrong, and if I were in the man’s shoes, I’d rather be sorry that I created that monstrous piece of technology rather than blaming the millions of developers who just didn’t find any other effing way than to set !important on a random property.

The only problem with CSS is that a lot of people use it without understanding the basic rules of the cascade.

!important is just one thing another thing is that you shouldn't use ids as in id="myId" for styling because an id has too much weight compared to tags or classes. The only way to override a styled id is with another id - and at this point everybody should realize that no thing should have two identification-tags!

CSS is beautiful and extremely logical. I can very much recommend the book "CSS in depth" by Keith J. Grant - by reading this you go from asking CSS questions on Stackoverflow to answering them.

edit: just to make clear I made the same mistakes for years.

It should have been added to the selector instead of the attribute:

  div.legaltext:important { font-size: 12pt; }

instead of current:

  div.legaltext { font-size: 12pt !important; }

so it would have been a more general "increase selector priority" syntax, like the opposite of the recent :where(xxx) selector.

What would :important match?

I think in this scenario it is supposed to match all div.legal elements. The styles are then applied with the highest priority, thus overriding other rules.

that would make css uncoherent

Maybe the html tag could include an important flag

  <html id="root">

  #root#root#root div.legaltext { font-size: 12pt; }

That gives you a specificity that should override everything else. Would only be a problem if some other rule has 3 or more IDs, in which case you can add more here.

Then it’s no longer CSS and you have to edit the HTML code to apply the important styles.

I don’t understand the sentiment. If there is a functional requirement that can only be reliably achieved with that hack, doesn’t it suggest that there are other possible functional requirements that can only be reliably achieved with that hack?

yes. the moralistic sentiment seems to be that you should only resort to the hack when faced with legal consequences.

After blocking popups on some sites, the scrollbar is dtill hidden, making it impossible to scroll (like on twitter, for example). With the help of !important, the scroll bar can be forcibly turned on by adding uBlock cosmetic filters. Works on per-site basis, but can be added globally, though some sites break a bit, like the top header on Wikipedia starts behaving strangely.

https://www.reddit.com/r/uBlockOrigin/comments/ce4mok/how_to...

If you zap enough elements on Twitter the scroll bars come back anyway - so !important must be unnecessary for that site.

https://nitter.net/about offers a better experience IMHO, because it's fast.

Is this what the death of the open web feels like?

Zapper is a special feature, entirely unrelated to cosmetic filtering. When you zap an element, the element is removed from the DOM, and the zapper code will also look at the DOM to find out if any of the parent elements are scroll-locked, and if so will defuse it with an inline style using `!important`.[1]

As for cosmetic filtering, it's is the hiding of elements using `display: none !important`, so `!important` is also key to ensure page styles are overridden.[2]

---

[1] https://github.com/gorhill/uBlock/blob/12ab8664a30538570d395...

[2] https://github.com/gorhill/uBlock/blob/12ab8664a30538570d395...

Anyone have an idea of which part of US Code would require this? I have a hard time imagining it's that prescriptive about font sizes (especially given that different fonts have different glyph sizes, DPI on monitors results in different physical rendering sizes etc.) Only thing that comes to mind is that Apple court case many years back where the judge told them they had to have a disclaimer on their page in a certain size and color as part of the judgement.

Most likely Section 508 of the Rehabilitation Act, which requires U.S. federal agencies to make electronic documents accessible.

The law itself does not prescribe specific font sizes, but ensuring minimum font sizes is necessary to comply with the law.

Totally agree, if there is such a law - how come now one seems to have heard of it. CSS was written before ADA, so we can rule that out.

Sounds made up

The times I use important is generally to override a framework that is taking precedent, even though the sheet I'm editting is loaded after the framework css. That is 90% of my useage of !important. It may not have been intended for this, but a lot of things in CSS and HTML were never intended for certain use cases that they are now used for. That doesn't mean it is now misused, it just means things have evolved.

The most common use for !important is to override something else marked !important. It’s an interesting situation when getting rid of a feature simultaneously removes most of the need for it.

Sometimes a tool has been invented to do X but people end up using it for Y because it’s so useful. I think "!important" is a good example. Like duct tape being used for much more than attaching ducts.

The ironic thing here is that traditional duct tape should _not_ be used for attaching HVAC ducts together. The adhesive doesn't withstand the temperature extremes, and it has undesirable properties if it catches on fire. UL-listed foil tapes are used for this instead.

It seems like cloth-backed tape started as "duck" tape (as in duck cloth), somehow turned into "duct" tape, and then turned back to "duck" for marketing purposes. It has quite an odd history.

CSS Cascade Layers are now supported by all major browsers and provide a good, standard alternative to !important in cases where you need to override CSS that you can’t easily modify, like stylesheets from a third party CMS or framework, or inherited spaghetti code from an earlier version:

https://css-tricks.com/css-cascade-layers/

Now supported by the latest version of all major browsers. Seriously, only one version of Safari, Edge, and Android Chrome support it. Expect to use it in a few years when the older iPhones are no longer relevant.

https://caniuse.com/css-cascade-layers

It's getting hard to know everything that is in CSS now.

You just decided that in 2022? Lol.

I have the feeling that a lot of these people who are very smart and design things sometimes live outside of the world and don't know mere mortals issues, I might be understanding cascading and important (I don't like to use it either and avoid it), but we need to make sure that we know that we work with some legacy code, as part of a team, some decisions made before us, tight deadlines and pushy managers, I won't use !important, I might understand cascade, but I also don't want to refactor everything everytime I can't use a shortcut, when its simple changes it's fine, when it's not maybe !important + a ticket to refactor in an allocated time is a better approach

https://nitter.kavin.rocks/stevenpemberton/status/1505839184...

Why is css of nitter.net broken?

Sorry?

NFC.

The same thing can be said for a lot of things with CSS…

The @media rule was added for one reason only: provide different styles for different media types. It wasn’t intended to be used to make responsive websites. Is using it to make responsive websites an incorrect usage?

That tweet is ridiculous. The World Wide Web was created for one purpose only...serve formatted documents across a network for scientists. Using !important beyond it's intended purpose is called hacking, and has been around since before there were computers. People found use beyond the main purpose of !important, and that's ok...it was a dead end, but that's beside the point.

Never use !important in your production css at all costs. In development, experiment with it all you want...maybe you'll uncover something amazing...in this case, probably not...but better to hack on things than accept what you're given.

The important statement is also useful is you're creating something to slap on some other code you have no control over. Examples of this from my experience are:

- debug tools that hijack the pages style - quickly testing styles on the browser while coding - widgets that are injected into client's websites; client's websites can be a mess, and might contain important statements themselves... - browser themes or custom styles

Sometimes it really doesn't matter that! Important is bad practice, if the alternative would be 5x more verbose and confusing. And honestly I don't care what the father of CSS thinks.

It works nicely if you are debugging CSS via the inspector. But if you start slapping important all over the place you eventually converge towards a code base where a majority (or large number) of classes are using important which takes you back to square one.

The only reason !important was added was to troll javascript programmers, who read it as "not important".

Should have been !!important instead.

isn't ! a fairly common negating symbol in programming languages?

Yes, it's by far the most common use of "!" in programming (though newer languages are increasingly using it for various flavours of null/nothing checking too). Javascript just seems particularly relevant here.

C programmers, and those who write in languages derrived from/inspired by C.

I don't do any frontend development other than sometimes tweaking custom stylesheets for sites for use with the Stylish extension. I use `!important` all the time when doing this; a surprising number of sites I try to modify end up having some stuff with in-line CSS on HTML attributes, and that's the easiest way to override it. I don't pretend to think this is an intended use case of `!important`, but I think being able to customize the way sites look in ways that I personally prefer is at least in the spirit of the open web.

Seriously tho, it comes down to dollars and cents and the fact that !important is an option (and not just for font-size).

A client says they’ll pay for 30 minutes, the boss won’t let you go over 15, it’s not like there’s enough time to actually wiggle your way through a CRM to drop the proper CSS, so a little !important in the override inline CSS is what happens time and time again.

Good developers would love to take the time to do things right, but we don’t always have control over these situations and it stinks.

Damn, there are still people believing that you can just express what the intent behind an engineering tool was, and people will only ever use it if it matches that intent?

That would be crazy naive and I hope this person doesn't imply that.

Everybody is on a schedule. People reach for whatever is available. Doesn't matter what was the reason `!important` was added, at all. If it solves a real problem -- especially quickly -- then people will use and abuse it.

CSS !Important is a nice fail safe or safety valve for emergencies. It is good design to have safety valves in a system. Sure, you should not be encouraged to use it under normal circumstances. As with other fail safe features, it is meant for extreme scenarios you can sometimes predict, but more importantly for reasons you CANNOT predict. So this tweet arguing that it is meant for one reason is invalidating why it is good design.

The main thing that bugs me about "!important" is...

Why isn't it "important!" ?!?

What kind of twisted soul decided to put the exclamation mark at the beginning?

I always read it as "NOT important" until I remember that CSS is its own kind of crazy-town.

Borat voice: True !

¡Sí, que cabrón!

If a simple condition like this requires some special solution, isn't that a sign that there are probably some a fundamental issues with your system?

"!important" means "not important", I guess the engineers didn't like the law makers so they made this an insider joke.

This is how I read it in my head. This also confirms to me that the CSS designers made at least one very obvious error, not appreciating that ! means negation to anyone with a moderate amount of coding experience, and undermines my confidence in the whole language.

Random offtopic rant:

Twitter had decided some time ago that it would show me one notification each time I open the website or app. Probably so I feel like there's something happening. It's always a completely random tweet from an account I don't follow and it is so annoying I'm soon going to log out and just live without the few interactions I do at the site.

One of the reasons I installed an add-on to redirect twitter links to https://nitter.net/

If this is a Chromium add-on, do you mind linking to it? Wouldn't mind trying it out

Cascading only works as intended if you don't have third party styles and if the styling requirements of your application never change. What's funny is that CSS itself is subject to the same problems. It was created to help people add emphasis and layout customizations to text-based technical documents. Now it's used for everything from interactive maps to control interfaces on spaceships.

I get why people hate CSS, but I think the underlying issue is that it's impossible to create software that can gracefully do whatever has been asked of it and will be asked of it in the future. It relates to the whole culture of continuous deployment and rapid iteration... a few people are talking about the downsides, but we haven't really reckoned with them as an industry yet.

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'.)

A sysadmin analog: When you have $PATH defined globally, but you want to overwrite it for a specific command:

>> PATH=/special myscript.sh

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.

> !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.

Should have been !!important instead.

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.

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

I would never take advice on CSS by someone who was involved in designing CSS.

If this was the intention, it's a bit curious the creators of CSS waited a quarter century to share this information. I wait with bated breath for the true purpose of text-decoration to be revealed.

I actually remember it from the time. It was part of the discussion why the page's stylesheet would "win" over a user specified stylesheet when there were conflicts... sometimes things needed to be that way for legal reasons.

If the requirement was truly only to satisfy ADA laws, then it seems like you should have implemented it as:

    window.ADA_MIN_FONT_SIZE = 16;

This seems more like you were given the requirement and then went:

1) we could implement this is as a custom global variable for this specific use case

2) maybe what we need is to be able to override a single property

3) maybe what we need is to be able to override a group of properties

4) maybe what we need is to be able to define multiple levels of priority

and they ended up stopping at (2) when we really needed it to go to (4)

Are you referring to "window" the JavaScript object? If so, bear in mind that JavaScript is not a requirement for CSS to work on a page, and CSS creating a dependency on JS would break a lot of things.

Especially back when CSS was created, disabling JavaScript was much more prevalent.

Sure, then make it a meta attribute. Just needs to be a global somewhere.

IMHO, there is another valid usage: client side css, when a rule is as specific as it can be the !important attribute might be the only way to locally override it.

How can a font size be subject to legislation in anything CSS controls? It won't absolutely define the size on screen or on print, will it?

I remember having to use !important statements to override styling when making custom CSS themes for subreddits, back when old Reddit wasn’t old.

Tweets like this proves why CSS is so badly designed. It is a bad idea to add a feature only to satisfy random government mandate. The committee should have reflected more and abstracted out and implemented something that was more general and widely usable. Instead they implemented hacks and then required people to do more hacks on the top to get things done.

If you find yourself reaching for `!important`, try doubling up the selector instead:

.someclassname.someclassname {

That will make it one level more specific than just .someclassname, which is usually enough to override styles with a higher specificity, or the same specificity but were loaded afterwards. If it's still not working, add another one!

It's a hack for sure, but definitely the lesser evil.

Invoking the cascade to explain why there are 15 ways to center a box, of which 10 don't work one time or another.

I can't find if Tk had this in the original version, but I suspect that it did.

For reference, Tk, which was conceptually a decent GUI toolkit ( https://en.wikipedia.org/wiki/Tk_(software) ), was launched in 1991.

CSS was launched in 1996...

I feel slightly annoyed TBH. If it was supposed to be used only for fonts why does the system allow using it for (almost?) everything else. I'd say people understand CSS very well, but sometimes have deadlines and legacy code and don't have time for redoing the system perfectly (just as Steven and his CSS yeah did not)

For those tired of dealing with any OOCSS variant, you can go full functional css http://minid.net/2019/04/07/the-css-utilitarian-methodology/ and say goodbye to !important

One nice feature modern frontend frameworks have nowadays is automatic component specific css rules

IIRC in Vue, <style scoped> allows each element of the component to have an data-{id} attribute and every CSS rule is appended with [data={id}] selector so you're guaranteed no CSS rule leaks out and is contained in the same file

Do keep in mind that this does come with a performance cost, especially in larger applications, as attribute selectors are slower than pure CSS classes, at least last time I ran some benchmarks.

> important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it.

But it doesn't. !important begets more !importants.

Nice to hear the reasoning behind it, but it's a PITA and should never have been added.

To honest, I don't have the time to become a CSS expert so I do what works and I don't worry much about it.

I use "!important" quite a bit because I let users made some choices in the color schemes of the app and using "!important" makes that easy for me to do.

Please, put an id on the HTML element, and a CSS rule targeting that id, rather than use !important. !important really was a mistake and should only be used to counteract other uses of !important you don't have control over.

>> !important really was a mistake and should only be used to counteract other uses of !important you don't have control over.

That's mainly when I use it. Mostly to override colors Bootstrap CSS has defined with it.

For example a nav background color set in the Bootstrap file "/scss/mixins/_background-variant.scss":

.bg-light { background-color: #f8f9fa!important; }

By default I use that, but I also let users select a CSS file to override that with a color they chose from a list of "themes" I've made.

My themes only change a small bit of what Bootstrap CSS has described in their themes. It wouldn't make any sense for me to do anything more than that because it works works and it's easy for me to implement the change.

also inline styles you have no control over

> a sign you may not understand the cascade properly

What a load of self-important malarkey, this is like telling someone a hammer should only be used on nails.

You failed to consider abuse when you designed the spec. That's not on everyone, that's on you.

What? no, you can override !important many ways, for example # rules take precedence over . rules, so even if you have important in your . it could get overridden. If you obviously add inline style that will also override it, etc.

> Anything else is probably misuse, and a sign you may not understand the cascade properly.

I use it in userChrome.css in Firefox to hide tabs because I use vertical tabs. I copied that snippet from some FAQ and it Just Works (tm).

Recently had to unify looks of pagination rendered by 2 incompatible approaches. There is a chance it could be done in more sane ways but I ended up just spamming some very important css rules and be done with it.

That's fine. It's really not that important what a designer of CSS thinks about how any part of CSS is being used. A guitar player does not confer with the guitar builder about how to play the guitar.

If you are working within another framework such as Wordpress, the !important tag is a lifesaver that allows you override styles you simply cannot change without a lot of effort and understanding.

Is that reason to randomly put it somewhere while under a deadline, find it works, put a //TODO to remind future you to change it later and then forget about it for a year or so?

well hopefully you'd be putting a /*TODO*/

If you can find a way to fix other properties without using !important, then for sure you can find a way to fix text size without using !important.

So the argument doesn't quite work.

I've used !important plenty of times when I had no idea what it actually does just because some random tutorial suggested it

If that was the intended use of !important, I reckon that info would have been an awesome addition to the CSS spec.

Oh my, I used to have stylesheets with more than 500 line, where every single line ended with !important;

oh i understand the cascade, but i also have 25k lines of css to deal with and deadlines. Yes, I can track down the full cascade and craft a selector that will specify a rule for just this or that element, or I can slam a !important on there and move on with my life

What happens in case of multiple contradicting !important statements?

CSS has a concept of "specificity" [1] which is applied also in the case of !important. Basically the most specific rule wins.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

In-line css takes priority.

HTML email enters chat

it's very useful when you are hacking on top of existing code that you don't have access to, like custom skins ux for websites you use

I always thought of important as the sudo of styling.

Nice, blame the users for your design mistake

Given that “the cascade” has been a worthless anti-feature since the beginning, I feel he could have said this in a less condescending way.

[hidden] { display: none !important }

One the best CSS tricks out here, thank you.

!important is the new <blink>

"'gif' is pronounced ____" energy

I don’t know if I’m just stupid. I might be below average. I’ve got a PhD in CS, in a fairly easy area. I’d say I’m about an 8/10 coder. I definitely have a very bad memory and I don’t like big languages as I forget their syntax. Things like C++, Scala.

But… I’ve been writing CSS on an almost daily basis for three years now, after coming to it cold. And it is without doubt what I spent most time on during frontend dev. I use Vue. Occasionally I Google to check some Vue syntax I haven’t used for a while. But I am endlessly googling CSS.

The first thing I look for in a language (probably due to my goldfish memory, or because I’m actually a bit stupid compared to other coders) is a really small set of rules that I need to know to write any program. Lisp or Python easily fall into this bracket. But with CSS, it just seems endless.

There are so many many ways to do the same thing, I find myself making arbitrary choices all the time.

Without doubt though, the cascading precedence part of the design causes the biggest problems. A single component can have its styling defined across many an unlimited number of files. And each bit of styling might be defined with a different selector, meaning when I change something the specificity rule I use might “work” for some properties and not others. The often subtle interactions between parent and child properties are maddening.

Lots of folks might say - well you’re using it wrong, but most decisions are not made by me but rather other people designing frameworks, and given that these problems seem to be everywhere, it seems no one understands how you’re supposed to use CSS correctly. And if that’s the case - well, it has to be a failure to design a good language.

In other places in CS (eg some configuration file systems) where similar specificity and overriding mechanism can be found, the exact same confusion, mistakes, frustration, and time wasting occur. Anyone who has spent a lot of time working with those sort of mechanisms would have said - no, this doesn’t work, we have to simplify this or it will lead to a big mess.

For a long time I gave CSS the benefit of the doubt and assumed I was a complete idiot. After three years, I’m still spending a lot of time “debugging” CSS in Chrome’s dev tools and whilst I may not be super smart I’m fairly sure that the language has failed me. I’ve learnt some tricks, like only use flex box, and delegate absolutely everything you possibly can to a framework, but I’m not much wiser than day one.

I’d love to see someone who really understands PL design to write a replacement for CSS. An elegant design system language. I’m not a PL expert but the sort of characteristics I’d expect would be: concise, not spreading definitions across many files, a very simple or no precedence hierarchy, more akin to a programming language than a configuration syntax, with a type system that enables excellent dev tools and in particular a debugger and sandbox. One telling feature would be that adding new features would almost never mean extending the language, which would remain stable.

The !important syntax is either a bad joke or a tell, because no one with any serious background in language design would choose that syntax.

It's a stylesheet, it was supposed to replace adding styles directly to HTML and using stuff like <font> tags and <center> tags (yes, those were a thing). That's where the cascade is useful, you can put a coat of paint on your existing HTML page without modifying the HTML itself (like https://www.w3.org/StyleSheets/Core/Overview or http://www.csszengarden.com). I don't think people were thinking about components in HTML back then, there was server-side templating with PHP and stuff, but nothing on the frontend.

Any suggestions for where to read the history of CSS?

No particular resource, sorry. You should be able to dig up articles online however.

Should have called it "mandatory" then.

Not really.

css "co" designer. that explains a lot. horse by committee.

i find many uses. sometimes you need to override a style coming from an external or to apply a rule globally, you can just use !important and know that it will work regardless of individual specificity in all instances of that selector.

yes, you could override it with specificity but why bother, a hack is a hack

"co-designer of CSS": right up there with "I invented anti-personnel mines".

Bragging about "designing CSS" is a bit like bragging you captained the Titanic. I mean, I guess it's impressive, sure, but it's also pretty embarrassing. I've used `!important` many times, as I'm sure many folks did, because CSS just absolutely sucks and it's a huge pain the butt to get it to do what you want. Using `!important` is the equivalent of throwing your hands up in the air and saying "screw it, I wanted to go home 3 hours ago, I'm done."

On a side note, CSS3 being accidentally Turing complete is probably one of the funniest (read: dumbest) things out there.

I don't read the tweet as bragging

Reply on news.ycombinator.com