6

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).

Improve this question
5
  • 5
    Funny only in CSS !important would mean important. In any programming language !important would already mean not important Commented Apr 1, 2013 at 2:41
  • @HankyPankyㇱ and that's why CSS is not a programming language :D Commented Apr 1, 2013 at 3:23
  • If you are styling it with using an external CSS stylsheet, then make sure you put the application's CSS file after the default stylesheet. And use more definite selectors like div.container instead of .container, it will override other less powerful selector. Commented Apr 1, 2013 at 3:30
  • @Hanky웃Panky Just side note, I'm curious how do you pronunciate '!important'? I'd just say 'not important'. Commented Feb 12, 2014 at 10:12
  • @ŁukaszL. That's what I meant, to any programmer it would sound like not important but in CSS it means important Commented Feb 12, 2014 at 15:37

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

But "the JS library should include a separate stylesheet" means the style sheet provided with the library and the library itself have to agree on and use unique class names. There seems to be no way to let the developer using the library inject class names that are unique within her application. Or is there a better way in 2021? stackoverflow.com/a/7516030/2954288 could be one way, maybe.
1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.