Af hverju einfalt kommu einfaldar forritun
CSS, eða Cascading Style Sheets, eru viðurkennd leið vefhönnunar iðnaðarins til að bæta sjónrænum stílum við síðu. Með CSS getur þú stjórnað síðuuppsetningu, litum, leturfræði , bakgrunnsmynd og margt fleira. Í grundvallaratriðum, ef það er sjónrænn stíl, þá er CSS leiðin til að koma þessum stílum á vefsvæðið þitt.
Þegar þú bætir við CSS stílum við skjal geturðu tekið eftir því að skjalið byrjar að verða lengur og lengur. Jafnvel lítill staður með aðeins handfylli af síðum getur endað með stórum CSS skrá - og mjög stór staður með fullt og fullt af síðum af einstakt efni getur haft mjög stór CSS skrár. Þetta er blandað af móttækilegum síðum sem hafa margar fjölmiðlafyrirspurnir í stílblöðunum til að breyta því hvernig myndefnin líta út og blaðsíða lýkur fyrir mismunandi skjái.
Já, CSS skrár geta fengið langan tíma. Þetta er ekki stórt vandamál þegar kemur að frammistöðu vefsvæða og niðurhalshraða, því jafnvel lengi CSS-skrá er líkleg til að vera frekar lítil (þar sem það er í raun bara textaskilaboð). Samt sem áður telur allt lítið þegar kemur að blaðsíðni, þannig að ef þú getur gert stíll lakari, þá er það góð hugmynd. Þetta er þar sem "kommu" getur komið mjög vel út í stílblaðinu þínu!
Commas og CSS
Þú gætir hafa spurt hvaða hlutverk kommu spilar í setningu CSS vali. Eins og í setningum kemur kommuin skýrt - ekki kóða-að skiljum. Auglýsingin í CSS vali skilar mörgum valmælum innan sömu stíl.
Til dæmis, við skulum skoða nokkrar CSS hér að neðan.
th {lit: rauður; }
td {litur: rauður; }
p.red {litur: rauður; }
div # firstred {litur: rauður; }
Með þessari setningafræði ertu að segja að þú viljir t tags, td tags, málsmerki með bekknum rauðum og div-merkið með ID-númerinu, sem er fyrsta, allt til að stíll liturinn sé rauður.
Þetta er fullkomlega ásættanlegt CSS, en það eru tvö mikilvæg galli við að skrifa það með þessum hætti:
- Í framtíðinni, ef þú ákveður að breyta leturlitum þessara eiginleika að bláum, verður þú að breyta því fjórum sinnum í stílblaðinu þínu.
- Það bætir mikið af auka stafi við stílblaðið sem þú þarft ekki. Þessar 4 stíll virðast ekki eins og overkill, en ef þú heldur áfram að gera þetta yfir öllu stílfletinu þínu, þá mun línurnar bæta upp og þessi lak verður miklu, miklu stærri en það þarf að vera.
Til að koma í veg fyrir þessar gallar og til að hagræða CSS skránum þínum munum við reyna að nota kommu.
Nota kommum til að aðgreina valdarann
Í stað þess að skrifa 4 aðskilda CSS-valmöguleika og 4 reglur geturðu sameinað allar þessar stíll í eina reglu eign með því að skilja einstaka valið með kommu. Hér er hvernig það væri gert:
th, td, p.red, div # firstred {litur: rauður; }
Comma stafurinn virkar í grundvallaratriðum sem orðið "og" inni í vali. Svo þetta á við um t h tags og td tags og málsmerki með bekknum rautt og div tagið með ID fyrsta. Það er einmitt það sem við höfðum áður, en í stað þess að þurfa 4 CSS reglur, höfum við eina reglu með mörgum völdum. Þetta er það sem kommu gerir í valinu, það gerir okkur kleift að hafa margar valsmenn í einum reglu.
Ekki eini gerir þetta aðferði fyrir sléttari, hreinni CSS skrá, það gerir einnig framtíðar uppfærslur svo miklu auðveldara. Nú ef þú vilt breyta litnum frá rauðum til bláum þarftu aðeins að gera breytinguna á einum stað í stað þess að nota yfir upphaflegu 4 stíl reglurnar sem við höfðum! Hugsaðu um þessa tímasparnað yfir heilum CSS skrá og þú getur séð hvernig þetta mun spara þér bæði tíma og rúm í langan tíma!
Setningafræði Variation
Sumir kjósa að gera CSS læsilegari með því að skilja hvert val á eigin línu, í stað þess að skrifa það allt í einni línu eins og að ofan. Þetta er hvernig það væri gert:
th,
td,
p.red,
div # firstred
{
litur: rauður;
}
Takið eftir að þú setur kommu eftir hverja val og notar síðan "inn" til að brjóta næsta val á eigin línu. Þú bætir ekki við kommu eftir lokaval.
Með því að nota kommum á milli þín velurðu myndavélin sem er auðveldara að uppfæra í framtíðinni og það er auðveldara að lesa í dag!
Upprunaleg grein af Jennifer Krynin. Breytt af Jeremy Girard á 5/8/17