Te ei piirdu ühe CSS-i klassi iga elemendiga.
Kaskaadlaaditavate lehtede (CSS) abil saate määratleda elemendi välimust, hoides ära selle elemendi suhtes kohaldatavad atribuudid. Need atribuudid võivad olla nii ID-de kui ka klassi jaoks, ja nagu kõik atribuudid, lisavad nad nendele elementidele kasulikku teavet. Sõltuvalt sellest, millisele atribuudile olete elemendile lisanud, saate kirjutada CSS-valijat, et rakendada vajalikke visuaalseid stiile, mis on vajalikud selle elemendi ja kogu veebisaidi välimuse saavutamiseks.
Kuigi mõlemad ID-d või klassid töötavad CSS-i reeglite järgi nende ühendamiseks, tänapäevased veebidisaini meetodid eelistavad klasse üle ID-de, osaliselt seetõttu, et need on vähem spetsiifilised ja üldiselt kergem töötada. Jah, ikka leiate palju saite, mis kasutavad ID-sid, kuid neid atribuute rakendatakse aeglasemalt kui varem, kui klassid on üle tänapäevased veebilehed.
CSS ühe või mitme klassi?
Enamikul juhtudel määrate elemendile ühe klassi atribuudi, kuid te ei piirdu ainult ühe klassiga, mille puhul olete ID-dega. Kuigi elemendil on ainult üks ID-atribuut, saate elemendi täies ulatuses anda mitmesse klassi ja mõnel juhul muudab selle teie lehe lihtsamaks ja paindlikumaks!
Kui teil on vaja elemendile määrata mitu klassi, võite lisada lisaklassid ja lihtsalt eraldada need atribuudis tühikuga.
Näiteks sellel lõigul on kolm klassi:
pullquote featured left "> See oleks lõike tekst
See seab lõiketeksti juurde järgmised kolm klassi:
- Pullquote
- Esiletõstetud
- Vasak
Pange tähele tühikuid nende klassi väärtuste vahel. Need ruumid moodustavad need erinevatesse klassidesse. Seetõttu on ka klasside nimedes nendes ruumides ruumi, sest nii tuleks neid eraldi klassidena määrata.
Näiteks, kui kasutasite tühikuid "pullquote-featured-left", oleks see ühe klassi väärtus, kuid ülaltoodud näide, kus need kolm sõna on ruumiga eraldatud, seab need üksikväärtusteks. Selle põhimõtte mõistmine on oluline, kui otsustate, milliseid klassi väärtusi veebisaidid kasutada.
Kui sul on oma klassi väärtused HTML-is, võite oma CSS-is määrata need klassidena ja rakendada stiile, mida soovite lisada. Näiteks.
.pullquote {...}
.featured {...}
p.laua {...}
Nendes näidetes paiknevad CSS-i deklaratsioonid ja väärtuste paarid keermesõlmede sees, see tähendab, et need stiilid rakendatakse vastavale valijale.
Märkus - kui määrate klassi kindlale elemendile (näiteks p. Vasak), saate seda siiski kasutada klasside loendi osana; aga pidage meeles, et see mõjutab ainult neid elemente, mis on täpsustatud CSSis. Teisisõnu, p.left stiil kehtib ainult selle klassi paragrahvide kohta, sest teie selektor tegelikult ütleb, et seda rakendatakse "lõigetes, mille klassi väärtus on vasakul". Seevastu näite kaks ülejäänud valijat ei määra mingit kindlat elementi, nii et need oleksid kohaldatavad nende elementide suhtes, mis neid klassi väärtusi kasutavad.
Mitu klassi eelised
Mitme klassi abil on lihtsam lisada eriefekte elementidele, ilma et oleks vaja selle elemendi jaoks luua täiesti uue stiili.
Näiteks võite soovida, et võite hõlpsalt hõljuda elemente vasakule või paremale . Võite kirjutada kaks klassi vasakule ja paremale just ujukiga: vasakule; ja ujuk: õige; nendes. Seejärel, kui teil on elementi, mida vajate vasakule hõljumiseks, lisage oma klasside loendisse lihtsalt klass "vasakule".
Kuid siin on siin hea joon. Pidage meeles, et veebistandardid määravad stiili ja struktuuri eraldamise. Struktuuri käideldakse HTML-i kaudu, kui stiil on CSSis.
Kui teie HTML-dokument on täidetud elementidega, mille kõigil on sellised klassinimed nagu "punane" või "vasakul", mis on nimed, mis määravad, kuidas elemendid peaksid pigem välja nägema kui need, mida nad on, ületatakse see joon struktuuri ja stiili vahel. Sellepärast üritan piirata oma mittesemantilisi klassi nimesid nii palju kui võimalik.
Mitu klassi, semantika ja JavaScript
Veel üheks klasside kasutamise eeliseks on see, et see annab teile palju interaktiivsuse võimalusi.
Saate rakendada uusi klasse juba olemasolevatele elementidele, kasutades JavaScripti, ilma et eemaldaks ühtki esialgset klassi. Elemendi semantikat saab defineerida ka klasside kaupa. See tähendab, et saate lisada lisaklassidesse, et määratleda, mida see element semantiliselt tähendab. Nii töötab Microformats.
Mitu klassi puudused
Teie elementide mitut klassi kasutavateks probleemideks on kõige suurem puudus, sest see võib muuta ajaga veidi pikka aega vaadata ja hallata. Element võib mõjutada raskusi, kui stiilid mõjutavad elementi ja kui skriptid seda mõjutavad. Paljud olemasolevad raamistikud, nagu näiteks Bootstrap, kasutavad raskesti mitme klassiga elemente. See kood võib käest käsust välja võtta ja väga kiirelt töötada, kui te ei ole ettevaatlikud.
Kui kasutate mitut klassi, siis juhtub ka risk, et ühe klassi stiil sobib teise stiili üle, isegi kui te seda ei soovinud. See võib raskendada mõista, miks teie stiile ei kasutata isegi siis, kui tundub, et see peaks olema.
Peate olema teadlik spetsiifilisusest, isegi selle ühe elemendi jaoks kasutatavate atribuutidega!
Kasutades sellist tööriista nagu Chrome'i veebihalduri tööriistad, saate hõlpsamini näha, kuidas teie klassid teie stiile mõjutavad, ja vältida konflikti stiilide ja atribuutide probleemi.
Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard 7. ja 7.7