Jo binne net beheind ta ien CSS-klasse per elemint.
Cascading Style Sheets (CSS) jouwt jo in foarbyld fan in elemint te definiearjen troch te hokken yn 'e attributen dy't jo tapasse op dit elemint. Dizze eigenskippen kinne wurde as ID of in klasse wêze, en, lykas alle eigenskippen, taheakje se nuttige ynformaasje ta oan de eleminten dy't se oanfreegje. Ofhinklik fan hokker attribút jo in elemint oanmeitsje, kinne jo in CSS selector skriuwe om de needsaaklike fisuele stilen oan te passen dy't nedich binne om te sjen en te fielen foar dat elemint en de webside as gehiel.
Wylst ien of oare ID's of lessen wurkje foar it tapassen fan har yn CSS-regels, binne moderne web-ûntwerpmetoade foardielen foar klassen oer IDs, foar in part, om't se minder spesifyk binne en makliker te meitsjen mei algemien. Ja, jo sjogge noch folle siden dy't ID's brûke, mar dy eigenskippen wurde sprakeplichtiger brûkt as yn 'e ferline, wylst de lessen moderne websiden hawwe.
Single of Multiple Classes in CSS?
Yn 'e measte gefallen soene jo in ien-klasse-attribus oanmeitsje oan in elemint, mar jo binne eins net beheind ta ien klasse, hoe't jo binne mei ID's. Wylst in elemint allinich in single-identifikaat hawwe kinst, kinne jo in elemint meardere lessen elemint jaan en, yn guon gefallen, sa makket jo side makliker te styljen en folle mear fleksibel!
As jo mear klassen oan ien elemint oanmeitsje moatte jo ek de ekstra klassen taheakje en gewoane kinne mei in romte yn jo attribje.
Bygelyks hat dizze paragraaf trije klassen:
pullquote featured left "> Dit soe de tekst fan it paragraaf wêze
Dit set de neikommende trije lessen op it paragraaf tag:
- Pullquote
- Featured
- Links
Notice de romten tusken elk ien fan dizze klaswearden. Dy romtes is wat har as ferskillende, yndividuele lessen set. Dit is dus wêrom't klasse-nammen gjin spaasjes yn har hawwe, om't se dêrtroch as aparte klassen sette.
As jo bygelyks "pullquote-featured-left" sûnder romte brûke, dan soe it ien wurdich wurd wêze, mar it foarbyld hjirboppe, wêr't dizze trije wurden mei in romte skieden wurde, set har as yndividuele wearden. It is belangryk om dit konsept te begripen as jo beslute oer hokker klassearrings jo brûke wolle op jo webside.
Skean as jo jo klasde wearden yn HTML hawwe, kinne jo dizze as klassen yn jo CSS oantsjutte en de stilen brûke dy't jo taheakje wolle. Bygelyks.
.pullquote {...}
.featured {...}
p.left {...}
Yn dizze foarbylden sille de CSS deklaraten en wearden pearen binnen de heulendalpaden wêze, wat is hoe't dy stilen tapast wurde oan de passende selector.
Taljochting - as jo in klasse yn in bepaald elemint sette (bygelyks p.left), kinst it noch brûke as in part fan in list fan klassen; Jo kinne lykwols bewust wêze dat it allinich ynfloed op elke eleminten yn 'e CSS. Mei oare wurden, de p.left-styl sil allinich tapasse foar paragrafen mei dizze klasse omdat jo seleksje eigentlik seit tsjin it tapassen fan "paragrafen mei in klasse wearde fan 'lofts". Hjirtroch hawwe de oare twa seleksjes yn it foarbyld gjin bepaald elemint oantsjutte, sadat se tapasse ta elk elemint dat de klaswearden brûkt.
Advendo Multiple Classes
Mearfâldich lessen kinne it makliker meitsje fan spesjale effekten oan eleminten sûnder in nije styl te meitsjen foar dit elemint.
Jo kinne bygelyks de mooglikheid ha om eleminten op 'e lofter of rjochts fluch flot te hawwen. Jo kinne twa lessen litte en rjochtsjen mei gewoan float: lofts; en float: rjocht; yn harren. Dan, as jo in elemint ha, moatte jo links bliuwe, jo soene de klasse "lofts" taheakje oan har klasse list.
Der is in moaie line om hjir te rinnen. Tink derom dat websteeën diktearje foar de skieding fan styl en struktuer. Struktuer wurdt behannele fia HTML, wylst styl yn CSS is.
As jo HTML-dokumint folslein is mei eleminten dy't allegear klassnamen hawwe lykas "read" of "lofts", nammentlik binne nammen dy't eleminten sjen moatte, hoe eleminten sjogge as wat se binne, jo ferlykje dizze line tusken struktuer en styl. Ik besykje myn net-semyske klassike nammen sa folle mooglik te beheinen foar dizze reden.
Multiple classes, semantics and JavaScript
In oar foardiel fan meardere klassen brûke is dat it jo in protte mear ynteraktiviteit mooglikheden jout.
Jo kinne nije lessen brûke om besteande eleminten te brûken fan JavaScript, sûnder ien fan 'e earste lessen te foarkommen. Jo kinne ek klassen brûke om de semantika fan in elemint te definiearjen. Dit betsjuttest dat jo op oanfoljende klassen taheakje kinne om te definiearjen hokker elemint semantysk betsjut. Dit is hoe mikroformaten wurket.
Nêst fan Multiple Classes
De grutste neidiel foar it brûken fan meardere lessen op jo eleminten is dat it makket dat se in bytsje ûnwillich meitsje om te sjen en te behearen troch de tiid. It kin swier wurde om te bestimmen hokker stilen in elemint ynfloedzje en as der gjin skripts binne. In protte fan de hjoeddeistige kaders, lykas Bootstrap, meitsje swiere gebrûk fan eleminten mei meardere klassen. Dizze koade kin út 'e hân komme en is dreech om te wurkjen mei tige fluch as jo net foarsichtich binne.
As jo meardere lessen brûke, dan rjochtsje jo it risiko dat jo de styl foar ien klasse hawwe de styl fan in oar oer te setten, sels as jo dit net hawwe. Dit kin it dreech meitsje om te begripen wêrom't jo stilen net tapast wurde, sels as it ferskynt dat se moatte.
Jo moatte bewust wêze fan spesifikeiteit, sels mei de attributen dy't tapast wurde oan dat ien elemint!
Troch gebrûk fan in ark as de webmaster-ark yn Chrome, kinne jo makliker sjen hoe't jo lessen ynfloeden hawwe fan jo stilen en foarkomme dat probleem fan konfliktstilen en attributen.
Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 8/7/17