Firwat en einfachen Comma vereinfacht Kodéierung
CSS, oder Cascading Style Sheets, sinn d'Acceptie vum Webdesign fir eng visuell Stiler un eng Site. Mat CSS kënnt Dir Page Layout, Faarwen, Typografie , Hannergrond a méi vill kontrolléieren. Prinzipiell, wann et e visuell Stil ass, da sinn CSS den Wee fir dës Stile op Är Websäit ze bréngen.
Wéi Dir CSS Stiwwelen an e Dokument addéiere wëllt, kennt Dir vläicht datt de Dokument méi laang a länger kënnt. Och eng kleng Site mat nëmmen enger Handvoll vu Säiten ka mat enger grousser CSS-Datei ophalen - an e ganz grousse Site mat villen an vill Säiten vun eemolege Inhalt kann e grousst CSS-Fichier hunn. Dëst gëtt mat reaktiounsplazen verëffentlecht , déi vill Medien Ufroen, déi an de Stilbläist opgebaut sinn ze changéieren, fir wéi d'Visualis kucken an d'Säit fir verschidde Bildschirmer leien.
Jo, CSS Dateien kënne laang sinn. Dëst ass net e grousse Problem, wann et der Leeschtung vun der Site an der Downloadgeschwindigkeit komm ass, well souguer eng laang CSS-Datei wäert zimlech kleng sinn (well et just e Textdokum) ass. Niewt all kleng zielt wann et der Schnellegkeet kënnt, also wann Dir Är Stäipblatt mi schléift, dat ass eng gutt Iddi. Dëst ass wou de "Comma" ka kommen an ganz Styl fir Är Stylblatt!
Commas a CSS
Dir hutt gefrot wéi d'Roll den Comma spillt an der CSS- Keeser-Syntax. Wéi an de Saz, bréngt d'Tëscht Klerheet - net Code - fir d'Separatoren. De Comma bei engem CSS selector trennt verschidde Selektoren an de selwechten Stiler.
Zum Beispill kucke we g nach e puer CSS.
th {color: rout; }}
td {color: rout; }}
p.red {color: rout; }}
div # firstred {color: rout; }}
Mat där Syntax, soten Dir datt Dir Th tags, td Tags, Paragraafstags mat der Klasse Rot, an der Divisioun mam Divisioun mat der ID fir all Kéier d'Stilfaarf rout wëllt hunn.
Dëst ass perfekt Akzeptanz CSS, awer et sinn zwee signifikante Nodeuren, et esou ze schreiwen:
- An Zukunft, wann Dir decidéiert d'Schrëftfärderung vun dësen Eegeschaften fir blo änneren, musst Dir dat véier Mol am Stilbuedem änneren.
- Et gëtt vill extra Zeechen fir Är Stylblatt, déi Dir braucht. Dës 4 Stiler kënnen net wéi Iwwerkill schéngen, ma wann Dir dëst weider iwwert Äre ganze Stylblatt handelt, ginn d'Zeilen erop an dat Blat gi vill, méi grouss wéi et muss sinn.
Fir dës Noutfalls ze vermeiden, an Är CSS-Datei ze streamen, versichen d'Commas.
Benotzt Commas fir separat Selektoren
Stéit fir 4 getrennten CSS Selektoren a 4 Regele ze schreiwen, kënnt Dir all dës Stiler an eng Regelstreau kombinéieren andeems d'eenzel Selecteren mat engem Comma ofgetrennt sinn. Hei ass wéi dat géif gemaach ginn:
th, td, p.red, div # firstred {color: red; }}
De Comma Charakter handelt am Prinzip als de Wuert "an" am Zëmmer. Dat gëllt fir t h Tags AND td- Tags AND-Paragrafstonnen mat der Klasse Rot AND den Divage mat der ID firstred. Dat ass genau dat wat mer virdrun hunn, awer fir datt 4 CSS Regele brauchen, hunn mir eng eenzeg Regel mat verschiddene Selektoren. Dëst ass wat de Comma am Selector mécht, et erméiglecht eis verschidden Ziler an enger Regel.
Nëmmen esou passen dës Approche fir méi schléiecher, méi sauber CSS-Dateien, et mécht och nach zukünfteg Aktualiséierunge sou vill méi einfach. Elo musst Dir d'Faarf vu roude bis blo änneren, da musst Dir nëmmen d'Ännerung an enger Stelle maachen anstatt déi ursprénglech 4 Regelen déi mir haten! Denkt iwwer dës Zäit Spuerpläng iwwert eng ganz CSS-Datei an Dir kënnt kucken wéi dëst e Rettungspak vun der Zäit an der Welt ass!
Syntax Variatioun
Verschidde Leit wiele fir de CSS méi ze liesen andeems se de Wähler op senger eegener Linn ze trennen, anstatt et all op enger Linn ze schreiwen wéi et hei steet. Dëst ass wéi dat gemaach ginn:
, an
td,
p.red,
div # firstred
{
Faarf: rout;
}}
Remark: Dir kënnt e Komma no de Choix maachen an dann "Enter" fir de nächste Wähler op seng eegen Linn ze briechen. Dir kënnt nach keng Comma no der Finale selector.
Mat Commas tëscht Ärem Choix mécht Dir e méi kompakt Stéckplack, deen méi einfach an Aktualiséierung erstallt gëtt an dat ass méi einfach ze liesen!
Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard op 5/8/17