Niste omejeni na en sam razred CSS na element.
Kaskadni listi slogov (CSS) vam omogočajo, da določite videz elementa tako, da vklopite v atribute, ki jih uporabljate za ta element. Ti atributi so lahko bodisi ID ali razred in, tako kot vsi atributi, dodajo koristne informacije elementom, na katere so priključeni. Glede na to, kateri atribut dodate elementu, lahko napišete izbirnik CSS, da uporabite potrebne vizualne sloge, ki so potrebni za doseganje videza in občutka za ta element in spletna stran kot celoto.
Medtem ko bodisi ID-ji ali razredi delujejo z namenom, da se jih vpišejo v pravila CSS, sodobne metode spletnega oblikovanja delijo prednostne razrede nad ID-ji, deloma zato, ker so manj specifične in lažje delajo s splošno. Da, še vedno boste našli veliko spletnih mest, ki uporabljajo ID-je, vendar se ti atributi uporabljajo bolj varčno kot v preteklosti, medtem ko so razredi prevzeli sodobne spletne strani.
Enotni ali več razredov v CSS?
V večini primerov dodelite posamezen atribut razredu elementu, vendar dejansko niste omejeni na samo en razred tako, kot ste z ID-ji. Medtem, ko ima element lahko samo en atribut ID, lahko absolutno daste element več razredov in v nekaterih primerih to naredi vašo stran lažje slog in veliko bolj prilagodljivo!
Če morate elementu dodeliti več razredov, lahko dodate dodatne razrede in jih preprosto ločite s presledkom v svojem atributu.
Ta odstavek ima na primer tri razrede:
pullquote označen levo "> To bi bilo besedilo odstavka
Na oznaki odstavka so naštete tri razrede:
- Pullquote
- Predstavljen
- Levo
Opazujte presledke med vsako od teh razrednih vrednosti. Ti prostori so tisti, ki jih postavljajo kot različni, posamezni razredi. To je tudi razlog, zakaj imena razredov ne morejo imeti presledkov v njih, ker bi to naredili kot ločene razrede.
Če ste na primer uporabili »pullquote-featured-left« brez prostora, bi bila to ena vrednost razreda, vendar zgornji primer, kjer so te tri besede ločene s presledkom, jih nastavi kot posamezne vrednosti. Pomembno je razumeti ta koncept, ko se odločate za katere razredne vrednosti uporabite na svojih spletnih straneh.
Ko v HTML-ju imate svoje razredne vrednosti, jih lahko dodelite kot razrede v vašem CSS-u in uporabite sloge, ki bi jih radi dodali. Na primer.
.pulknite {...}
.featured {...}
p.left {...}
V teh primerih bi bili CSS deklaracije in vrednostni pari znotraj zavihanih zavihkov, to je, kako bi bili ti slogi uporabljeni pri ustreznem selektorju.
Opomba - če nastavite razred na določen element (na primer p.left), ga lahko še vedno uporabljate kot del seznama razredov; vendar se zavedajte, da bo vplivala samo na tiste elemente, ki so določeni v CSS. Z drugimi besedami, slog p.left bo veljal samo za odstavke s tem razredom, ker vaš selektor dejansko pravi, da ga uporabijo za "odstavke z vrednostjo razreda" levo "". Nasprotno pa druga dva izbirnika v primeru ne določata določenega elementa, zato bi veljali za vsak element, ki uporablja te razredne vrednosti.
Prednosti več razredov
Več razredov lahko olajša dodajanje posebnih učinkov elementom, ne da bi za ta element ustvarili popolnoma nov slog.
Na primer, boste morda želeli imeti možnost hitro premikanje elementov v levo ali desno . Lahko napišete dva razreda levo in desno s samo plavajočim: levo; in plava: desno; v njih. Potem, ko ste imeli element, ki ga morate lebdeti v levo, bi preprosto dodali razred "levo" na seznam razredov.
Toda tu je tanka črta. Ne pozabite, da spletni standardi narekujejo ločitev sloga in strukture. Struktura se obravnava prek HTML-ja, medtem ko je slog v CSS-u.
Če je vaš HTML dokument napolnjen z elementi, ki imajo vsa imena razredov, kot so "rdeča" ali "leva", ki so imena, ki narekujejo, kako naj elementi izgledajo in ne, kakšne so, prečkate to črto med strukturo in slogom. Zaradi tega razloga skušam čim bolj omejiti imena ne-semantičnih razredov.
Več razredov, semantike in JavaScript
Druga prednost uporabe več razredov je, da vam daje veliko več možnosti za interaktivnost.
Nove razrede lahko uporabite za obstoječe elemente, ki uporabljajo JavaScript, ne da bi odstranili katerega koli začetnega razreda. Za definiranje semantike elementa lahko uporabite tudi razrede. To pomeni, da lahko dodate na dodatne razrede, da določite, kaj ta element pomeni semantično. Tako deluje Mikrofon.
Slabosti več razredov
Največja pomanjkljivost pri uporabi več razredov na elementih je, da jih lahko naredi malo grobo, da bi sčasoma pogledali in upravljali. Morda bo težko ugotoviti, kateri slogi vplivajo na element in če kateri koli skripti vplivajo na to. Številni okviri, ki so na voljo danes, kot je Bootstrap, močno uporabljajo elemente z več razredi. Ta koda lahko pride iz rok in težko dela z zelo hitro, če niste previdni.
Če uporabljate več razredov, tudi tvegate, da bo slog za en razred preglasil slog drugega, tudi če tega niste nameravali. To lahko potem oteži ugotoviti, zakaj se vaši slogi ne uporabljajo, tudi če se zdi, da bi morali.
Morate se zavedati specifičnosti, tudi z atributi, uporabljenimi za ta element!
Z orodjem, kot so orodja za spletne skrbnike v Chromu, lahko lažje vidite, kako vaši razredi vplivajo na vaše sloge in se izogibajte tej težavi konfliktnih slogov in atributov.
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 7.8.17