Bakit pinapasimple ng simpleng comma ang coding
CSS, o Cascading Style Sheets, ay tinatanggap ang paraan ng pagdisenyo ng industriya ng web upang magdagdag ng mga visual na estilo sa isang site. Sa CSS, maaari mong kontrolin ang layout ng pahina, mga kulay, palalimbagan , larawan sa background, at marami pang iba. Karaniwang, kung ito ay isang visual na estilo, pagkatapos CSS ay ang paraan upang dalhin ang mga estilo sa iyong website.
Habang nagdadagdag ka ng mga estilo ng CSS sa isang dokumento, maaari mong mapansin na ang dokumento ay nagsisimula upang makakuha ng mas mahaba at mas mahaba. Kahit na ang isang maliit na site na may lamang ng isang maliit na bahagi ng mga pahina ay maaaring magkaroon ng isang malaki CSS file - at isang napakalaking site na may maraming at maraming mga pahina ng mga natatanging nilalaman ay maaaring magkaroon ng napakalaking CSS file. Ito ay pinagsasama ng mga tumutugon na mga site na may maraming mga query sa media na kasama sa mga style sheet upang baguhin kung paano ang mga visual na hitsura at ang pahina ay lays out para sa iba't ibang mga screen.
Oo, maaaring makakuha ng mga file na CSS ang haba. Hindi ito isang pangunahing problema pagdating sa pagganap ng site at bilis ng pag-download, dahil kahit na ang isang mahabang file ng CSS ay malamang na medyo maliit (dahil ito ay talagang isang dokumentong teksto lamang). Gayunpaman, ang bawat maliit na bilang ay binibilang pagdating sa bilis ng pahina, kaya kung maaari mong gawin ang iyong style sheet leaner, iyon ay isang magandang ideya. Ito ay kung saan ang "kuwa" ay maaaring dumating sa masyadong magaling sa iyong style sheet!
Mga koma at CSS
Maaaring naisip mo kung ano ang papel na ginagampanan ng comma sa syntax ng CSS selector. Tulad ng sa mga pangungusap, ang kuwit ay nagdudulot ng kaliwanagan-hindi code-sa mga separator. Ang kuwit sa isang selector ng CSS ay naghihiwalay sa maraming mga tagapili sa loob ng parehong estilo.
Halimbawa, tingnan natin ang ilang CSS sa ibaba.
th {color: red; }
td {color: red; }
p.red {color: red; }
div # firstred {color: red; }
Sa syntax na ito, sinasabi mo na gusto mo ang mga tag, mga tag ng td , mga tag ng talata na may red na klase, at ang div tag na may ID ang lahat ng mga firstred upang magkaroon ng kulay ng estilo pula.
Ito ay ganap na katanggap-tanggap na CSS, ngunit mayroong dalawang makabuluhang mga kakulangan sa pagsulat dito sa ganitong paraan:
- Sa hinaharap, kung magpasya kang baguhin ang kulay ng font ng mga pag-aari na ito sa asul, kailangan mong baguhin ang apat na beses sa iyong style sheet.
- Nagdaragdag ito ng maraming dagdag na mga character sa iyong style sheet na hindi mo kailangan. Ang mga 4 na estilo ay maaaring hindi mukhang labis na labis, ngunit kung patuloy mong ginagawa ito sa kabuuan ng iyong style sheet, ang mga linya ay bubuuin at ang sheet na iyon ay magkano, mas malaki kaysa sa kailangan nito.
Upang makaiwas sa mga kakulangan na ito, at upang i-streamline ang iyong CSS file, susubukan naming gamitin ang mga kuwit.
Paggamit ng Mga Koma sa Mga Paghiwalay ng Mga Pangkat
Sa halip na magsulat ng 4 na magkakahiwalay na tagapili ng CSS at 4 na panuntunan, maaari mong pagsamahin ang lahat ng mga estilo na ito sa isang tuntunin ng ari-arian sa pamamagitan ng paghihiwalay sa mga indibidwal na tagapili na may kuwit. Narito kung paano ito gagawin:
ika, td, pred, div # firstred {color: red; }
Ang comma character ay karaniwang kumikilos bilang ang salitang "at" sa loob ng tagapili. Kaya nalalapat ito sa mga tag sa h AND tag ng td AT talata tag na may klase pula AT ang div tag na may ID firstred. Iyon ay eksakto kung ano ang mayroon kami bago, ngunit sa halip na nangangailangan ng 4 na mga patakaran ng CSS, mayroon kaming isang panuntunan na may maraming mga tagapili. Ito ang ginagawa ng koma sa tagapili, pinapayagan tayong magkaroon ng maraming tagapili sa isang panuntunan.
Hindi lamang ginagawa ng diskarte na ito para sa mga leaner, mas malinis na mga file ng CSS, ginagawa rin nito ang mga pag-update sa hinaharap na mas madali. Ngayon kung nais mong baguhin ang kulay mula sa pula hanggang asul, kailangan mo lamang gawin ang pagbabago sa isang lokasyon sa halip na sa buong orihinal na 4 na mga panuntunan sa estilo na mayroon kami! Mag-isip tungkol sa mga pagtitipid ng oras sa kabuuan ng isang buong file ng CSS at maaari mong makita kung paano ito ay i-save ka ng parehong oras at espasyo sa katagalan!
Pagkakaiba-iba ng Syntax
Pinipili ng ilang tao na gawing mas madaling mabasa ang CSS sa pamamagitan ng paghihiwalay sa bawat tagapili sa sariling linya, sa halip na isulat ang lahat ng ito sa isang linya tulad ng nasa itaas. Ganiyan ang mangyayari:
ika,
td,
p.red,
div # firstred
{
Kulay pula;
}
Pansinin na maglalagay ka ng kuwit pagkatapos ng bawat tagapili at pagkatapos ay gamitin ang "ipasok" upang masira ang susunod na tagapili papunta sa sarili nitong linya. HINDI ka magdagdag ng kuwit pagkatapos ng huling tagapili.
Sa pamamagitan ng paggamit ng mga kuwit sa pagitan ng iyong mga tagapili, lumikha ka ng isang mas compact sheet ng estilo na mas madaling i-update sa hinaharap at mas madaling basahin ngayon!
Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 5/8/17