Wêrom in ienfâldige komma makket kodearring
CSS, of Cascading Style Sheets, binne de akseptearre webside fan 'e web designbrûk om byldzjende stilen oan in side ta te foegjen. Mei CSS kinne jo side-layout, kleuren, typografy , eftergrûnôfbylding, en folle mear behearje. Yn essinsje, as it in fisuele styl is, dan is CSS de manier om dizze stilen nei jo webside te bringen.
As jo CSS-stilen tafoegje oan in dokumint, dan kinne jo bepale dat it dokumint begjint langer en langer te krijen. Sels in lytse side mei allinich in handich fan siden kin einigje mei in sizable CSS-bestân - en in hiel grut webstee mei in protte siden fan unike ynhâld kin hiel grutte CSS-bestannen hawwe. Dit wurdt ferpleatst troch reaktive siden dy't in soad media-fragen hawwe opnommen yn 'e stylblêden om te feroarjen hoe't de fisuele sjoggers sjogge en de side foar ferskate skermen lizze.
Ja, CSS-bestannen kinne lang duorje. Dit is net in grut probleem as it giet om it begjin fan 'e prestaasjes en downloaden fan snelheid, omdat sels in langere CSS-bestân wol wierskynlik lyts wêze kin (om't it krekt allinich in tekstdokumint is). Noch altyd tinkt alle lytse behearen as it giet om snelheid side, dus as jo jo stylblêd makeler meitsje kinne, dat is in goed idee. Dit is wêr't de "komma" yn jo stylblêd yn tige handich komme kin!
Commas en CSS
Jo miskien wist wat rol spielet yn de symaksifikaat CSS selektor. As yn sinnen bringt de komma dúdlikens - net koade - nei de skiedingsteken. De komma yn in CSS seleuere skiedt meardere seleksjes binnen deselde stilen.
Lûk bygelyks op wat CSS hjirûnder.
th {kleur: read; }
td {kleur: read; }
p.red {kleur: read; }
div # firstred {kleur: read; }
Mei dizze syntax, sizze jo dat jo tags, td- tags, paragraaf-tags mei de klasse reade wolle, en de div-tag mei de ID oanmakke allegear om de stylkleur rot te hawwen.
Dit is perfoarst akseptabel CSS, mar der binne twa grutte tekoarten om dit sa op te skriuwen:
- Yn 'e takomst, as jo besykje de lettertype kleur fan dizze eigenskippen te feroarjen oan blauwe, moatte jo dizze fjouwer kear wizigje yn jo stylblêd.
- It falt in soad ekstra tekens oan jo stylblêd dy't jo net nedich hawwe. Dizze 4 stilen meie net as oerkul sjogge, mar as jo trochgean dogge dit oer jo hiele stylblêd, sille de linen opnimme en dat blêd is folle, folle grutter dan it moat wêze.
Om dizze ûntbrekken te foarkommen en jo CSS-bestân te ferbetterjen kinne wy probearje mei gebrûk fan kommas.
Komeinen brûke om te selektearren te selektearjen
Ynstelle fan it skriuwen fan 4 ferskate CSS-seleksjes en 4 regels, kinne jo dizze stilen yn ien regel eigendom kombinearje troch te dielen fan de yndividuele seleksjes mei in komma. Hjir is hoe't dat dien wurde soe:
th, td, p.red, div # firstred {kleur: read; }
It komma-karakter is yn haadsaak as it wurd "en" yn 'e selektor. Dit jildt foar t h- tags AND td- tags AND paragraf-tags mei de klasse rote AND de div-tag mei de ID firstred. Dat is krekt wat wy hienen, mar ynstee fan 4 CSS regels nedich, hawwe wy in ienige regel mei meardere seleksjes. Dit is wat de komma docht yn 'e selector, it liedt ús meardere seleksjes yn ien regel te hawwen.
Net allinich makket dizze oanpak foar leanere, skjinne CSS-bestannen, it makket ek takomme fernijingen safolle makliker. No as jo de kleur fan reade nei blau wizigje wolle, dan moatte jo de wiziging op ien plak lizze ynstee fan de oarspronklike 4 stijl regels dy't wy hawwe! Tink oan dizze tiidbesparring oer in folsleine CSS-bestân en jo kinne sjen hoe't dit jo tiid en romte yn 'e lange rûn besparret!
Syntaksfariation
Guon minsken kieze om de CSS lêsber te meitsjen troch elk seleksje te selektearjen op 'e eigen line, ynstee fan alles op ien rigel as hjirboppe. Dit is hoe't dat dien wurde soe:
th,
td,
p.red,
div # firstred
{
kleur: read;
}
Tink derom dat jo in komma pleatse nei elke selector en brûke dan "yntype" om de folgjende selector op in eigen line te brekken. Jo add NOT nei in ein komma nei de definitive seleksje.
Troch gebrûk fan komma's tusken jo seleksje te meitsjen, meitsje jo in kompakter stylblêd dat makliker te meitsjen yn 'e takomst en dat is makliker om hjoed te lêzen!
Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 5/8/17