Waarom 'n eenvoudige komma vergemaklik kodering
CSS, of Cascading Style Sheets, is die webontwerpbedryf se aanvaarde manier om visuele style by 'n webwerf te voeg. Met CSS kan u bladuitleg, kleure, tipografie , agtergrond beeld, en nog baie meer beheer. Basies, as dit 'n visuele styl is, is CSS die manier om daardie style na jou webwerf te bring.
As jy CSS-style by 'n dokument voeg, kan jy dalk sien dat die dokument langer en langer begin kry. Selfs 'n klein webwerf met net 'n handjievol bladsye kan 'n aansienlike CSS-lêer beland - en 'n baie groot webwerf met baie bladsye met unieke inhoud kan baie groot CSS-lêers hê. Dit word vergemaklik deur reageerde webwerwe wat baie media-navrae in die stylevelle bevat om te verander hoe die beeldmateriaal lyk en die bladsy lê vir verskillende skerms.
Ja, CSS lêers kan lank word. Dit is nie 'n groot probleem met die prestasie van die werf en aflaai spoed nie, want selfs 'n lang CSS-lêer sal waarskynlik redelik klein wees (aangesien dit eintlik net 'n teksdokument is). Tog, elke klein dingetjie tel wanneer dit kom by blaaiepoed, dus as jy jou stylblad leiner kan maak, is dit 'n goeie idee. Dit is waar die "komma" baie handig kan wees in jou stylblad!
Kommas en CSS
Jy het dalk gewonder watter rol die komma speel in die CSS selector sintaksis. Soos in sinne, bring die komma duidelikheid - nie kode nie - na die skeiers. Die komma in 'n CSS selector skei verskeie keurders binne dieselfde style.
Kom ons kyk byvoorbeeld na 'n paar CSS hieronder.
th (kleur: rooi; }
td {kleur: rooi; }
p.red (kleur: rooi; }
div # firstred (kleur: rooi; }
Met hierdie sintaksis, sê jy dat jy tags wil hê, td- tags, paragraafetikette met die klasrooi, en die div-tag met die ID het almal die stylkleur rooi.
Dit is volmaak aanvaarbare CSS, maar daar is twee beduidende nadele om dit so te skryf:
- In die toekoms, as jy besluit om die fontkleur van hierdie eienskappe te verander, moet jy dit vier keer in jou stylblad verander.
- Dit voeg baie ekstra karakters by jou stylblad wat jy nie nodig het nie. Hierdie 4 style lyk dalk nie as oorskiet nie, maar as jy voortgaan om dit oor jou hele stylblad te doen, sal die lyne optel en dit sal veel, veel groter wees as wat dit nodig is.
Om hierdie nadele te vermy, en om jou CSS-lêer te vaartbelyn, sal ons probeer om kommas te gebruik.
Gebruik kommas om skeidsregters te skei
In plaas daarvan om 4 afsonderlike CSS-keurders en 4 reëls te skryf, kan jy al hierdie style in een reël-eiendom kombineer deur die individuele keurders met 'n komma te skei. Hier is hoe dit gedoen sal word:
th, td, p.red, div # firstred {kleur: rooi; }
Die kommakarakter tree basies op as die woord "en" in die selector. So dit geld ook vir t h tags EN td tags EN paragraaf tags met die klas rooi EN die div tag met die ID firstred. Dit is presies wat ons voorheen gehad het, maar in plaas van 4 CSS-reëls, het ons 'n enkele reël met verskeie keurders. Dit is wat die komma in die selector doen, dit laat ons toe om verskeie keurders in een reël te hê.
Nie net beteken hierdie benadering vir slanker, skoner CSS lêers nie, dit maak ook toekomstige opdaterings soveel makliker. As jy nou die kleur van rooi na blou wil verander, moet jy die verandering op een plek verander in plaas van oor die oorspronklike 4-styl reëls wat ons gehad het! Dink aan hierdie tydsbesparings oor 'n hele CSS-lêer en jy kan sien hoe dit jou sowel tyd as ruimte in die langtermyn sal red!
Sintaksevariasie
Sommige mense kies om die CSS meer leesbaar te maak deur elke selector op sy eie lyn te skei, in plaas daarvan om dit alles op een lyn soos hierbo te skryf. So sal dit gedoen word:
ste,
td,
p.red,
div # firstred
{
kleur: rooi;
}
Let daarop dat jy na elke selector 'n komma plaas en dan "enter" gebruik om die volgende selector op sy eie lyn te breek. Jy voeg NIE 'n komma na die finale keurder toe nie.
Deur kommas tussen jou keurders te gebruik, skep jy 'n kompakte stylblad wat makliker in die toekoms kan werk, en dit is makliker om vandag te lees!
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 5/8/17