Hacker News new | past | comments | ask | show | jobs | submit login

What's wrong with !important?

Succinct but pretty thorough - https://j11y.io/css/dont-use-important/

It's an exceptional bypass, so if you use it frequently, it means you didn't get the base class design right.

Case in point, I extensively use !important in the very rare situation I'm doing front-end work, because I struggle immensely with CSS and can never seem to get it to render properly. And in almost every situation, !important leads to more problems than it solves. Yet I keep doing it, because I fundamentally don't understand CSS.

If you use !important, you either understand CSS very well, or don't understand it at all.

What would you say are the biggest pain points?

Someone probably knows of a targeted resource or two that may help.

I think honestly my biggest problem is just lack of familiarity. I don't do a lot of front-end work, and when I am doing front-end work it's probably a side project that I'm not getting paid for. If I'm working on my own time, the back-end stuff is more interesting to me so I spend as little time as possible on front-end.

Order of precedence is the hardest thing for me to figure out, if I have three nested <div>s and a couple of <li> elements and all of them with a conflicting fontColor property, which one takes precedence? If I think really hard and trace back all the code, I can figure it out. Or I can put an !important on it and future me will deal with the consequences.

I googled "css specificity" and it autocompleted "calculator", which led me to https://specificity.keegan.st/.

You can paste in a series of selectors (getting new boxes by clicking "duplicate"), then hit "Sort by specificity".

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact