4

When developing a plugin, which is styled by CSS classes, what are some good approaches for making my class names non-conflicting with the existing CSS class names? Has anyone gave it a thought?

Improve this question
2
  • you could override it with another named stylesheet? Commented May 28, 2013 at 13:26
  • 4
    Maybe add a prefix to the classes used in the plugin Commented May 28, 2013 at 13:27

3 Answers 3

Reset to default
1

Start each class name with a plugin name prefix.

e.g. for a plugin named 'pluginName' and class 'mainBox' use:

$(this).addClass('pluginName-mainBox');
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

good, what if my plugin name isn't unique, good ones never are actually... I'm thinking of prefixing class names with Q876$12_ looking for alternatives.
Yes, if you believe you will still get into trouble you can use a series of predefined numbers & letters. some programmers use thier domain name etc..
0

i guess you can simply add you plugin-name or some of shortcut of it to each class you use.

like : .item into .x-item

Improve this answer

Comments

0

I will use the AJAX combobox CSS as an example:

.ajax__combobox_textboxcontainer
.ajax__combobox_textboxcontainer input
.ajax__combobox_buttoncontainer button
.ajax__combobox_itemlist

after the "." there is the name of the control kit, the double underscore, the name of the control, then the name of the part of that control that is being styled. It is very verbose and definitely helps to avoid conflict. I recommend using an approach like this.

Improve this answer

Comments