Kāpēc vienkārša komēta vienkāršo kodēšanu
CSS vai Cascading Style Sheets ir tīmekļa dizaina nozares pieņemtais veids, kā vietnei pievienot vizuālos stilus. Izmantojot CSS, jūs varat kontrolēt lapas izkārtojumu, krāsas, tipogrāfiju , fona attēlu un daudz ko citu. Būtībā, ja tas ir vizuāls stils, tad CSS ir veids, kā panākt šos stilus jūsu vietnei.
Kad dokumentam tiek pievienoti CSS stili, iespējams, pamanīsit, ka dokuments kļūst garāks un ilgāks. Pat neliela vietne, kurā ir tikai nedaudz lappušu, var veidot plašu CSS failu - un ļoti liela vietne ar daudzām un daudzām unikāla satura lapām var būt ļoti lieli CSS faili. To papildina jutīgas vietnes, kurām ir daudz multivides vaicājumu, kas iekļauti stilu lapās, lai mainītu to, kā vizuāli attēli izskatās, un lapa ir paredzēta dažādiem ekrāniem.
Jā, CSS faili var būt ilgstoši. Tas nav nopietna problēma, kad runa ir par vietnes veiktspēju un lejupielādes ātrumu, jo pat ilgs CSS fails, iespējams, ir diezgan mazs (jo tas tiešām ir tikai teksta dokuments). Tomēr ikreiz, kad runa ir par lapas ātrumu, tas tiek ņemts vērā, tāpēc, ja jūs varat padarīt savu stilu lapu mazāku, tas ir laba ideja. Tas ir, ja "komats" var būt ļoti noderīgs jūsu stilu lapā!
Commas un CSS
Iespējams, esat pamanījuši, kāda loma komatam spēlē CSS selektora sintaksē. Kā teikumos, komats nodrošina atdalītājiem skaidrību - nevis kodu. CSS atlasītāja komats atdala vairākus selektorus vienā un tajā pašā stilā.
Piemēram, aplūkosim kādu CSS.
th {krāsa: sarkana; }
td {krāsa: sarkana; }
p.red {krāsa: sarkana; }
div # firstred {color: red; }
Ar šo sintaksi, jūs sakāt, ka vēlaties th tagus, td tagus, punktu tagus ar klasi sarkans, un div tagu ar ID firstred viss, lai stila krāsa sarkana.
Tas ir pilnīgi pieņemams CSS, taču ir šādi divi būtiski trūkumi, kā to rakstīt šādi:
- Nākotnē, ja jūs nolemjat mainīt šo īpašumu fontu krāsu zilā krāsā, jums četras reizes jāizmaina šīs izmaiņas stilu tabulā.
- Tas pievieno daudz papildu rakstzīmes jūsu stilu lapas, kas jums nav nepieciešams. Šie četri stili var nešķist pārspīlēti, bet, ja jūs turpināsiet to visu savā stilā, līnijas papildinās un šī lapa būs daudz, daudz lielāka nekā tā būtu.
Lai varētu izvairīties no šiem trūkumiem un racionalizēt jūsu CSS failu, mēs centīsimies izmantot komatus.
Komatu izmantošana atsevišķos atlasītājos
Tā vietā, lai rakstītu 4 atsevišķus CSS selektorus un 4 noteikumus, jūs varat apvienot visus šos stilus vienā noteikuma īpašumā, atdalot atsevišķus selektorus ar komatu. Lūk, kā tas būtu izdarīts:
th, td, p.red, div # firstred {krāsa: sarkana; }
Komats raksturs galvenokārt darbojas kā vārds "un" atlasītāja iekšpusē. Tātad tas attiecas uz t h tags AND td tagiem UN punkts tagus ar klases sarkanu un div tag ar ID firstred. Tas ir tieši tas, kas mums bija agrāk, bet tā vietā, lai iegūtu 4 CSS noteikumus, mums ir vienots noteikums ar vairākiem atlasītājiem. Tas ir tas, ko komats dara atlasītāju, tas ļauj mums ir vairāki selektori vienā noteikumā.
Šī pieeja ne tikai padara vienkāršākus un tīrākus CSS failus, bet arī padara nākotnes atjauninājumus daudz vieglāk. Tagad, ja jūs vēlaties mainīt krāsu no sarkanas uz zilu, jums ir tikai jāveic izmaiņas vienā vietā, nevis pāri sākotnējiem 4 stilu noteikumiem mums bija! Padomājiet par šo laika ietaupījumu visā CSS failā un jūs varat redzēt, kā tas ietaupīs gan laiku, gan vietu garajā rune!
Sintakses variācijas
Daži cilvēki izvēlas padarīt CSS salasāmāku, atdalot katru atlasītāju no savas pozīcijas, nevis rakstot to visam vienā rindiņā, kā norādīts iepriekš. Tas, kā tas būtu jādara:
th,
td
p.red
div # pirmais
{
krāsa: sarkana;
}
Ievērojiet, ka pēc katra selektora jūs ievietojat komatu un pēc tam izmantojiet "enter", lai pārtraucat nākamo selektoru uz savu rindu. NAV pievienojiet komatu pēc pēdējā atlasītāja.
Izmantojot komatus starp atlasītājiem, jūs izveidojat kompaktāku stilu lapu, ko nākotnē vieglāk atjaunināt un ko šodien ir vieglāk lasīt!
Jennifera Krīnina oriģinālais raksts. Rediģējis Džeremijs Girards no 5/8/17