Css: does the same class repeat any behavior when an element changes?

Question

Mainly out of curiosity, I would like to know if there are any edge cases that may arise from such cases as:

<span class="class1 class2 class3 class2 class4">...</span> 

( class2 specified twice)

or

 <span class="class1 class2 class3 class2 class2 class2 class3 class4 class4 class3">...</span> 

(more extreme version of the same)

This is obviously messy css, not perfect, but are there any edge cases that this creates?

Answer 1

No, nothing at all , unless you have the habit of using the class attribute:

 [class="class1 class2"] { /* ... */ } 

instead:

 .class1.class2 { /* ... */ } 

which, of course, is a terrible practice.

---

Also, although your question is not tagged with javascript , note that if only the first instance of the class is deleted and an unlimited number is added, say:

 function addClass(element, cls) { element.className += ' ' + cls; } 

but

 function removeClass(element, cls) { return element.className.replace(cls, ' '); } 

this will cause problems more than one.

Answer 2

Fyi

browsers like firefox / chrome / ie9,

calculation of style contexts using the rule tree ,

if two rules have the same weight, origin and specificity, the one listed below in the stylesheet wins . so...

styles:

 .c1 {background:red;}.c1.c3 {background:blue;}.c2 {background:orange;} 

case1:

 <div class="c1 c1 c1"/><!-- background is red --> 

case2:

 <div class="c1 c2"/><div class="c2 c1 c2"/><!-- background is orange --> 

case3:

 <div class="c2 c1 c1 c2 c3"/><!-- background is blue --> 

Answer 3

No, there is nothing wrong with that, it seems strange. Any repeated occurrences of the class name will not affect anything. He does not “reapply” these styles after applying styles from a class defined before him or something else. Remember that CSS will always choose the style defined last for this level of specificity.

See jsFiddle and notice how class4 always overrides the font color, no matter what combinations of classes1, class2, and class3 are used.

Ultimately, it is perceived as a class of class class1, having class name2, having class name3 and having class name class4. Repeating them is like pressing the switch again. It is already selected, no need to click on it ...