Group više CSS selektora za poboljšanje brzine opterećenja
Efikasnost je važan faktor na uspešnoj web stranici. Ta stranica bi trebalo da bude efikasna u tome kako koristi slike online . Ovo će pomoći da se stranica osigura dobro za posetioce i brzo učitava na svojim uređajima. Efikasnost bi takođe trebalo da bude deo vašeg cjelokupnog procesa, pomažući vam da održite napredak sajta na vrijeme i na budžetu.
Na kraju, efikasnost igra ulogu u svim aspektima kreiranja web stranice i dugoročnog uspeha, uključujući i stilove koji su napisani za CSS listove tog web sajta. Mogućnost kreiranja lakših, čistijih CSS datoteka je idealno, a jedan od načina na koji možete to postići je grupiranje više CSS selektora zajedno.
Selektori grupisanja
Kada grupirate selektore CSS-a , primenjujete iste stilove u nekoliko različitih elemenata bez ponavljanja stilova u vašem listu stilova. Umjesto da imate dva ili tri ili još više CSS pravila, a sve one rade istu stvar (primjer, postavite boju nečega na crveno), imate jedno CSS pravilo koje se postiže za vašu stranicu.
Postoji niz razloga zašto ova "grupacija selektora" ima korist od strane. Prvi offt, vaš stilski list će biti manji i učitati brže. Sasvim sigurno, stilski listovi nisu jedan od glavnih krivaca kada se radi o sporim mestima za učitavanje. CSS datoteke su tekstualne datoteke, tako da su čak i stvarno dugi CSS listovi mala, veličina datoteke je mudra, u poređenju sa neobjavljenim slikama. Ipak, svako malo računa, i ako možete obrijati neku veličinu CSS-a i učitati stranice koje su mnogo brže, to je uvijek dobra stvar.
Uopšteno gledano, iznad prosečnih opterećenja za sajtove su manje od 3 sekunde; 3 do 7 sekundi je prosečno, a više od 7 sekundi je samo sporo. Ovi niski brojevi znače da, kako biste ih postigli sa vašom stranom, morate učiniti sve što možete! Zbog toga možete pomoći ubrzavanju vaše stranice koristeći grupisane CSS selektore.
Kako grupisati CSS selektore
Da biste grupu CSS selektovali zajedno u svojoj listi stilova, koristite komise da biste razdvojili više grupisanih selektora u stilu. U sledećem primeru stil utiče na p i div elemente:
div, p {boja: # f00; }Zmija u osnovi znači "i". Dakle, ovaj selektor se odnosi na sve elemente paragrafa I sve elemente podele. Ako zapeta nedostaje, biće umesto toga svi elementi paragrafa koji su dijete podjele. To je veoma različita vrsta selektora, tako da ova zareza zaista menja značenje selektora!
Bilo koji oblik selektora može se grupisati sa bilo kojim drugim selektorom. U ovom primeru, selektor klasa je grupisan sa selekcionerom ID:
p.red, #sub {color: # f00; }Dakle, ovaj stil se primjenjuje na bilo koji stav sa atributom class "crvene", i bilo koji element (jer nismo naveli koja vrsta) koja ima atribut ID-a "sub".
Možete zajedno grupisati bilo koji broj selektora, uključujući selektore koji su pojedinačne reči i izborni selektori. Ovaj primjer uključuje četiri različita selektora:
p, .red, #sub, div a: link {color: # f00; }Dakle, ovo CSS pravilo bi se primenilo na sledeće:
- Bilo koji element paragrafa
- Bilo koji element sa klasom "crvena"
- Bilo koji element sa ID-om "sub"
- "Veza" pseudo klase sidro elemenata koji su dekententi podjele.
Taj poslednji selektor je selektorski spoj. Možete videti da se lako kombinuje sa drugim selektorima u ovom CSS pravilu. Uz to pravilo, postavljamo boju # f00 (koja je crvena) na ova 4 selektora, što je poželjno pisanju 4 odvojena selektora da bi se postigao isti rezultat.
Druga prednost grupiranja selektora je da, ukoliko želite napraviti promjenu, možete editirati jedno CSS pravilo umjesto više. To znači da ovaj pristup vam štedi težinu i vreme stranice kada je u pitanju održavanje sajta u budućnosti.
Svaki selektor se može grupisati
Kao što možete videti iz gornje primere, svaki važeći selektor može biti smješten u grupu, a svi elementi u dokumentu koji odgovaraju svim grupiranim elementima imaju isti stil na osnovu tog stila svojstva.
Neki ljudi više vole da navode grupisane elemente na odvojenim linijama za čitljivost u kodu. Izgled na sajtu i brzina opterećenja ostaje isti. Na primer, možete kombinovati stilove razdvojene komandom u jednu osobinu stila u jednoj liniji koda:
th, td, p.red, div # firstred {color: red; }
ili možete navesti stilove na pojedinačnim linijama radi jasnoće:
th,
td,
p.red,
div # prvi
{
boja: crvena;
}
Bilo koji metod koji koristite za grupiranje više CSS selektora ubrzava vašu lokaciju i olakšava upravljanje stilovima dugoročno.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 5/8/17.