Dir sidd net limitéiert op eng eenzeg CSS Klasse pro Element.
Cascading Style Sheets (CSS) erméiglecht Iech d'Elemente vun engem Element ze definéieren andeems Dir d'Attributer ofgitt, déi Dir fir dësen Element befaasst. Dës Attributéiere kënnen entweder an ID oder enger Klass sinn a wéi all Attributairë sinn si hëllefreich Informatiounen iwwer d'Elementer déi se matenee verbonne sinn. Ofhängeg vun deem Attribut, deen Dir e Element addéiere kënnt, kënnt Dir e CSS selector schreiwen fir déi néideg visuell Stile anzebezéien, déi néideg sinn fir de Look and feel for that element an d'Websäit als Ganzt ze erreechen.
Obwuel Ids oder Klassen d'Ziler fir sech mat CSS Regelen opzehuelen, sinn d'modern Webdesmethoden Klassen iwwert d'IDe verbonnen, zum Deel, well se manner spezifësch sinn a méi einfach ze schaffen am Allgemengen. Jo, Dir wäert nach vill Siten fonnt ginn, déi Iddien benotzen, awer dës Attribute ginn méi sparsam applizéiert wéi an der Vergaangenheet, während d'Klassen iwwer modern Websäiten iwwerholl ginn.
Single oder méi Klassen op CSS?
In de meeschte Fäll géift Dir e klenge Attribut un engem Element zesummestellen, awer Dir sidd eigentlech net nëmmen enger Klasse limitéiert si se mat Identifikatioune mat. Wann e Element nëmmen een eenzegen ID Attribut hutt, kënnt Dir absolut Elementer a verschidde Klassen verëffentlechen, an a ville Fäll maachen et Är Säit méi einfach ze stylen a méi flexibler!
Wann Dir e puer Klassen op e Element ze verknëppele musst, kënnt Dir déi extra Klassen addéieren an einfach se mat engem Raum an Ärem Attribut trennen.
Zum Beispill dëse Paragraf huet dräi Klassen:
pullquote" ass lénks fonnt "> Dëst wier den Text vum Paragraf
Dëst setzt d'folgend dräi Klassen op de Paragraf:
- Pullequote
- Featured
- Lénks
Notice de Späicher tëscht all deer Klass. Déi Plazen si wat se ënnerscheeden, eenzel Klassen op. Dëst ass och datt d'Klassennummeren net Plazen an hinnen hunn, well se et als separate Klassen opgesat hunn.
Zum Beispill, wann Dir "Pull-Kee-Featured-Left" ouni Raum benotzt hutt, wär et e Klangwäert, awer d'Exemplar hei uewen, wou dës dräi Wierder mat engem Raum getrennt sinn, individuell Wäerter. Et ass wichteg, dëse Konzept ze verstoen, wéi Dir décidéiert wéi d'Klass Wäerter op Är Websäiten benotzen.
Wann Dir Är Klassenwerte an HTML hutt, kënnt Dir dës als Klassen an Ärem CSS uginn an d'Stile benotze fir datt Dir wëllt addéieren. Zum Beispill.
.ullulli {...}
.featured {...}
p.left {...}
An dësen Beispiller wäerten d'CSS-Deklaratiounen an d'Wäerter Pairen an de Curly-Klammern wären, wéi dës Stile am passende Wähler getraff ginn.
Notéieren - Wann Dir eng Klass an e spezifesche Element festleet (zum Beispill p.left), kënnt Dir se ëmmer nach als Deel vun enger Lëscht vun de Coursen benotzen; Dir musst awer bewosst datt et just déi Elementer beaflossen, déi an der CSS spezifizéiert sinn. An anere Wierder, de p.left Stil gëlt nëmme fir Paragrafen mat dëser Klass, well Ären Wähler tatsächlech soen, op "Paragraphen mat engem Klasswert vu 'lénks" anzebezéien. Am Géigesaz, sinn déi aner zwou Selecturen am Beispiel net e bestëmmten Element anzegoen, sou datt se op all Element benotzen, deen dës Klassenwerte benotzt.
Virdeeler vun e puer Klassen
Méi verschidde Klassen maachen et méi einfach, aner Effekter op Elemente ze addéieren, ouni datt e ganz neie Stil fir deem Element geschafe ginn ass.
Zum Beispill, Dir kënnt d'Fäh hunn d' Elemente lénks oder riets ze fléien . Dir schreift zwee Klassen lénks a riets mat just Schwämm: lénks; a fléien; an hinnen. Dann, wann Dir e Element hutt musst Dir musst lénks eropgoe loossen, da fanne mer einfach d'Klass "lénks" un d'Klass ze maachen.
Et ass eng fein Linn fir ze goen. Vergiesst datt d'Web Standards d'Trennung vum Stil an der Struktur diktéieren. Struktur ass iwwer HTML zougänglech, während Stil ass an CSS.
Wann Äre HTML-Dokument mat Elementer ass, déi all Klassennumm wéi "rote" oder "lénks" hunn, wéi d'Nimm déi diktéieren wéi d'Elementer ewech wéi dat sinn, kucken, da sidd Dir iwwert dës Linn tëscht Struktur a Stil. Ech probéieren dës net-semantesch Klassnamen sou vill wéi méiglech ze begréissen.
Méi Klassen, Semantik a JavaScript
Een anere Virdeel fir verschidde Klassen ze benotzen ass datt et Iech vill méi Interaktivitéit Méiglechkeeten gëtt.
Dir kënnt nei Klassen op existent Elementer benotzen ouni JavaScript ze benotzen, ouni datt Dir eng vun den initialen Klassen beseitzt. Dir kënnt och Klassen benotzen fir d' Semantik vun engem Element ze definéieren . Dëst bedeit datt Dir op weider Klassen fënns, fir ze definéieren wat dëst Element semantesch ass. Dëst ass wéi d'Mikroformat funktionnéiert.
Nodeel vun verschidde Klassen
De gréissten Nodeel fir verschidde Klassen op Äert Elementer ze benotzen ass datt et se e bëssen ongewinnt ze maachen an ze iwwerhuelen an ze iwwerhuelen. Et kann schwiereg ginn, festzeleeën, wéi Stiler direkt en Element beaflossen an wann eng Scripte beaflosst sinn. Viele vun de Kriibs, déi haut als "Bootstrap" verfügbar sinn, maachen vill Elementer mat verschidde Klassen. Dëse Code kann aus der Hand kommen an hou fir mat ganz séier ze schaffen, wann Dir net vläicht vläicht sidd.
Wann Dir verschidde Klassen benotzt, fuerdere mir och de Risiko datt de Stil fir eng Klasse vum Stil vun engem aneren iwwerschreide, och wann Dir net fir dës sidd. Dëst kann et dann schwéier schwätzen, firwat Är Stiler net opgedeckt ginn, och wann et schéngt, datt se sollten.
Dir musst wëssen datt d'Spezifitéit, och mat den Attributer, déi fir deen een Element applizéiert ginn!
Mat Hëllef vun engem Tool wéi de Webmaster Tools a Chrome kënnt Dir kucken, wéi Är Klassen Är Stiler aféieren a vermeiden dëse Problem vu konflikter Stiler an Attribut.
Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard am 8/7/17