Conflict avoidance for CSS class names

Question

When developing a plugin that is being developed by CSS classes, what are some good approaches so that my class names do not conflict with existing CSS class names? Has anyone thought about this?

Answer 1

Run each class name with the plugin name prefix.

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

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

Answer 2

I think you can simply add the plugin name or some of its shortcuts to each class that you use.

like: .item in .x-item

Answer 3

I use AJAX CSS as an example:

 .ajax__combobox_textboxcontainer .ajax__combobox_textboxcontainer input .ajax__combobox_buttoncontainer button .ajax__combobox_itemlist 

after "." there is the name of the control set, double underline, the name of the control, and then the name of the part of this control that is created in the style. This is very verbose and definitely helps to avoid conflict. I recommend using this approach.