CODEWITHSUNDEEP
css
JsCoder
JsCoder

Reputation: 1733

Avoiding conflicts for CSS Class Names

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?

Upvotes: 4

Views: 1628

Answers (3)

Taylor Brown
Taylor Brown

Reputation: 1776

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.

Upvotes: 1

Yotam Omer
Yotam Omer

Reputation: 15366

Start each class name with a plugin name prefix.

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

$(this).addClass('pluginName-mainBox');

Upvotes: 2

ebram khalil
ebram khalil

Reputation: 8321

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

Upvotes: 1

Related Questions