Kema tezligini oshirish uchun bir nechta CSS-ni tanlash
Mahsuldorlik muvaffaqiyatli veb-saytning muhim omilidir. Ushbu sayt onlayn rasmlardan qanday foydalanishi borasida samarali bo'lishi kerak. Bu sayt saytingiz uchun yaxshi ishlashi va qurilmalariga tezda yuklanishi uchun yordam beradi. Mahsuldorlik ham sizning umumiy jarayoningizning bir qismi bo'lishi kerak, bu sizning saytingizning o'z vaqtida va byudjetdagi o'sishiga yordam beradi.
Natijada, samaradorlik veb-sayt yaratish va uzoq muddatli yutuqlar, shu jumladan, ushbu saytning CSS varaqlari uchun yozilgan uslublardagi barcha jihatlarida muhim rol o'ynaydi. Bundan arzonroq, toza CSS-fayllarni yaratish imkoniyatiga ega bo'lish ideal va bu juda ko'p CSS tanlovchini birgalikda birlashtirish yo'li bilan erishish mumkin bo'lgan usullardan biri.
Guruhlarni tanlash
CSS tanlovchilarini guruhlashda, uslublar jadvalidagi jihozlarni takrorlamasdan, bir xil uslublarni turli xil elementlarga qo'llaysiz. Ikki, uch yoki undan ortiq CSS-qoidalariga ega bo'lishning o'rniga, ularning barchasi bir xil ishni bajarishadi (masalan, qizil rangli narsalarni belgilash), sizning sahifangiz uchun bajaradigan bitta CSS qoidasi bor.
Ushbu "saylovchilar guruhini" bir sahifaga foydasi uchun bir qator sabablar mavjud. Birinchidan, uslublar jadvalingiz kichikroq bo'ladi va tezroq yuklanadi. Ehtimol, uslub sahifalari asta-sekin yuklash saytlariga kelganda asosiy aybdorlardan biri emas. CSS-fayllari matnli fayllar, shuning uchun ham CSS-sahifalari juda kichik, fayl o'lchamlari esa unoptimizatsiyalanmagan tasvirlarga qaraganda juda ko'p. Shunday bo'lsa-da, har bir kichik narsa hisobga olinadi va siz CSS-ning bir qismini sochingiz va sahifalarni tezroq yuklab olishingiz mumkin bo'lsa, bu doimo yaxshi bo'ladi.
Umuman, saytlarning o'rtacha yuklanish tezligi 3 sekunddan kam; 3 dan 7 soniya atrofida o'rtacha, 7 soniyadan ortiq vaqt esa juda sekin. Bu past raqamlar sizning saytingizga erishish uchun qo'lingizdagi hamma narsani bajarishingiz kerakligini anglatadi! Shuning uchun siz saytingizni guruhlangan CSS tanlovchilaridan foydalanib tezroq turishda yordam berishingiz mumkin.
CSS sintelrlarini guruhlash
Uslublar varaqangizda CSS tanlovchilarini birlashtirmoq uchun, uslubda bir nechta guruhlangan tanlovchilarni ajratish uchun vergulni ishlating. Quyidagi misolda uslublar p va div elementlariga ta'sir qiladi:
div, p {rangi: # f00; }Virgül asosan "va" degan ma'noni anglatadi. Shunday qilib, bu tanlangan element barcha element elementlari va barcha bo'linish elementlariga qo'llaniladi. Agar vergul etishmayotgan bo'lsa, uning o'rniga bo'linishning bolasi bo'lgan barcha xat elementlari bo'ladi. Bu juda ko'p turli xil selektor, shuning uchun bu vergul, albatta, selektorning ma'nosini o'zgartiradi!
Tanlovchining har qanday shakli boshqa selektor bilan guruhlanishi mumkin. Ushbu misolda sinf selektori ID identifikatori bilan guruhlangan:
p.red, #sub {color: # f00; }Shuning uchun bu uslub har qanday xatboshiga "qizil" sinf attributiga va "sub" ning identifikatoriga ega bo'lgan har qanday elementga (biz qaysi turni ko'rsatmasligimizdan) amal qiladi.
Bitta suzuvchi va birlashtiruvchi tanlovi bo'lgan tanlovchilarni, shu jumladan, har qanday miqdordagi tanlovchilarni guruhlarga qo'shishingiz mumkin. Ushbu misolda to'rtta turli xil tanlov qo'llaniladi:
p, .red, #sub, div a: havola {rangi: # f00; }Shunday qilib, ushbu CSS qoidasi quyidagilarga qo'llaniladi:
- Har qanday xat elementi
- "Qizil" sinfiga ega bo'lgan har qanday element
- "Sub" identifikatoriga ega bo'lgan har qanday element
- Bo'limning ajdodlari bo'lgan ulash elementlarining "bog'lanish" pseudo klassi.
Bu so'nggi tanlov kompleks tanlash vositasidir. Bu CSS qoidasida boshqa tanlovchilar bilan osongina birlashtirilganini ko'rishingiz mumkin. Ushbu qoida bilan biz ushbu 4 ta tanlovchining # f00 (qizil rang) rangini belgilab olamiz, bu esa bir xil natijaga erishish uchun 4 ta alohida tanlovchini yozishdir.
Tanlovchilarni guruhlashning yana bir foydasi, agar siz o'zgarishlar qilishingiz kerak bo'lsa, siz bir nechta o'rniga bitta CSS qoidasini o'zgartirishingiz mumkin. Bu shuni anglatadiki, ushbu yondashuv saytni kelajakda saqlab qolish uchun sahifa og'irligi va vaqtni tejaydi.
Har qanday qo'ng'iroqni guruhlash mumkin
Yuqoridagi misollardan ko'rib turganingizdek, har qanday haqiqiy tanlov guruhga joylashtirilishi mumkin va barcha guruhlangan elementlarga taalluqli hujjatdagi barcha elementlar uslub uslubiga asoslangan uslubga ega bo'ladi.
Ba'zi odamlar kodlangan elementlar uchun guruhlangan elementlarni alohida satrlarda o'qishni afzal ko'rishadi. Saytdagi ko'rinish va yuk tezligi bir xil bo'lib qolmoqda. Misol uchun, vergul bilan ajratilgan uslublarni bitta satrda bitta uslub xususiyati bilan birlashtira olasiz:
th, td, p.red, div # firstred {rang: qizil; }
yoki ravshanlik uchun individual chiziqlardagi uslublarni rostlashingiz mumkin:
th,
td,
p.red,
div # birinchi marta
{
rang: qizil;
}
Agar bir nechta CSS tanlovchilarini guruhlash uchun foydalanadigan har qanday usul saytingizni tezlashtiradi va uzoq muddatli uslublarni boshqarishni osonlashtiradi.
Jennifer Kryninning original maqolasi. Jeremy Girard tomonidan 5/8/17 yil tahrirlangan.