How should a JavaScript library set default CSS styles (is there a "!notimportant"?)

Question

When a JavaScript library creates a <div>, it typically sets a class on the div so that the user of the library can style it him/herself. It's also common, however, for the JS library to want to set some default styles for the <div>.

The most obvious way for the library to do this would be with inline styles:

<div style="application's default styles" class="please-style-me">
  ...
</div>

However, this will make the application's default styles trump the user's styles. A workaround is to use nested divs:

<div style="application's default styles">
  <div class="please-style-me">
    ...
  </div>
</div>

This works great for many styles like 'font' but fails for others like 'position', where the inner div's style will not override the outer div's.

What is the best practice for creating user-stylable elements with defaults in a JavaScript library? I'd prefer not to require users to include a CSS file of defaults (it's nice to keep your library self-contained).

Answer 1

When a JS library has a default set of styles that should be used, but should also be overridden, the JS library should include a separate stylesheet.

JavaScript should avoid adding styles directly as much as possible, and defer all styling to CSS where it's reasonable.

It's common for sets of styles to be toggled on and off. The way to elegantly handle these situations are with CSS classes.

A case where it may not be reasonable to simply use external stylesheets is animation. CSS animations could certainly be used, but for cross-browser support, asynchronous interpolation is used to animate styles from one value to another.

Answer 2

There isn't !notimportant or !unimportant in CSS. And I haven't run into an accepted best practice. It seems like a CSS file is the defacto standard for styles that should be user modifiable.

But if you want to keep things all in one library, I would take your second example, with your application default styles, then append a CSS class to it and prepend something unique to the class name. Then if the implementor wants to override your styles, the implementor could just use !important to override your user styles.

Adding !important to one or two styles in a CSS file shouldn't be a huge deal, but if you're creating a bunch of inline styles, this may not be the best solution.