Vi ne estas limigita al sola CSS-klaso per ero.
Cascading Style Sheets (CSS) permesas al vi difini la aspekton de elemento per enkroĉado al la atributoj, kiujn vi aplikas al tiu elemento. Ĉi tiuj atributoj povas esti aŭ ID aŭ klaso kaj, kiel ĉiuj atributoj, ili aldonas helpemajn informojn al la elementoj, al kiuj ili aliĝas. Dependanta de kiu atribuo vi aldonas al elemento, vi povas skribi CSS-elektilon por apliki la necesajn vidajn stilojn necesajn por atingi la aspekton kaj senton por tiu elemento kaj la retejo ĝenerale.
Dum aŭ ID aŭ klasoj funkcias por engaĝi ilin kun CSS-reguloj, moderna retejo-dezajnaj metodoj favoras klasojn super IDoj, parte, ĉar ili estas malpli specifaj kaj pli facilaj por labori kun ĝenerala. Jes, vi ankoraŭ trovos multajn ejojn, kiuj uzas IDojn, sed tiuj atributoj estas pli aplike aplikataj ol en la pasinteco dum klasoj prenis modernajn retpaĝojn.
Single aŭ Multoblaj Klasoj en CSS?
Plejofte vi atribuus unu klasan atributon al ero, sed vi efektive ne limigas al nur unu klaso, kiel vi estas kun ID. Dum elemento povas nur havi ununura ID-atributo, vi povas absolute doni elementon multoblajn klasojn kaj, en iuj kazoj, tiel faros vian paĝon pli facila al stilo kaj multe pli fleksebla!
Se vi bezonas asigni plurajn klasojn al elemento, vi povas aldoni la aldonajn klasojn kaj simple apartigi ilin per spaco en via atributo.
Ekzemple, ĉi tiu alineo havas tri klasojn:
pullquote featured left "> Ĉi tiu estus la teksto de la alineo
Ĉi tio agordas la jenajn tri klasojn en la alinea etikedo:
- Pullquote
- Prezentita
- Maldekstra
Rimarku la spacojn inter ĉiu el ĉi tiuj klasaj valoroj. Tiuj spacoj estas kio starigas ilin kiel malsamaj, individuaj klasoj. Ĉi tio ankaŭ estas, kial klasaj nomoj ne povas havi spacojn en ili, ĉar tiel agordi ilin kiel apartaj klasoj.
Ekzemple, se vi uzus "pullquote-elstara-maldekstre" sen spaco, ĝi estus unu klasa valoro, sed la ekzemplo supre, kie ĉi tiuj tri vortoj estas apartigitaj kun spaco, starigas ilin kiel individuajn valorojn. Gravas kompreni ĉi tiun koncepton, kiel vi decidas, pri kiu klaso valoroj uzu en viaj retpaĝoj.
Unufoje vi havas viajn klasajn valorojn en HTML, vi povas tiam atribui ĉi tiujn kiel klasojn en via CSS kaj apliki la stilojn, kiujn vi volas aldoni. Ekzemple.
.pullquote {...}
.featured {...}
p.left {...}
En ĉi tiuj ekzemploj, la CSS-deklaroj kaj valoraj paroj estus ene de la buklaj krampoj, kiaj tiuj stiloj estus aplikitaj al la taŭga elektilo.
Notu - se vi agordas klason al specifa elemento (ekzemple, p.left), vi ankoraŭ povas uzi ĝin kiel parton de listo de klasoj; tamen, konsciu, ke ĝi nur influos tiujn elementojn, kiuj estas specifitaj en la CSS. Alivorte, la p.left-stilo nur aplikos al alineoj kun ĉi tiu klaso, ĉar via elektilo vere diras apliki ĝin al "alineoj kun klasa valoro de" maldekstra ". Kontraŭe, la aliaj du elektiloj en la ekzemplo ne specifas iun elementon, do ili aplikus al iu ajn elemento, kiu uzas tiujn klasajn valorojn.
Avantaĝoj de Multoblaj Klasoj
Multoblaj klasoj povas pli facile aldoni specialajn efikojn al elementoj sen devi krei tutan novan stilon por tiu elemento.
Ekzemple, vi eble volas havi kapablon flosi elementojn maldekstren aŭ dekstre rapide. Vi povus skribi du klasojn maldekstre kaj dekstre kun nur flosado: maldekstre; kaj flosi: dekstre; en ili. Tiam, kiam ajn vi havas elementon, kiun vi devas flosi maldekstren, vi simple aldonos la klason "maldekstren" al ĝia klasa listo.
Tamen estas bona linio por marŝi ĉi tien. Memoru, ke interretaj normoj diktas la disiĝon de stilo kaj strukturo. Strukturo estas manipulita per HTML dum stilo estas en CSS.
Se via HTML-dokumento estas plena de elementoj, kiuj ĉiuj havas klasajn nomojn kiel "ruĝaj" aŭ "maldekstraj", kiuj estas nomoj kiuj diktas kiel elementoj aspektas pli ol ol ili, vi transiras tiun linion inter strukturo kaj stilo. Mi provas limigi miajn ne-semantajn klasajn nomojn kiel eble plej multe por ĉi tiu kialo.
Multoblaj klasoj, semantiko kaj JavaScript
Alia avantaĝo por uzi multoblajn klasojn estas, ke ĝi donas al vi multajn pli da interagaj eblecoj.
Vi povas apliki novajn klasojn al ekzistantaj elementoj uzante JavaScript sen forigo de iu ajn el la komencaj klasoj. Vi povas ankaŭ uzi klasojn por difini la semantikon de elemento . Ĉi tio signifas, ke vi povas aldoni suplementajn klasojn por difini, kion signifas tiu elemento semantike. Jen kiel funkcias Microformats.
Malavantaĝoj de Multoblaj Klasoj
La plej granda malavantaĝo por uzi multoblajn klasojn sur viaj elementoj estas, ke ĝi povas ilin iomete malhelpe rigardi kaj administri laŭlonge de la tempo. Eble malfacile determinas, kion stiloj influas elementon kaj se iuj skriptoj efikas ĝin. Multaj el la kadroj disponeblaj hodiaŭ, kiel Bootstrap, faras pezan uzon de elementoj kun multnombraj klasoj. Tiu kodo povas eksterordinare kaj malfacile labori tre rapide se vi ne zorgas.
Kiam vi uzas multoblajn klasojn, vi ankaŭ kuras la riskon de havi la stilon por unu klaso forĵetas la stilon de alia eĉ se vi ne intencis ĉi tion. Ĉi tio tiam povas malfaciligi kompreni kial viaj stiloj ne aplikiĝas eĉ kiam ĝi aspektas, ke ili devus.
Vi devas esti konscia pri specifeco, eĉ kun la atributoj aplikitaj al tiu elemento!
Uzante ilon kiel la TTT-maŝinaj iloj en Chrome, vi povas pli facile vidi kiel viaj klasoj influas viajn stilojn kaj evitas ĉi tiun problemon de konfliktantaj stiloj kaj atributoj.
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 8/7/17