Ryhmittele useita CSS-valitsimia latausnopeuden parantamiseksi
Tehokkuus on tärkeä tekijä onnistuneessa verkkosivustossa. Tämän sivuston pitäisi olla tehokasta siinä, miten se käyttää kuvia verkossa . Tämä auttaa varmistamaan, että sivusto toimii hyvin vierailijoille ja latautuu nopeasti laitteilleen. Tehokkuuden pitäisi myös olla osa yleistä prosessia, joka auttaa sinua pitämään sivuston edistymistä ajalla ja budjetilla.
Loppujen lopuksi tehokkuus on tärkeä tekijä kaikessa sivuston luomisessa ja pitkän aikavälin menestyksessä, mukaan lukien tyylit, jotka on kirjoitettu kyseisen sivuston CSS-arkkia varten. Olemassa olevien ja puhtaampien CSS-tiedostojen luominen on ihanteellista, ja yksi tavoista, joilla voit saavuttaa tämän, on yhdistämällä useita CSS-valitsimia yhteen.
Ryhmittelyvalitsimet
Kun ryhmität CSS-valitsimet , käytät samoja tyylejä useisiin eri elementteihin toistamatta tyylialustasi tyylit. Sen sijaan, että sinulla on kaksi tai kolme tai jopa enemmän CSS-sääntöä, jotka kaikki tekevät saman asian (esimerkiksi asettavat värin jotain punaiseksi), sinulla on yksi CSS-sääntö, joka saavutetaan sivullasi.
On olemassa useita syitä, miksi tämä "valikoiden ryhmittely" hyödyttää sivua. Ensinnäkin tyyliarkki on pienempi ja latautuu nopeammin. Tyypilliset levyt eivät ole kuitenkaan yksi tärkeimmistä syyllisyyksistä hitaissa lastauspaikoissa. CSS-tiedostot ovat tekstitiedostoja, joten jopa todella pitkiä CSS-arkkia ovat pienet, tiedostokoon viivästyneet verrattuna optimoimattomiin kuviin. Joka tapauksessa, jokainen pieni osa laskee, ja jos voit leikata CSS-kokoasi ja ladata sivuja paljon nopeammin, niin se on aina hyvä asia.
Yleensä keskimääräiset kuormitusnopeudet kohteille ovat alle 3 sekuntia; 3-7 sekuntia on keskimäärin, ja yli 7 sekuntia on liian hidas. Nämä alhaiset numerot tarkoittavat sitä, että saavutat ne sivustollasi, joten sinun on tehtävä kaikkensa! Siksi voit auttaa pitämään sivustosi nopeasti käyttämällä ryhmitettyjä CSS-valitsijoita.
CSS-valitsimien valitseminen
Jos haluat ryhmitellä CSS-valitsimet tyylialustasi, käytä pilkkuja, jotta voit lajitella useita ryhmitettyjä valitsimia tyyliin. Alla olevassa esimerkissä tyyli vaikuttaa p- ja div-elementteihin:
div, p {väri: # f00; }Pilkku tarkoittaa periaatteessa "ja". Joten tämä valitsin koskee kaikkia kohdan elementtejä ja kaikki jako-elementit. Jos pilkku puuttuu, se olisi sen sijaan kaikki kappaleelementit, jotka ovat divisioonan lapsi. Se on hyvin erilainen valitsin, joten tämä pilkku todella muuttaa valitsimen merkitystä!
Jokainen valitsimen muoto voidaan ryhmitellä minkä tahansa muun valitsimen kanssa. Tässä esimerkissä luokanvalitsin on ryhmitelty ID-valitsimella:
p.red, #sub {väri: # f00; }Joten tämä tyyli koskee kaikkia kappaleita, joilla on "punainen" luokan attribuutti, JA minkä tahansa elementin (koska emme ole määrittäneet, millaista), jolla on tunnus "sub".
Voit ryhmitellä minkä tahansa valitsimen joukon, mukaan lukien valitsimet, jotka ovat yksittäisiä sanoja ja kompundointivalikoita. Tässä esimerkissä on neljä eri valitsinta:
p, .red, #sub, div a: linkki {väri: # f00; }Siksi tämä CSS-sääntö koski seuraavaa:
- Kappale elementti
- Kaikki elementit, joiden luokka on "punainen"
- Kaikki elementit, joilla on tunnus "sub"
- Ankkurielementtien "linkki" pseudo-luokka, joka on osa divisioonaa.
Tämä viimeinen valitsin on yhdistevalitsin. Näet, että se on helppo yhdistää tämän CSS-säännön muiden valitsimien kanssa. Tämän säännön avulla asetamme # f00-värin (joka on punainen) näille 4 valitsimelle, mikä on parempi kirjoittaa 4 erillistä valitsinta saman tuloksen saavuttamiseksi.
Valitsimien ryhmittelyn toinen etu on se, että jos haluat tehdä muutoksen, voit muokata yhtä CSS-sääntöä useiden muiden sijaan. Tämä tarkoittaa, että tämä lähestymistapa säästää sivun painon ja ajan, kun sivustoa ylläpidetään tulevaisuudessa.
Jokainen valitsin voidaan ryhmitellä
Kuten edellä olevista esimerkeistä voidaan nähdä, kaikki voimassa olevat valitsimet voidaan sijoittaa ryhmään, ja kaikki elementit, jotka vastaavat kaikkia ryhmiteltyjä elementtejä, ovat samat tyyliin, joka perustuu kyseiseen tyyliominaisuuteen.
Jotkut ihmiset haluavat luetella ryhmitellyt elementit erillisillä riveillä koodin luettavuutta varten. Sivuston ulkonäkö ja kuormitusnopeus pysyvät samoina. Voit esimerkiksi yhdistää pilkuilla erotetut tyylit yhdeksi tyylin ominaisuudeksi yhdellä rivillä:
th, td, p.red, div # firstred {väri: punainen; }
tai voit selata yksittäisten viivojen tyylit selkeyden vuoksi:
th,
td,
p.red,
div # firstred
{
väri punainen;
}
Kummassakin menetelmässä, jota käytät useiden CSS-valitsimien ryhmittelyn avulla, nopeuttaa sivustoasi ja helpottaa tyylien hallintaa pitkällä aikavälillä.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 5/8/17.