Stosowanie kilku klas - czy naprawdę niezbędne?

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

W CSS możliwe jest przyporządkowanie elementowi paru klas, rozdzielając ich nazwy spacjami. Wygląda przykładowo to tak:

<div class="body multicolumn decorated">...</div>
<span class="unimportant striked">Jakiś tekst</span>

Teraz dzięki tym paru deklaracjom możemy po pierwsze zadeklarować oddzielne style dla każdej z klas i łączyć w dowolne kombinacje. Po drugie możemy zadecydować, czy występowanie dwóch (albo i więcej) klas na raz ma włączać specjalne właściwości CSS, niedostępne pojedynczym odwołaniom.

W pierwszym przypadku moglibyśmy stworzyć fragment strony (dajmy na to) podzielony na kolumny i udekorowany (class="multicolumn decorated") obrazkiem oraz następny fragment z samym obazkiem i stylowaniem tekstu (class="body decorated").

Drugie zastosowanie jest możliwe przy pomocy selektora .klasa1.klasa2 (bez spacji pomiędzy).

Tyle tytułem wstępu dla mniej zaawansowanych w CSS-ie. Przechodzimy bowiem do pytania postawionego w tytule. Zastosowanie powyższej teorii w praktyce niewątpliwie mogłoby okazać się interesujące - gdyby było zawsze możliwe.

Praktyka jednak zazwyczaj nie ma litości dla niepełnego wsparcia CSS w przeglądarkach. IE/win do wersji 6 nie zrozumie odwołania do kilku klas jednocześnie - zastosuje jedynie ostatnią (dla .unimportant.striked tylko .striked). IE5/mac ma także problemy z wielokrotnymi klasami - spacje powodują błędne dopasowywanie selektorów klas o podobnych nazwach.

Argumentem przemawiającym za stosowaniem wielokrotnych klas jest zmniejszenie ilości CSS i zwiększenie jego czytelności. Zgodzę się z ostatnim - lecz pierwszy cel możemy także łatwo osiągnąć za pomocą grupowania nowych selektorów po przecinku. Stosowanie kilku klas może być rozsądne w niektórych zastosowaniach, jednak większość przykładów użycia jest bezmyślnym kopiowaniem pewnych wzorców programistycznych - a dla końcowego użytkownika starszych wersji przeglądarek (zwłaszcza Explorera na Maca) niepotrzebnym problemem.

Nie namawiam do porzucenia na dobre zaprezentowanych możliwości - chciałbym tylko, aby nie stosować rozbijania reguł stylów na klasy wszędzie gdzie się da. Oprócz tej techniki istnieje też wspomniane wyżej grupowanie selektorów, które zarówno nic nie znaczy dla użytkownika, jak i nie sprawia mu problemów.

Tagi wpisu: browsers, css, ie, ie5mac, ie6, multiple-classes

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 06 lipca 2006 o 00:31

Kategorie: CSS, Internet Explorer, Standardy sieciowe

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

Michał Moroz 1 06 lipca 2006, 00:56

Ale przecież klasy:

.class1{... }
.class2{... }

i konstrukcje <span class="class1 class2"/>

dla IE5 są zrozumiałe.

Czemu od razu stosować .class1.class2, skoro są prostsze metody?
Ktos 2 06 lipca 2006, 09:22

Szczerze mówiąc to nie pamiętam abym kiedykolwiek stosował kilka klas w jednym elemencie.
kebe 3 06 lipca 2006, 09:37

Nie stosują bo nie wiedzą, że można... Stosowanie wielu klas ma swoje zalety ale nie można przesadzać.
Speedy 4 06 lipca 2006, 10:12

Ktos: Też rzadko stosuję, ostatnio w komentarzach do szablonu joggera, gdzie jest to najrozsądniejsze zastosowanie, jeśli chcemy ładnie podkolorować tło dla poszczególnych odpowiedzi:

<li class="comment1 owner"> ... </li>
<li class="comment2 guest"> ... </li>
<li class="comment1 jogger"> ... </li>

Michał Moroz: zgodzę się. Aplikując kilka klas do jednego elementu czasem bardzo uprościmy sobie kod. Chyba to lepsze niż zagnieżdżanie w sobie <div class="klasa1"><div class="klasa2">...</div></div>.

Stosowanie kilku klas nie jest poważnym problemem, ale trzeba pamiętać, żeby sprawdzić jak będzie to w praktyce funkcjonować.
warp. 5 06 lipca 2006, 10:14

ja często używam kilku klas jednocześnie, ale nie tylko po to, aby je stylować w ten sposób - raczej po to, żeby móc je potem wybrać przez getElementsByClassName

w przeciwnym musiałbym robić niezły divitis.

no ale oczywiście to zależy od tego, co robisz i jak bardzo crossbrowserowo musi być.
yar 6 06 lipca 2006, 11:03

Mi się ta technika przydała gdy miałem trzy kolumny z opływaniem na lewo i w ostatniej mogłem dopisać klasę, która robiła 'clear' bo stopka jeszcze czekała :D
Aule 7 06 lipca 2006, 14:05

Hym, a nie lepiej było juz w stopce to dopisać?
janu 8 06 lipca 2006, 23:50

A czy ja mogę się zapytać, o jakie wzorce programistyczne chodzi autorowi?
Radek N. 9 07 lipca 2006, 22:34

Wygodne jest IMHO np. takie zastosowanie:

.left { float: left; }
.right { float: right; }
.jakas-klasa { .... }

<a class="jakas-klasa left" ... >Link klasy .jakas klasa, do lewej</a>
<a class="jakas-klasa right" ... >Link klasy .jakas klasa, do prawej</a>

Wyobraźmy sobie, że mamy linki tak samo wyglądające, ale różnie wypozycjonowane. Bez korzystania z łączenia klas musimy podwajać css-y.