Avoid class and id collisions when writing javascript library

Question

Problem

I am writing a javascript library. Some functions append quite a bunch of elements to the document. I'm choosing not to style these all individually through javascript since it's using up a lot of execution time. Instead, I will give all appended elements one or more specific classnames or ids (difference doesnt matter in this context) and then define the style in a pregenerated stylesheet.

This practice could induce collisions in class/id naming. Imagine a user of the library already having defined a #foo in another stylesheet or a .bar getting defined in a javascript from another library.

A solution to this would be to prefix classnames to minimize the chance of a collision. Although this doesn't reduce the chances of it happening to 0. Would there be another method of avoiding this through javascript?

Just use the current timestamp and prepend/append it to your id/class name structure. Mix it with some underscores and the probability of collision is way less than yours. ;-) — nietonfir
– nietonfir, Commented Jul 15, 2015 at 22:52

Shomz · Accepted Answer · 2015-07-15 23:04:23Z

4

One method is to use more specific selectors for the elements instead of renaming class names with prefixes and what not. That means that one library can have the same class name as another one:

HTML

<div class="lib1 someClass"></div>
<div class="lib2 someClass"></div>

CSS

.lib1.someClass {color: green;}
.lib2.someClass {color: black; font-size: 14px;}

or using parents:

HTML

<div class="lib1">
    <div class="someClass"></div>
</div>
<div class="lib2">
    <div class="someClass"></div>
</div>

CSS

.lib1 .someClass {color: green;}
.lib2 .someClass {color: black; font-size: 14px;}

etc... It can get complicated in case you have .someClass defined and if it has some rules that are not defined (thus not overridden) inside the library rules, but it's still easily fixed by using a reset sheet for each library.

I'd suggest not doing this with IDs because you might end up having duplicate IDs on one page.

edited Jul 15, 2015 at 23:04

answered Jul 15, 2015 at 22:59

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

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

7 Comments

Shomz Over a year ago

Thank you, @MarkSchultheiss! It's technically avoidable with the parenting version having only one block each (<div id="lib1">) but I'd still never risk it as that's not what IDs are for.

Henderk Over a year ago

This is a good idea! But I don't feel like it is a complete solution. What if library 1 would be one from an unknown source? Another possible problem would be that I didn't understand your solution (which is even more possible)

Shomz Over a year ago

Thank you. I thought you were writing your own libraries... but since it's not the case: you don't stand a chance unless you load the libraries in a specific order, and go fix element by element, writing fixes into your own CSS file. There's just no way around it.

Henderk Over a year ago

I am writing my own, but a user could be using another one which is unknown. Thanks for the tips though. I think they might come in handy!

Shomz Over a year ago

Well, then it comes to how much power are you willing to give to the user? You can make your library with strong specificities that the user will have a hard time overriding them... or you can use weak specificities and let the user take over. I don't know what you're building, but you can't control something like that coming from several people unless you sandbox them.

|

Amr Elgarhy · Accepted Answer · 2015-07-15 22:53:34Z

2

I don't think you can be 100% sure that your ids and classes referenced by any library user code.
So prefix is one solution to minimize the chances.
You can have your prefixes more like namespaces style.
Also one other solution which may not be helpful in your case is to have your generated html inside and iframe.
hint: reading about how to build javascript/html widget may give you some more ideas.

answered Jul 15, 2015 at 22:53

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

5 Comments

Henderk Over a year ago

An iframe seems to be a solution, yet a very ancient one. It would act like a kind of sandbox. Any ideas on where to find more info on these kind of methods?

Amr Elgarhy Over a year ago

search for building html/javascript widgets, something like this stefanwienert.de/blog/2013/10/15/… may give you some ideas

Amr Elgarhy Over a year ago

I googled for "build widget using javascript avoid css conflict" and it gave me some good results

Henderk Over a year ago

Thanks! This is interesting.

Amr Elgarhy Over a year ago

@Olesma yes, this is the namespace idea

Collectives™ on Stack Overflow

Avoid class and id collisions when writing javascript library

2 Answers 2

7 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related