Overriding practices

Red, blue, yellow colorful by Pexels

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.

.notification { background: cyan; } /* = 010 */

/* your code */
.notification.notification-error { background: red; }  /* = 020 */
#event .notification { background: limegreen; } /* = 110 */

Legacy code

You already know the quick and dirty way where you use the !important flag or the #identifier bazooka at the end of a legacy stylesheet to “add without breaking” the existing code.

#widget587.pristine.focused.not-disabled { color: yellow; } /* = 130 */

/* client wants it blue instead */
div#widget587.pristine.focused.not-disabled { color: blue; } /* = 131 */

/* client later said the one on the homepage should stay yellow */
section#homepage div#widget587.pristine.focused.not-disabled { /* = 242 */
  color: yellow;

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.

.tooltip-widget { color: blue; } /* = 010 */

/* client later said the one on the homepage should stay yellow */
.homepage .tooltip-widget { color: yellow; } /* = 020 */

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s