Use duplicate class name on an element?

Question

I found that there are many frameworks that will check the duplicate class name before adding the new class name on the element which I think will slow down the performance.

Are there any problems when the element has a duplicate class name?

It will also apply the CSS class without conflict while the duplicate class name is in use.

<div class="aa bb cc aa"></div>

Is it OK to add a class name simply just like elem.className += ' ' + 'aa ee', even if the element has a duplicate class name?

Answer 1

There is nothing "wrong" with having a duplicate class name, it's just redundant. There's probably a small performance impact, but that'll only really make much difference if you have a lot of duplication.

Also, preventing duplicates just helps to keep things tidy.

Answer 2

Semantic UI heavily uses attribute selectors

like here

.ui.grid [class*="left floated"].column {
  margin-right: auto;
}
.ui.grid [class*="right floated"].column {
  margin-left: auto;
}

If you want margin-left and margin-right to have the auto value, you must have a duplicate of the classname segment floated (ex. <div class="left floated right floated">Lorem</div>)