Grupējiet vairākus CSS atlasītājus, lai uzlabotu slodzes ātrumu
Efektivitāte ir svarīgs faktors veiksmīgā tīmekļa vietnē. Šai vietnei jābūt efektīvai, kā tā izmanto attēlus tiešsaistē . Tas palīdzēs nodrošināt, ka vietne labi apmeklē apmeklētājus un ātri ielādē to ierīcēs. Efektivitāte arī ir daļa no jūsu kopējā procesa, kas palīdz uzturēt vietnes progresu laikā un budžetā.
Galu galā efektivitāte ir nozīmīga visos tīmekļa vietnes izveides un ilgtermiņa panākumu aspektos, tostarp stilā, kas ir rakstīts šīs vietnes CSS lapās. Spēja izveidot mazākus, tīrākus CSS failus ir ideāls, un viens no veidiem, kā jūs to varat sasniegt, ir grupējot vairākus CSS atlasītājus kopā.
Grupu atlasītāji
Grupējot CSS selektorus , jūs pielietojat vienus un tos pašus stilus vairākiem dažādiem elementiem, neatkārto stilu savā stilu tabulā. Tā vietā, lai iegūtu divus vai trīs vai vēl vairāk CSS likumu, kas visi dara to pašu (piemēram, iestatiet krāsu uz sarkanu), jums ir viens CSS noteikums, kas jūsu lapu izpilda.
Ir vairāki iemesli, kāpēc šī "selektoru grupēšana" dod priekšrocības lapai. Vispirms jūsu stilu lapa būs mazāka un slodze būs ātrāka. Protams, stilu lapas nav viens no galvenajiem vainīgajiem, kad runa ir par lēnu iekraušanas vietņu darbību. CSS faili ir teksta faili, tāpēc pat patiešām ilgi CSS lapas ir niecīgas, faila lieluma saprātīgas, salīdzinot ar neoptimizētiem attēliem. Tomēr katrs mazais skaits, un, ja jūs varat noskūties kāda CSS izmēra un ielādēt daudz ātrāk lapas, tas vienmēr ir labs darījums.
Kopumā vietņu vidējais slodzes ātrums pārsniedz 3 sekundes; 3 līdz 7 sekundes ir apmēram vidēji, un vairāk nekā 7 sekundes ir pārāk lēna. Šie zemie skaitļi nozīmē, ka, lai tos sasniegtu ar jūsu vietni, jums ir jādara viss iespējamais! Tieši tāpēc varat palīdzēt ātri saglabāt vietni, izmantojot grupētus CSS atlasītājus.
Kā grupēt CSS atlasītājus
Lai grupētu CSS atlasītājus savā stilu tabulā, jūs izmantojat komatus, lai stilā atdalītu vairākus grupētus atlasītājus . Turpmākajā piemērā stils ietekmē p un div elementus:
div, p {color: # f00; }Komats būtībā nozīmē "un". Tātad šis selektors attiecas uz visiem rindkopas elementiem un visiem sadalīšanas elementiem. Ja komats nebūtu pazudis, tā vietā būtu visi posteņa elementi, kas ir nodaļas bērns. Tas ir ļoti atšķirīgs selektora veids, tādēļ šī komats patiešām maina selektora nozīmi!
Jebkuru selektora veidu var grupēt ar jebkuru citu selektoru. Šajā piemērā klases atlasītājs ir grupēts ar ID atlasītāju:
p.red, #sub {color: # f00; }Tātad šis stils attiecas uz jebkuru punktu ar klases atribūtu "sarkanais", un par jebkuru elementu (jo mēs neesam norādījuši, kāda veida), kam ir "sub" ID atribūts.
Jūs varat grupēt jebkuru selektoru skaitu kopā, ieskaitot selektorus, kas ir atsevišķi vārdi un kompordu atlasītāji. Šajā piemērā ir četri dažādi selektori:
p, .red, #sub, div a: saite {color: # f00; }Tādējādi šis CSS noteikums attiecas uz:
- Jebkurš punktu elements
- Jebkurš elements ar klasi "sarkans"
- Jebkurš elements ar ID "sub"
- "Saikne" enkura elementu pseido klases, kas ir sadalījuma kritumi.
Šis pēdējais selektors ir saliktais selektors. Jūs varat redzēt, ka tas ir viegli apvienojams ar citiem atlasītājiem šajā CSS noteikumā. Ar šo noteikumu mēs iestatām # f00 krāsu (kas ir sarkans) uz šiem četriem atlasītājiem, kas ir vēlams, rakstot 4 atsevišķus selektorus, lai sasniegtu tādu pašu rezultātu.
Vēl viens selektoru grupēšanas priekšrocība ir tā, ka, ja jums ir jāmaina, varat rediģēt vienu CSS kārtulu, nevis vairākus. Tas nozīmē, ka šī pieeja ietaupa jūsu lapas svaru un laiku, kad runa ir par vietnes uzturēšanu nākotnē.
Jebkurš atlasītājs var tikt grupēts
Kā redzat no iepriekš minētajiem piemēriem, jebkurš derīgs atlasītājs var tikt ievietots grupā, un visiem dokumenta elementiem, kas atbilst visiem sagrupētajiem elementiem, ir tāds pats stils, kas balstīts uz šī stila īpašību.
Daži cilvēki dod priekšroku, lai kodā iekļautu sagrupētos elementus atsevišķās līnijās, lai tas būtu salasāms. Mājas lapas izskats un slodzes ātrums paliek nemainīgs. Piemēram, vienā koda rindā jūs varat apvienot stilus, atdalot tos ar komatiem vienā stila īpašumā:
th, td, p.red, div # firstred {krāsa: sarkana; }
vai arī jūs varat uzskaitīt stilus atsevišķās līnijās skaidrības labad:
th,
td
p.red
div # pirmais
{
krāsa: sarkana;
}
Katra metode, ko izmantojat, lai grupētu vairākus CSS atlasītājus, paātrinātu jūsu vietni un atvieglotu stilu pārvaldību ilgtermiņā.
Jennifera Krīnina oriģinālais raksts. Rediģējis Džeremijs Girards no 5/8/17.