Niste ograničeni na jednu klasu CSS po elementu.
Cascading Style Sheets (Cascading Style Sheets) (Cascading Style Sheets) (Cascading Style Sheets) (Cascading Style Sheets - Cascading Style Sheets - Cascading Style Sheets - Cascading Style Sheets - Cascading Style Sheets - Cascading Style Sheets - Cascading Style Sheets - Cascading Style Sheets Ti atributi mogu biti i ID ili klasa i, kao i svi atributi, dodaju korisne informacije elementima na koje su pridruženi. Ovisno o tome koji atribut dodate elementu, možete napisati CSS selektor kako biste primijenili potrebne vizualne stilove koji su potrebni za postizanje izgleda i dojma za taj element i web stranicu u cjelini.
Dok ID-ovi ili klase rade u svrhu spajanja u njih s CSS pravilima, moderne metode web-dizajna omogućuju nastavu preko ID-ova, dijelom, jer su manje specifične i lakše raditi s cjelokupnim. Da, i dalje ćete pronaći mnoge web-lokacije koje upotrebljavaju ID-ove, ali ti se atributi primjenjuju manje štedljivo nego u prošlosti, dok su klase preuzele moderne web stranice.
Jednokratni ili višestruki predmeti u CSS-u?
U većini slučajeva dodijelite jedan element klase elementu, ali zapravo niste ograničeni na samo jednu klasu na način na koji se nalazite s ID-ovima. Dok element može imati samo jedan ID atribut, apsolutno možete dati element više klasa i, u nekim slučajevima, to će učiniti vašu stranicu lakšom za stil i mnogo fleksibilnija!
Ako morate dodijeliti više klasa elementu, dodajte dodatne klase i jednostavno ih odvojite prostorom u svojem atributu.
Na primjer, ovaj stavak ima tri klase:
pullquote featured left "> Ovo bi bio tekst odlomka
To određuje sljedeće tri klase na oznaku odjeljka:
- Pullquote
- Istaknuti
- Lijevo
Primjetite razmake između svake od tih klasa vrijednosti. Ti su prostori ono što ih postavlja kao različite, individualne klase. To je također razlog zašto nazivi klasa ne mogu imati prostore u njima, jer bi ih tako postavili kao zasebne klase.
Na primjer, ako ste koristili "leftquot-istaknuto-lijevo" bez prostora, to bi bila jedna vrijednost klase, ali gore navedeni primjer, gdje su te tri riječi odvojene razmakom, postavlja ih kao pojedinačne vrijednosti. Važno je razumjeti taj koncept dok odlučite koje klase vrijednosti upotrebljavati na svojim web stranicama.
Nakon što svoje vrijednosti klase imate u HTML-u, možete ih dodijeliti kao klase u CSS-u i primijeniti stilove koje želite dodati. Na primjer.
.pullquote {...}
.praćen {...}
p.left {...}
U tim primjerima, CSS deklaracije i vrijednosti parova bi se nalazile unutar kovrčastih zagrada, što znači kako bi se ti stilovi primijenili na odgovarajući selektor.
Napomena - ako postavite klase određenom elementu (na primjer, p.left), još uvijek ga možete koristiti kao dio popisa klasa; međutim, imajte na umu da će to utjecati samo na one elemente koji su navedeni u CSS-u. Drugim riječima, stil p.left primjenjivat će se samo na stavke s ovom klasi, budući da vaš birač zapravo kaže da ga primjenjuje na "stavke s klasičnom vrijednosti" lijevo "". Nasuprot tome, druga dva odabira u primjeru ne navode određeni element pa će se primijeniti na bilo koji element koji koristi te vrijednosti klase.
Prednosti više klase
Više klasa može olakšati dodavanje posebnih efekata elementima bez potrebe za stvaranjem cijelog novog stila za taj element.
Na primjer, možda želite imati brzinu za pokretanje elemenata s lijeve ili desne strane . Možete zapisati dvije klase lijevo i desno uz samo plutajuće: lijevo; i plutaju: pravo; u njima. Zatim, kad god imate element koji treba lebdjeti lijevo, jednostavno biste dodali klasu "lijevo" na popis klase.
Ipak, tu je dobra linija za hodanje. Zapamtite da web standardi diktiraju odvajanje stila i strukture. Struktura se obrađuje putem HTML-a dok je stil u CSS-u.
Ako je vaš HTML dokument ispunjen elementima koji svi imaju nazive klase poput "crvene" ili "lijevo", a to su imena koja diktiraju kako elementi trebaju izgledati, a ne ono što jesu, prelazite tu liniju između strukture i stila. Pokušavam ograničiti svoje ne-semantičke nazive klase što je više moguće zbog toga.
Više klase, semantika i JavaScript
Još jedna prednost u korištenju više klasa je da vam pruža mnogo mogućnosti za interaktivnost.
Možete primijeniti nove klase postojećim elementima pomoću JavaScript-a bez uklanjanja bilo koje početne klase. Također možete koristiti klase za definiranje semantike elementa . To znači da možete dodati dodatne klase kako biste definirali što taj element znači semantički. Na taj način djeluje Microformats.
Nedostaci više klase
Najveći nedostatak korištenja više klasa na vašim elementima je taj što ih može učiniti neznatnim za gledanje i upravljanje vremenom. Moglo bi biti teško odrediti koji stilovi utječu na element i ako to utječe na skripte. Mnogi od danas dostupnih okvira, kao što je Bootstrap, teško se koriste elementima s više klasa. Taj kod može izaći iz ruke i teško raditi vrlo brzo ako niste oprezni.
Kada koristite više klasa, također riskirate da stil za jednu klasu nadjačate stil drugog, čak i ako niste namjeravali. To onda može otežati shvatiti zašto se vaši stilovi ne primjenjuju čak ni kad se čini da bi trebali.
Morate biti svjesni specifičnosti, čak i sa atributima koji se primjenjuju na taj jedan element!
Pomoću alata kao što su alati za webmastere u pregledniku Chrome lakše ćete vidjeti kako klase utječu na vaše stilove i izbjeći taj problem sukobljenih stilova i atributa.
Izvorni članak Jennifer Krynin. Uredio je Jeremy Girard na 8/7/17