Katram elementam jūs ne tikai ierobežojat vienu CSS klasi.
Kaskādes stila lapas (CSS) ļauj definēt elementa izskatu, pieslēdzoties atribūtiem, kurus jūs lietojat šim elementam. Šie atribūti var būt gan ID, gan klase, un, tāpat kā visi atribūti, tie pievieno noderīgu informāciju tiem elementiem, kuriem tie ir pievienoti. Atkarībā no tā, kuru elementu pievienojat, jūs varat rakstīt CSS selektoru, lai izmantotu nepieciešamos vizuālos stilus, kas nepieciešami, lai sasniegtu izskatu un izjūtu šim elementam un visai vietnei kopumā.
Kaut gan ID vai klases strādā, lai tos piesaistītu ar CSS noteikumiem, mūsdienu web dizaina metodes daļēji atbalsta klases vairāk nekā ID, jo tās ir mazāk specifiskas un vieglāk kopumā strādāt. Jā, jūs joprojām atradīsit daudzas vietnes, kurās tiek izmantoti ID, bet šie atribūti tiek pielietoti mazāk taupīgi nekā agrāk, kamēr klases ir pārņēmušas mūsdienu tīmekļa lapas.
Viena vai vairākas klases CSS?
Lielākajā daļā gadījumu elementam tiek piešķirts viena klases atribūts, taču jūs patiesībā neesat ierobežots tikai ar vienu klasi, kā jūs ar ID. Kaut arī elementam var būt tikai viens ID atribūts, jūs varat pilnīgi piešķirt elementu vairākām klasēm, un dažos gadījumos tas padarīs jūsu lapu vieglāku un daudz elastīgāku!
Ja elementam ir jāpiešķir vairākas klases, varat pievienot papildu klases un tos vienkārši atdalīt ar atribūtu atstarpi.
Piemēram, šim punktam ir trīs klases:
pullquote featured left "> Tas būtu teksta punkts
Tas nosaka sekojošās trīs klases par rindkopas tagu:
- Pullquote
- Featured
- Pa kreisi
Norādiet atstarpes starp katru no šīm klases vērtībām. Šīs telpas ir tas, kas tos veido kā atšķirīgas, atsevišķas klases. Tāpēc arī klases nosaukumos nevar būt atstarpes, jo to darot, tie tiktu noteikti kā atsevišķas klases.
Piemēram, ja jūs izmantojāt "pulksteņu attēlā kreiso" bez atstarpes, tas būtu viena klases vērtība, bet iepriekšējais piemērs, kurā šie trīs vārdi ir atdalīti ar atstarpi, nosaka tos kā atsevišķas vērtības. Ir svarīgi saprast šo jēdzienu, kad izlemjat, kuras klases vērtības izmantot jūsu tīmekļa lapās.
Kad jūsu klases vērtības ir HTML, jūs varat tos klasificēt kā klases savā CSS un piemērot stilus, kurus vēlaties pievienot. Piemēram.
.pullquote {...}
.featured {...}
p.pa pa kreisi {...}
Šajos piemēros CSS deklarācijas un vērtību pāri atrodas cirtainās lentes iekšpusē, un tas nozīmē, ka šie stili jāpiemēro attiecīgajam atlasītājam.
Piezīme. Ja jūs nosakāt klasi kādam konkrētam elementam (piemēram, p. Pa kreisi), to joprojām varat izmantot kā daļu no klases saraksta; tomēr ņemiet vērā, ka tas ietekmēs tikai tos elementus, kas ir norādīti CSS. Citiem vārdiem sakot, p.auto stils attiecas tikai uz punktiem ar šo klasi, jo selektors patiešām saka, ka to jāpiemēro "punktiem ar klases vērtību" pa kreisi ". Savukārt pārējie divi atlases piemēri neprecizē noteiktu elementu, tādēļ tie attiecas uz jebkuru elementu, kas izmanto šīs klases vērtības.
Vairāku klašu priekšrocības
Vairākas klases var atvieglot elementu pievienošanu īpašiem efektiem, neradot pilnīgi jaunu stilu šim elementam.
Piemēram, jūs, iespējams, vēlēsities ātrāk peldēt elementus pa kreisi vai pa labi . Jūs varētu rakstīt divas klases pa kreisi un pa labi ar tikai peldēt: pa kreisi; un peldēt: pa labi; viņos. Pēc tam, kad jums bija elements, kas nepieciešams, lai pārietu uz kreiso pusi, jūs vienkārši pievienotu klasei "pa kreisi" savā klases sarakstā.
Tomēr šeit ir gluda līnija. Atcerieties, ka tīmekļa standarti nosaka stilu un struktūru nošķiršanu. Struktūra tiek apstrādāta caur HTML, kamēr stils ir CSS.
Ja jūsu HTML dokuments ir piepildīts ar elementiem, kuriem visiem ir klases nosaukumi, piemēram, "sarkans" vai "pa kreisi", kas ir vārdi, kas nosaka, kā elementi jāizskatās nevis tiem, kas tie ir, jūs šķērso šo līniju starp struktūru un stilu. Es cenšos ierobežot savus nesamantiskos klases vārdus, cik vien iespējams, šā iemesla dēļ.
Vairākas klases, semantika un JavaScript
Vēl viena priekšrocība vairāku klašu izmantošanai ir tas, ka tas dod jums daudz vairāk interaktivitātes iespēju.
Jūs varat izmantot jaunas klases esošajiem elementiem, izmantojot JavaScript, neizejot no kādas no sākotnējām klasēm. Jūs varat arī izmantot klases, lai noteiktu elementa semantiku . Tas nozīmē, ka jūs varat pievienot papildu klases, lai noteiktu, ko šis elements nozīmē semantiski. Tas ir veids, kā darbojas mikroformāti.
Vairākas klases trūkumi
Lielākais trūkums, lietojot vairākas klases jūsu elementiem, ir tas, ka tas var padarīt tos mazliet grūts, lai laiku pa laikam skatītos un pārvaldītu. Var rasties grūtības noteikt, kādi stili ietekmē elementu, un, ja kādi skripti to ietekmē. Daudzās mūsdienās pieejamās sistēmas, piemēram, Bootstrap, smagāk izmanto elementus ar vairākām klasēm. Šis kods var izkļūt no rokām un ļoti grūti strādāt, ja neesat uzmanīgs.
Ja izmantojat vairākas klases, jūs riskējat, ka vienas klases stils ignorē cita stila, pat ja jūs to neplānojat. Tad tas var apgrūtināt izdomāt, kāpēc jūsu stilu nepiemēro, pat ja šķiet, ka viņiem vajadzētu.
Jums ir jāapzinās specifika, pat ar atribūtiem, kas tiek piemēroti šim vienam elementam!
Izmantojot rīku, piemēram, pārlūkprogrammas Chrome tīmekļa pārziņa rīkus, varat vieglāk saprast, kā jūsu klases ietekmē jūsu stilus, un izvairīties no konflikta stilu un atribūtu problēmas.
Jennifera Krīnina oriģinālais raksts. Rediģējis Jeremijs Girards 7.7.17