Niste ograničeni samo na jednu CSS klasu po elementu.
Kaskadni listovi stilova (CSS) omogućavaju vam da definišete izgled elementa tako što ćete se uklopiti u atribute koje primenjujete na taj element. Ovi atributi mogu biti i ID ili klasa i, kao i svi atributi, dodaju korisne informacije elementima na koje su vezani. U zavisnosti od atributa kojeg dodate elementu, možete napisati CSS selektor kako biste primenili potrebne vizuelne stilove koji su potrebni da biste postigli izgled i osećaj za taj element i veb lokaciju u celini.
Dok oba ID-a ili klase rade u cilju upuštanja u CSS pravila, savremene metode web dizajna favorizuju klase preko ID-ova, delimično, jer su manje specifične i lakše za rad uopšte. Da, i dalje ćete pronaći mnoge stranice koje koriste ID-ove, ali se ti atributi primjenjuju umereno nego u prošlosti dok su klase preuzele moderne web stranice.
Pojedinačne ili višestruke klase u CSS-u?
U većini slučajeva dodelite jedan atribut pojedinačnom elementu, ali zapravo niste ograničeni na samo jednu klasu na način na koji ste sa ID-ima. Dok element može imati samo jedan atribut ID, možete apsolutno dati element više klasa i, u nekim slučajevima, to će učiniti vašu stranicu lakšu za stil i mnogo fleksibilnije!
Ako vam treba dodijeliti više klasa u neki element, možete dodati dodatne klase i jednostavno ih razdvojiti sa prostorom u vašem atributu.
Na primjer, ovaj pasus ima tri klase:
pullquote prikazan levo "> Ovo bi bio tekst stava
Ovo postavlja sledeće tri klase na oznaku pasusa:
- Pullquote
- Istaknuto
- Levo
Obratite pažnju na razmake između svake od ovih klasa vrednosti. Ovi prostori su ono što ih postavlja kao različite, pojedinačne klase. Ovo je takođe razlog zašto imena klasa ne mogu imati prostor u njima, jer bi to time postavljalo kao zasebne klase.
Na primjer, ako ste koristili "pullquote-featured-left" bez razmaka, to bi bila jedna klasa vrijednost, ali primjer gore, gdje su ove tri reči odvojene prostoru, postavlja ih kao pojedinačne vrijednosti. Važno je razumjeti ovaj koncept dok odlučujete o vrijednostima klase koje ćete koristiti na svojim web stranicama.
Jednom kada imate vrijednosti vaše klase u HTML-u, možete ih dodijeliti kao razrede u CSS-u i primijeniti stilove koje želite dodati. Na primjer.
.punquote {...}
.featured {...}
p.left {...}
U ovim primjerima, CSS deklaracije i vrednosti vrijednosti će biti unutar zavrtanj u obliku slova, a to je kako će se ti stilovi primijeniti na odgovarajući selektor.
Napomena - ako postavite klasu na određeni element (na primjer, p.left), i dalje ga možete koristiti kao dio liste klasa; međutim, budite svjesni da će to uticati samo na elemente koji su navedeni u CSS-u. Drugim rečima, stil p.left će se primenjivati samo na paragrafe sa ovom klasom pošto vaš selektor zapravo govori da ga primenjuje na "paragrafe sa vrijednošću klase" lijevo ". Nasuprot tome, druga dva selektora u primjeru ne određuju određeni element, tako da bi se primijenili na bilo koji element koji koristi te vrijednosti klase.
Prednosti više klasa
Višestruke klase mogu olakšati dodavanje posebnih efekata elementima bez stvaranja potpuno novog stila za taj element.
Na primer, možda ćete želeti da imate mogućnost brzo da plutate elemente levo ili desno . Možete pisati dve klase lijevo i desno samo sa float: lijevo; i plutaju: desno; u njima. Zatim, kad god imate element, morate lebdjeti levo, jednostavno ćete dodati klasu "lijevo" na svoju klasu.
Međutim, tu je i tanka linija za hodanje. Zapamtite da web standardi diktiraju razdvajanje stila i strukture. Struktura se obrađuje putem HTML-a dok je stil u CSS-u.
Ako je vaš HTML dokument ispunjen elementima koji imaju imena klasa kao što su "crvena" ili "leva", koja su imena koja diktiraju kako elementi trebaju izgledati pre nego što su oni, prelaze tu liniju između strukture i stila. Pokušavam da ograničim moje ne-semantičke nazive klasa što je više moguće iz tog razloga.
Više klasa, semantika i JavaScript
Još jedna prednost korištenja višestrukih klasa je to što vam daje mnogo više mogućnosti interaktivnosti.
Nove klase možete primijeniti na postojeće elemente koristeći JavaScript bez uklanjanja bilo koje početne klase. Možete koristiti i klase za definisanje semantike elementa . To znači da možete dodati na dodatne klase da definišete šta taj element znači semantički. Ovako radi mikroformati.
Nedostaci višestrukih klasa
Najveći nedostatak korištenja više klasa na vašim elementima je to što ih može učiniti malo opuštenim za gledanje i upravljanje vremenom. Može postati teško odrediti koji stilovi utiču na element i ako mu neki scenario utiče na njega. Mnogi od dostupnih okvira danas, kao što je Bootstrap, teže koriste elemente sa više klasa. Taj kod se može brzo izvući i vrlo teško raditi ako niste pažljivi.
Kada koristite višestruke klase, takođe rizikujete da stil za jednu klasu preklapa stil drugog, čak iako niste nameravali za to. Ovo onda može otežati razumevanje zašto se vaši stilovi ne primjenjuju čak i kada se čini da trebaju.
Morate biti svjesni specifičnosti, čak i sa atributima koji se primjenjuju na jedan element!
Korišćenjem alata kao što su Webmaster alati u Chrome-u, lakše možete videti kako vaše klase utiču na vaše stilove i izbjegavaju ovaj problem konfliktnih stilova i atributa.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 7/7/17