Czy łańcuchy klas CSS w taki sposób są ważne?

Question

Przez pewien czas polegałem na poniższej technice. Ale nie natknąłem się na to często i nie byłem w stanie znaleźć na ten temat informacji. Być może ma właściwe imię, którego nie znam? Nazywam to łańcuchowaniem, ponieważ wygląda dokładnie tak: łączenie nazw klas CSS razem. Ale w większości przypadków wykonuję wyszukiwanie w łańcuchach informacji o plonach na jQuery.

.button { 
    background-color:#ccc; 
} 
/* This is what I'm unsure of, notice there is no space between .button and .on */ 
/* If there were, .on apply to the child of .button, but that's not my intention */ 
.button.on { 
    background-color:#fff; 
} 

Pozwala mi używać pojedynczej nazwy klasy (on) do rozróżniania stanów wielu elementów.

<a class="button"></a> 
<a class="button on"></a> 
<a class="button-two"></a> 
<a class="button-two on"></a> 
<!-- etc... --> 

Jest bardzo poręczny z dynamicznych stron, kiedy trzeba włączyć klasę on na kilku elementów za pomocą jednego nazwę klasy.

Ale czy jest ważna?

Answer 1

To jest całkowicie poprawne CSS .... Chociaż IE6/i IE7 mają pewne problemy z łańcuchem klas.

Answer 2

Tak, jest poprawny CSS, chociaż nie działa poprawnie w IE6 - zastosuje tylko ostatnią klasę, a nie wszystkie. Możesz read more over at CSS-Tricks.com na ten temat.

Answer 3

Jest to całkowicie poprawne i bardzo powszechne.

Można zobaczyć go w tej samej strony:

a.comment-user.owner { 
    padding: 2px 5px; 
} 

Jednak IE6 zignoruje wszystko oprócz ostatniej klasie.
W wersji IE6 .a.b jest odpowiednikiem .b.