Overriding practices

JS libraries

Many javascript libraries have to live calculate and render CSS properties and will declare style=”” attribute which will always override the style declared into CSS files or between <style></style> tags.

That is okay for calculated values only, while it is often used for properties that are not. The library stylesheet should carry such basic styles, allowing the user to customize the appearance of the widget without reinventing the wheel.

In the case of a framework or library doing such a thing, the user finds itself obliged to add the !important flag to the properties he needs to render.

CSS libraries

Some CSS libraries use the !important flag by default on utilitary classes like, say :

.text-blue { color: blue !important; }

This is a design choice which guarantees that utilitary classes will always work as intended. This seems like a problem in your specific case ? Well, don’t fight that design logic which clearly makes sense; you’d rather think again about what you’re trying to achieve and why you took the wrong path to do it.

If you don’t have Sass or Less variables to configure your CSS framework, then don’t randomly override by weight, but use a logical pattern, like setting a context or adding a modifying class.

If you’ve got no budget nor time, or a crazy deadline, it seems understandable. Even though, it produces a technical debt and keeps complicating the legibility of the code.

It’s worse if it’s because you’ve got a lack of skills or motivation; that’s a bad excuse for not opening a browser and look 5 minutes into already applied selectors, then do a clean refactor in the stylesheet to achieve your goal.