CSS goʻzallashtirish qanday ishlaydi
Goʻzallashtiruvchi uslublar jadvalini belma-bel oʻqiydi, har bir blokning qanchalik chuqur joylashganini kuzatadi va uni izchil boʻsh joylar bilan qayta chiqaradi. U stillarning nima qilishini hech qachon oʻzgartirmaydi — faqat faylda qanday koʻrinishini.
- Tokenlashtirish. Kutubxona kirishingizni tokenlar oqimiga skanerlaydi: selektorlar, xususiyat nomlari, qiymatlar, at-qoidalar, izohlar va ularni ajratuvchi qavslar, ikki nuqta va nuqtali vergullar. Satrlar va url() qiymatlari bitta birlik sifatida taniladi, shuning uchun content xususiyati ichidagi qavs hech qachon blok chegaralovchi bilan adashmaydi.
- Joylashishni kuzatish. Tokenlar oqimini aylanib oʻtayotganda goʻzallashtiruvchi joriy chegara darajasini saqlaydi. Har bir ochiluvchi jingalak qavs darajani chuqurlashtiradi — qoida blokiga, media soʻroviga yoki keyframes blokiga tegishli boʻlsin — va har bir yopiluvchi uni qaytaradi. Bu chuqurlik har bir qaytarilgan qator oldida nechta chegara birligi boʻlishini belgilaydi.
- Parametrlarni qoʻllash. Chegara tanlovi (2 boʻsh joy, 4 boʻsh joy yoki tab) bir darajaning kengligini belgilaydi. Qavs uslubi sozlamasi ochiluvchi jingalak qavsning undan oldingi selektori bilan yonma-yon turishi yoki oʻz qatoriga tushishini belgilaydi. Qolgan tugmalar qoida bloklari orasiga boʻsh qator qoʻshadi va guruhlangan selektorlarni alohida qatorlarga boʻladi.
- Qayta chiqarish. Nihoyat formatlash vositasi tokenlarni u hisoblagan chegara va qator uzilishlari bilan qayta chop etadi, har bir qatorda bitta deklaratsiya va har bir ikki nuqtadan keyin bitta boʻsh joy qoʻyadi. Natija bir xil uslublar jadvali boʻlib, inson kaskadni koʻzdan kechira oladigan tarzda joylashtirilgan.
Nima uchun CSS-ni goʻzallashtirish kerak
- Kichraytirilgan uslublar jadvallarini oʻqish. Ishlab chiqarish CSS qoidalar orasida boʻsh joy boʻlmagan holda bitta qatorda joʻnatiladi. Goʻzallashtirish qator uzilishlari va chegaralashni tiklaydi, shuning uchun manba xaritasisiz ham tartib xatosining ortidagi selektorni topishingiz va u qaysi deklaratsiyalarni belgilashini koʻrishingiz mumkin.
- Izchil boʻlmagan fayllarni tartibga solish. Bir necha kishi teggan uslublar jadvali aralash chegara va qavs uslublariga oʻtib ketadi. Goʻzallashtiruvchi orqali bitta oʻtish butun faylni yagona makonga normallashtiradi, bu keyingi diff boʻsh joy shovqini oʻrniga haqiqiy kaskad oʻzgarishlarini koʻrsatishga imkon beradi.
- Bu vosita sahifangizni sekinlashtirmaydi. Koʻpgina onlayn formatlash vositalari sahifa ochilganida butun kutubxonani yuklaydi. Bu vosita js-beautify-ni faqat Goʻzallashtirish tugmasini bosganda yoki Jonli rejimni yoqqanda lazy-load qiladi, shuning uchun sahifani ochish bir necha yuz oʻrniga bir necha kilobaytga tushadi va dastlabki render tez qoladi.
- Hech narsa brauzeringizni tark etmaydi. Goʻzallashtiruvchi toʻliq qurilmangizda ishlaydi. CSS-ingiz hech qachon serverga yuklanmaydi, bu tekshirayotgan uslublar jadvali mijozga tegishli boʻlsa, ichki sinf nomlari oʻz ichiga olsa yoki maxfiylik shartnomasi ostida boʻlsa ahamiyatlidir.
Keng tarqalgan qoʻllanishlar
CSS goʻzallashtirish kimdir oʻqish uchun yozilmagan uslublar jadvalini oʻqishi kerak boʻlganda doimo paydo boʻladi.
- Ishlab chiqarishda nosozliklarni topish: kutilgan tartibni bekor qilayotgan qoidani topish uchun Network yorligʻidan olingan kichraytirilgan uslublar jadvalini joylashtiring.
- Kod koʻrib chiqishga tayyorlash: koʻrib chiquvchilar kaskad oʻzgarishlarini, tartib xaosini emas koʻrishi uchun pull requestni ochishdan oldin kontributorning izchil boʻlmagan chegarali faylini qayta formatlang.
- Oʻrganish va audit: selektorlar, media soʻrovlar va maxsus xususiyatlar qanday tuzilganini oʻrganish uchun freymvork yoki komponent kutubxonasi uslublar jadvalini kengaytiring.
Ishlangan misol
Kichraytirilgan bir qatorni oling: a{color:red;margin:0}b{padding:0}. Chegara 2 boʻsh joy va qavs uslubi Yigʻish qilib oʻrnatilgan holda yuqoriga joylashtiring, soʻng Goʻzallashtirish tugmasini bosing. Oʻqilishi mumkin boʻlgan bloklarni qaytarib olasiz: a { oʻz qatorida, color: red; va margin: 0; deklaratsiyalari bir daraja chuqurroq chegaralangan, yopiluvchi qavs selektori ostida hizalangan va pastda b qoidasi. Qavs uslubini Kengaytirish ga almashtiring va har bir ochiluvchi jingalak qavs oʻz qatoriga tushadi. Chegarani Tablarga oʻzgartiring va har bir daraja ikki boʻsh joydan tab belgisiga oʻtadi. Stillar bir xil; faqat joylashuv oʻzgaradi.
FAQ
Bu brauzerimda ishlaydimi?
Ha. js-beautify kutubxonasi Goʻzallashtirish tugmasini birinchi marta bosganda yoki Jonli rejimni yoqqanda lazy-load qilinadi, soʻng keshlanadi. CSS-ingiz sahifadan hech qachon chiqmaydi — server bilan aloqa yoki yuklanish yoʻq.
Goʻzallashtirish va kichraytirishni bekor qilish bir narsamı?
U oʻqilishi mumkin boʻlgan formatlashni — chegaralash, qator uzilishlari va boʻsh joylarni — tiklaydi, lekin kichraytirish olib tashlagan izohlarni qaytara olmaydi yoki hech qachon faylda boʻlmagan tuzilmani tiklaydi. U faqat mavjud deklaratsiyalar va selektorlarni qayta formatlaydi.
Goʻzallashtirish stillarim qanday renderlanishini oʻzgartiradimiA?
Yoʻq. Goʻzallashtirish faqat boʻsh joylar va qator uzilishlarini qoʻshadi va olib tashlaydi; kaskad tegilmaydi va sahifa bir xil renderlanadi. Xususiyat tartibi, maxsuslik va qiymatlar hammasi aynan yozganingizdek qoladi.
Qavs uslubi parametrlari nima maʼno anglatadi?
Yigʻish ochiluvchi jingalak qavsni selektor bilan bir qatorda saqlaydi (a {), bu odatiy CSS konvensiyasidir. Kengaytirish har bir ochiluvchi jingalak qavsni selektor ostidagi oʻz qatoriga tushiradi. Boʻsh qator va har bir qatorda bitta selektor tugmalari qoida bloklari orasidagi boʻsh joyni va h1, h2, h3 kabi guruhlangan selektorlarning qanday joylashishini boshqaradi.
Brauzer tomonida CSS goʻzallashtirish sizga qurilish bosqichi yoki yuklanishsiz oʻqilishi mumkin boʻlgan uslublar jadvalini beradi. Kichraytirilgan yoki tartibsiz faylni joylashtiring, chegara va qavs uslubingizni tanlang, soʻng natijani nusxalang yoki yuklab oling. Hech narsa qurilmangizni tark etmaydi, hisob yoʻq, kutubxona esa faqat soʻragan paytingizda yuklanadi — shuning uchun bu sahifani ochish bir megabayt emas, bir necha kilobaytga tushadi.