I used ! important in my CSS ... I have sinned

But hey, it can come in a pinch when the manager is desperate to push a quick fix on the production level ¯\_(ツ)_/¯.

Removed react-bootstrap from a project recently. Got completely rid of its CSS and all the !importants, feels great.

Their API broke some things after upgrading and instead of adapting to the new one we chose to ditch it as we already exchanged some of the components with self made ones.

At least for us, the rule is: "The less frameworks you use, the easier the maintenance!"

@finiteAutomaton what are you using for css now?

I did too.

But I wasn't paid, I used Joomla! as CMS, the guy recruited only interns not to pay them, they changed their mind everyday even tho they had a designer (intern too of course)
And they asked me to put on hold my studies so I can finish their website (for free, since they can do something nasty not to pay you and make you still work for them)

I had the rights to use !important back then, okay ?

It's part of the language, use it if you need to. Css is ugly as fuck anyway, no need to fuss about "good practice". Most of us just wants to spend as little time with css as possible.

@DodgerAkame I had to build a parallax website with a vertical navbar on the left I had to use scroll spy of bootstrap 3, used !important to override the blue color of the button coz of deadline and now I'm having second thoughts weather to rewrite the navigation bar on my own or get it done in time

Good luck on your reflexion.

I'd let !important because I'm lazy.

I find it funny how !important is not important, but actually the opposite happens.

Well if that's bad... I've been given projects built by other devs with multiple !important overwriting each other... Cherry on top, they are all over the place, i.e. in different CSS files, page templates, WordPress inline code...

It's bad, but sometimes it is also necessary.

(Generally when someone else didn't know what they were doing.)

@yendenikhil
Pretty much only self-made CSS. Included in the React component files via css-modules.

As we also got rid of IE10 support, we were able to use more flexbox.

It may be the case that there are some missing animations, but fuck it the customer does not pay for it either. They got a cutting-edge website in Angular from a competitor with CSS animations (somewhat material design alike) in great numbers. And it is darn slow and pushes your browser to it's limits.

And besides: react-bootstrap still relies on Bootstrap 3 which looks very generic if you do not override most of the styles.

@finiteAutomaton ah cool, I'm no expert in css, but why flex and not css grid? Both are native! (Though grid might have less browser support)

@yendenikhil Exactly, we still need to support IE11 which only supports an old specification of CSS grid.

@yendenikhil

Picking CSS solutions is very project dependent.

Bootstrap is only a good option if you need to set up a "passable" dashboard in 30 minutes. It's bloated, with semi-required js and fat html snippets, but it's quick to work with because of how copy-pastable it is.

If you work in a small backend team with very little design/frontend experience, but you still need something to drape on top of your API? I'd say go for something full-featured, but slimmer and more modern than bootstrap. Bulma and Mui are reasonable enough.

The best option is to hire decent UI, UX and design experts, and build a kit from scratch. Let them make the elements you *actually* use, whether it's graphs, fancy panels or beautiful typography. Write (s)css as if you're creating your own private framework. Fuck it, *make* your own framework, publish it as open source, even if it's just to fully commit to its level of quality. It's a must for all medium-sized web companies.

What do I use personally though, for little side projects, where branding is unimportant?

I like Purecss, and lately have used Milligram quite a bit. Both extremely tiny, just enough to get the browser quirks out of the way, have some responsive tools, and some nice button, form, list, table & font defaults.