Siz ketayotgan ishlab chiqaruvchini almashtirish uchun mavjud loyihaga qo'shildingiz. Yoki ular bir necha yildan so'ng eski loyihasini boshlashgan. Kodni ko'rib, dahshat va jirkanchlikni his qilasiz. Siz faqat bitta narsani qilishingiz mumkin: butun tartibsizlikni tozalang. Siz ilgari shunga o'xshash narsaga duch keldingizmi? Deyarli albatta, ertami-kechmi hamma bunga duch keladi.
CSS-ni tozalash katta vazifa ekanligini bilasiz. Cheklangan vaqt ichida juda ko'p narsa qilish kerak - ayniqsa mijozlar / xo'jayinlar / hamkasblar ishlayotgan narsaga tegmaslik haqida qat'iy maslahat berishganda. Nimadan boshlashni ham bilmayapsiz.
Linting - bu bizning hamma narsamiz
Ushbu bo'lim uchun siz Sass-dan foydalanayotganingizni taxmin qilaman. Va bu nafaqat hozirgi sharoitda oqilona taxmin bo'lgani uchun, balki Sass-dan noto'g'ri foydalanish ko'pincha kod bazasining ifloslanishiga sabab bo'ladi. Ushbu maqola oldingi protsessorlardan foydalanmaydiganlar uchun foydali bo'lishiga qaramay, siz uni oxirigacha o'qishingiz kerak.
Kod bazasi bilan ishlashga to'g'ri kelganida odatlanib qolgan birinchi narsa - bu linting. Linting - bu mumkin bo'lgan xatolar va yomon amaliyotlarni qidiradigan dasturni bajarish jarayoni. Bizning kodimizni toza qilish orqali biz yaxshi kod uchun birinchi qadammiz deb o'ylayman. Linting so'zining etimologiyasini StackOverflow-dagi ushbu mavzuda topish mumkin.
Sass-da SCSS-lint deb nomlangan Ruby linter mavjud. Siz uni o'zingiz sozlashingiz yoki darhol boshlash uchun Sass-Guidelines tomonidan tavsiya etilgan konfiguratsiyani yuklab olishingiz mumkin. Node.js-da sass-lint mavjud, ular 100% mos emas va boshqacha ishlashi mumkin.
Xatolar uchun SCSS-Lint-ni Sass katalogingizda ishlatib ko'ring. Bir tonna xatoga yo'l qo'yishingiz ehtimoli juda yuqori. Odatda bundan keyin siz kodni tozalash bilan tajribalarni to'xtatishni xohlaysiz. Sabrli bo'ling. Endi siz konfiguratsiyani siz uchun unchalik ahamiyatli bo'lmagan qoidalar (masalan, ranglarni aniqlash formati) bo'yicha cheklovsiz qilishga harakat qilishingiz mumkin yoki buqani shoxlardan olib, zig'irning to'liq kuchidan foydalaning.
Topilgan xatolarni tuzatish
Tuzatish vaqti keldi, nimani tuzatish kerak. Bu ikki yo'l bilan amalga oshirilishi mumkin. Birinchisi, o'z navbatida barcha fayllarni tekshirish va muvaffaqiyatsiz o'zgaruvchilarga nom berish, selektorlarning ortiqcha joylashishi va noto'g'ri formatlangan kod kabi barcha xato va kamchiliklarni tuzatish. Ikkinchisi (mening afzal ko'rganim) find and replace yordamida ishlaydi. Men siz haqingizda bilmayman, lekin odatdagi iboralarni yaxshi ko'raman va ularni har doim o'z ishimda ishlatishni yaxshi ko'raman.
Barcha suzuvchi nuqta raqamlariga etishmayotgan nolni qo'shishni xohlaysizmi (ya'ni 0 dan 1 gacha), bu turdagi xatolar SCSS-lint-dagi LeadingZero qoidasi yordamida aniqlanadi. Buning uchun qidirish uchun foydalaning doimiy ifoda \\ s + \\. (\\ d +) (nuqta qo'yilgan bo'shliqdan keyingi barcha raqamlar) va \\ 0. $ 1 o'rniga (bo'sh joy, nol, nuqta va topilgan son). Va agar siz BorderZero linter qoidasidan xavotirda bo'lsangiz, unda barcha chegaralarni almashtirishingiz mumkin: hech qanday qoidalar bilan chegara: 0 qidirish / almashtirish yordamida muharriringizda. Pirog kabi oson!
Yaqinda GitHub-da barcha regexlarni bir joyga to'plash uchun scss-lint-regex omborini yaratdim. Agar siz katta loyihani lint bilan qoplash bilan bog'liq muammolarga duch kelsangiz, buni albatta ko'rib chiqing. Qidiruv / almashtirish bilan ehtiyot bo'ling, ba'zida bu kutilmagan yon ta'sirga olib keladi. Har bir o'zgarishdan so'ng, nima o'zgarganligini bilish uchun git diff-ni ishga tushiring, bu sizning kodingizga xatolarni qo'shmasligingizni ta'minlaydi.
Izlash / almashtirish bilan tahrirlashni tugatgandan so'ng, yaxshilanishi kerak bo'lgan joylarda qo'lda tahrirlashdan qochib qutula olmaysiz (noto'g'ri chiziq, bo'sh satrlarning yo'qligi yoki ko'pligi, bo'sh joylar va boshqalar). Bu uzoq vaqt talab etadi, ammo keyingi bosqichda bu sizga katta yordam beradi, shuning uchun unga o'tishdan oldin buni qilish muhimdir.
Tarjimonning eslatmasi
Ushbu narsalardan ba'zilari SassBeautify plaginlari yordamida amalga oshirilishi mumkin matn muharrirlariulug'vor yoki atom kabi.
Loyiha tuzilishini qayta ko'rib chiqish
Mavjud loyihaga qo'shilishim meni chindan ham tashvishga soladigan narsa - tegishli loyiha arxitekturasining etishmasligi. Ehtimol, ishning boshida biron bir loyiha bor edi, ammo vaqt o'tishi bilan narsalar nazoratdan chiqib ketadi va asl g'oya yo'qoladi. Ammo bu hali ham nihoyatda muhim.
Loyiha metodikasini tanlash unchalik muhim emas, asosiysi, sizda borligi va sizga noqulaylik tug'dirmasligi. Bu SMACSS, 7-1 yoki ITCSS bo'lishi mumkin - tanlov sizniki. Siz tanlagan texnikaga muvofiq kodingizni qayta tuzishga harakat qiling. Men Sass qo'llanmasida ishlab chiqqan 7-1 sxemasidan foydalanishga moyilman, shuning uchun sizga ushbu yo'lni tanlasangiz, sizga yordam beradigan ba'zi tavsiyalar beraman.
Keyin referatlar katalogiga o'tamiz. Barcha o'zgaruvchilar, aralashmalar, funktsiyalar va joylashtirgichlar shu erda joylashgan bo'lishi kerak. Kod bazangizdagi barcha o'zgaruvchilar va aralashmalarni tushunmaguningizcha, ularni xohlagancha tartibga solishingiz mumkin. Ushbu bosqichda men ixtiyoriy o'zgaruvchilarni (va mixinlarni) ham aniqlayman, chunki ko'pincha bir yoki ikki marta ishlatiladigan o'zgaruvchilar bilan ishlashga to'g'ri keladi.
Buni aniqlab olganingizdan so'ng, keyingi ikki qadamning qaysi birini birinchi bo'lib tanlashingiz kerak bo'ladi. Siz asosiy katalog tarkibidagi barcha tarkibiy qismlar emas, balki aslida uslublar ekanligiga ishonch hosil qilishingiz mumkin. Yoki tartib katalogida sahifa joylashuvi bilan bog'liq barcha narsalar mavjudligini va ushbu kodning to'g'ri hujjatlashtirilganligini tekshiring.
Va nihoyat, siz komponentlar katalogini joylashtirish bilan shug'ullanishingiz kerak va bu odatda juda katta vazifadir. Sizga tarkibiy qismlarni iloji boricha kichikroq tutishingizni va qayta ishlatishga e'tibor berishingizni maslahat beraman. Ularning sonini ko'paytirishingiz muhim emas - agar ular kontekstdan mustaqil bo'lsa va ularni o'qish, tushunish va yangilash oson bo'lsa.
To'g'ri va kichik komponentga misol sifatida men quyidagilarni keltira olaman:
Iqtibos (to'ldirish: 10px;) .quote__attribution (shrift hajmi: 80%;) .quote\u003e: birinchi bola (margin-top: 0;) .quote\u003e: last-child (margin-bottom: 0;)
Modullarda o'ylashga harakat qiling. Kamroq. Sekinroq. Mustaqil.
Ortiqcha narsalarni olib tashlash
Yomon va yaxshi CSS o'rtasidagi eng katta farq kod miqdori ekanligiga ishonaman. CSS juda oson o'sadi. Kimdir deyarli har bir tartibni sinov va xato bilan bajarishi mumkin. Minimal CSS bilan har qanday narsani qila olish ish talab qiladi va minimalist yondashuvni saqlash juda qiyin.
Hozir 3 yil bo'ldi, ammo nikolay Gallaxerdan ushbu tvit mening sevimli CSS savolim bo'lib qolmoqda:
Amortizatsiya - bu CSS vabosi. Uslublarni yozishda biz tez-tez oldinga va orqaga qarab yangi qoidalarni sinab ko'ramiz - oxir-oqibat biz bir nechta keraksiz deklaratsiyalarni qoldirishga moyil bo'lamiz. Masalan, toshib ketish: yashirin, endi kerak emas yoki shrift o'lchamini o'zgartirmaydigan shrift hajmi. Ularni ortda qoldirib, biz texnik qarzni oshirmoqdamiz. Bu yaxshi emas.
CSS-ni yozishda men ishlab chiquvchi vositalarini brauzerda ochishga va tugatilgan kodni yuborishdan oldin har bir CSS deklaratsiyasini birma-bir o'chirib qo'yishga odatlanib qoldim. Agar ular hech narsaga ta'sir qilmasa, birinchi navbatda men o'zimga savol beraman: "Nega ular bu erda?". Agar ular foydasiz bo'lib chiqsa, men ularni olib tashlayman. Bu kabi sodda texnika yordamida men faqat foydali kodni omborga axlatsiz yuborilishini ta'minlay olaman.
CSS kod bazasini tozalash xuddi shu usul. Tozalashni xohlagan komponentni aniqlang, ishlab chiquvchi vositalarni oching va foydasiz deklaratsiyalarni topishga harakat qiling. Ba'zan, CSS kodini olib tashlash uchun, biz kaskaddan foydalanish uchun ushbu uslublarni daraxtga ko'tarishimiz kerak. Buni quyidagi ixcham misol bilan ko'rib chiqamiz:
Ota-ona (/ * ... narsalar bu erda ... * /) .child-A (rang: qizil;) .child-B (rang: qizil;)
Shubhasiz optimallashtirish rangni o'zgartirishdir: qizil deklaratsiyani ota-selektorga, so'ngra kaskad biz uchun qolganini qiladi. Albatta, hayotiy misollar odatda ancha murakkab, ammo bu misol ham qisqartmada "C" ning imkoniyatlarini unutmasligingizni ko'rsatadi. CSS.
CSS aqlli va siz bundan ham yomon bo'lmasligingiz kerak
Merosxo'rlik, boshlang'ich va joriy rang qiymatlarini tushunmaslik ham juda tez-tez uchraydi. Aytaylik, havolalar asosiy matn bilan bir xil rangda bo'lishini xohlaysiz (ular allaqachon etarlicha chizilgan). Qanday qilib buni qilmaslik kerak:
A (rang: qora; / * Yo'q * /)
Ushbu echimning afsuslanish sababi aniq: agar siz tanangiz rangini o'zgartirsangiz, bog'lanish rangi u bilan sinxronlashtiriladi. Agar siz o'zgaruvchidan foydalanish haqida o'ylayotgan bo'lsangiz, bu shunchaki narsalarni keraksiz darajada murakkablashtiradi. Va nihoyat, agar element o'z ichiga o'ziga xos uslub bilan bog'langan bo'lsa (masalan, kotirovkada), u bir xil rangda bo'lmaydi.
CSS-da ushbu muammoni hal qilishning ichki usuli mavjud, bu meros qiymati:
A (rang: meros;; * Yay! * /)
Xuddi shunday, xususiyatni asl qiymatiga qaytarishda, belgilangan qiymatni o'rnatish yomon fikrdir. CSS bunday holatlar uchun dastlabki qiymatni taqdim etadi. Bu, odatda, belgilangan qiymatlarni belgilashdan farq qilmaydi, ammo u rol o'ynaydigan holatlar mavjud, masalan, matnni tekislash xususiyatidagi matn yo'nalishini belgilashda. Matnni tekislashni qayta o'rnatganingizda, chap qiymat RTL tillaridagi matnni buzishi mumkin (o'ngdan chapga yo'naltirilgan), chiqish to'liq boshlang'ich bo'ladi (hatto yaxshiroq boshlash, lekin IE9 da bu qiymat qo'llab-quvvatlanmaydi) /.
Va nihoyat, ahamiyati shundaki, ko'pchilik ishlab chiquvchilar bilmagan joriy rangdir. Agar siz ulardan biri bo'lsangiz, xavotir olmang, shunchaki o'zingizga savol bering: "Agar siz elementlarning chegara rangini o'rnatmagan bo'lsangiz, unda nega u avtomatik ravishda elementning shrift rangiga mos keladi?" Ha, buning sababi shundaki, standart chegara rangi currentcolor (spec) ga o'rnatilgan. Qabul qilaman, sarlavhadan hamma narsa aniq.
Menimcha, agar siz elementning shrift rangidan foydalanmoqchi bo'lsangiz, belgilangan qiymat yoki Sass o'zgaruvchisi o'rniga currentcolor-dan foydalanishingiz kerak.
Element (rang: deeppink; hoshiya: 1px qattiq; / * rang "currentcolor" * / bilan yopiq. Element svg (to'ldirish: currentcolor; / * to'ldirish rangi matn bilan bir xil bo'ladi * /)
Bularning barchasi asosiy CSS xususiyatlari. Ular CSS-ni xuddi shunday qilishadi. Va bu imkoniyatlar ajablanarli darajada kamdan kam qo'llaniladi. Shuning uchun, agar siz komponent kodini yaxshilashga qaror qilsangiz, ularni e'tiborsiz qoldirmasligingiz kerak.
Gitingiz yaxshi bo'lishi kerak
CSS kod bazasini qayta ishlash juda ko'p ish. Siz o'nlab fayllarni yangilashingiz kerak bo'ladi. Va bu jarayonda siz biror narsani buzishingiz ehtimoli katta. Rostini aytsam - hamma xato qiladi va agar siz bu ishni hech qanday kichik nazoratsiz bajarib bersangiz juda yaxshi bo'ladi.
Shuning uchun versiyalarni boshqarish tizimi bilan sinchkovlik bilan ishlashingizni qat'iy tavsiya qilaman (Git ushbu rolni bajaradi deb taxmin qilish mantiqan to'g'ri keladi). Bu shuni anglatadiki, barcha majburiyatlar bitta narsani bajaradi - ziddiyatlarga duch kelmasdan xatolik bilan koddan bir qadam orqaga qaytishingizni ta'minlash.
Bilaman, ko'p odamlar Gitni tushunish qiyin va qiyin, va uni osonlikcha egallash usullari ushbu maqola doirasidan tashqarida. Ishoning: Git hikoyangiz she'rga o'xshash bo'lishi kerak, agar miyangiz qaynab ketishini istamasangiz.
Xulosa
Shunday qilib, men butun matnni o'qishga dangasa bo'lganlar uchun maqolaning asosiy tezislarini qisqacha bayon qilaman:
CSS / Sass loyihasini tozalash qiyin, chunki o'zgartirish yoki o'chirishning to'liq ta'sirini darhol baholash qiyin. cSS satrlari... Bu, asosan, CSS ning sinovga layoqatsizligi bilan bog'liq. Shuning uchun, siz ehtiyot bo'lishingiz kerak.
Linting bilan boshlang va sizning kodingiz yanada chiroyli bo'ladi. Buni qiling, chunki kelajakda bu sizning hayotingizni osonlashtiradi. u xuddi shunday yaxshi yo'l sizning kodingiz holatini katta xavf-xatarsiz ko'rib chiqish (sintaktik kirni tuzatish hech qanday muammo tug'dirmasligi kerak).
Keyin tanlagan metodologiyangiz bo'yicha loyihangizni tuzing. Qaysi birini tanlaganingiz muhim emas, unga rioya qilishingiz muhim. Agar sizning loyihangiz juda ko'p tarkibiy qismlarga ega bo'lmasa, unda tuzilishni boshlash uchun yaxshi joy. Qayta foydalaniladigan interfeys parchalarini toping va ularning uslublarini quyidagiga o'tkazing alohida fayllar... Hujjatlarni yozishdan qo'rqmang, shu bilan jarayon osonlashadi va siz oldinga borishni xohlaysiz.
Loyihani tozalab, barcha tarkibiy qismlarni tartibga keltirgandan so'ng, CSS-ni takomillashtirish vaqti keldi. Avval nimani o'chirishingizni tekshiring, chunki biz har doim juda ko'p kod yozamiz. Keyin uni kamroq takrorlanadigan qilib optimallashtirishga harakat qiling. Ortiqcha qilmang! Sizning vazifangiz murakkablikni oshirish emas, balki kamaytirishdir. Bir qarashda aniq bo'lmagan har qanday narsaga izoh berishni unutmang.
Va nihoyat, sizning vazifalaringiz izchil va mantiqiy bo'lishi kerak. O'zgarishlaringizni kichik majburiyatlarga birlashtiring, ularning har biri bittadan oddiy narsani bajaradi - agar siz noto'g'ri ish qilgan bo'lsangiz, o'zgarishlarni qaytarib olishni osonlashtiradi.
Va nihoyat, eng muhimi, tugashi bilan nishonlashni unutmang. Omad!
Toza va uyushgan CSS-ning afzalliklari aniq. Kusursuz CSS-ga ega sayt tezroq yuklanadi va qidiruv natijalarida ko'proq ko'rinadi. Veb-ishlab chiquvchilar uchun toza CSS - bu professionallik va kelajakdagi mijozlarga dalolatdir.
Ammo CSS formatini dizayndagi ko'p sonli takrorlash va o'zgarishlarda tozalash mashaqqatli va ko'p vaqt talab qiladigan qo'lda ishlaydigan jarayon bo'lishi mumkin. Yaxshiyamki, ba'zi ajoyib va \u200b\u200bbor foydali vositalarCSS-ning eng muhim jihatlarini avtomatlashtirishga yordam berish uchun. Ushbu sahifada CSS-ni tozalash vositalariga havolalar mavjud, shaxsan men saytning CSS belgisini quyidagi barcha vositalarda tekshirdim, sizga ham shunday qilishni maslahat beraman.
CSS tozalash vositalari
CSS-ni yaxshilash uchun ProCSSorProCSSor - bu CSS-ni tezkor takomillashtirish uchun oddiy, bema'ni vosita. OS X, iOS yoki biron bir brauzer orqali mavjud bo'lgan vosita CSS faylini, qo'shilgan parchasini yoki URL-ni oladi va darhol tuzatadi va CSS-ning kelajakdagi kodini ko'rsatadi.
CSS Lint
O'zgarishlarni tushuntirish bilan CSS validatorCSS Lint, boshqa CSS tozalash vositalaridan farqli o'laroq, ko'rsatmalarni taqdim etadi. Ularning aksariyati CSS-ning o'zgarishi haqida gapirmaydi, ammo CSS Lint tavsiya etilgan har bir o'zgarish uchun qisqacha tushuntirish beradi. U yoqilgan yoki o'chirib qo'yilishi mumkin bo'lgan xatolar, moslik, ishlash, takroriy nusxa ko'chirish va kirish imkoniyatlariga yo'naltirilgan turli xil xususiyatlarga ega.
Nopok belgilar
Nopok belgilash vositasi bir nechta turli xil texnologiyalarni birlashtiradiDirty Markup kodni optimallashtirishning o'ziga xos yondashuviga ega; maydon kod bilan to'ldirilganida ishlaydi va HTML Tidy, JavaScript, Ace Editor kabi bir nechta turli xil texnologiyalarni birlashtiradi va murakkab kodlarni tozalashni amalga oshiradi. U xuddi JavaScript yoki standart HTML kabi CSS kabi ishlaydi.
CleanCSS
CleanCSS vositasi CSS optimallashtirishni amalga oshiradiCleanCSS URL yoki o'rnatilgan kod parchasi bilan ishlaydi va har xil CSS optimallashtirishlarni taklif qiladi. Siz beshtasini tanlashingiz mumkin turli xil sozlamalar kompressiya, bu o'qilishi va fayl hajmi o'rtasidagi o'zaro bog'liqlikni taklif qiladi.
Kodni obodonlashtirish vositasi
Code Beautifier oddiy CSS tozalash vositasiCode Beautifier - bu keraksiz xususiyatlarga ega bo'lmagan oddiy CSS tozalash vositasi. Bu kodni URL yoki kodni kiritish orqali ajratadi va amaliy xilma-xillik asosida ularni yaxshilab qirib tashlaydi. Agar sizga kodni tozalash variantlarida adashmasdan CSS-ni tezda tozalash kerak bo'lsa, bu sizning mukammal CSS vositangiz bo'lishi mumkin.
Spritemapper
Spritemapper spritlarni yaratadi, bir nechta rasmlarni CSS uslublar jadvaliga birlashtiradiKo'rsatilgan boshqa vositalarning hech biri optimallashtirilgan rasmlarga ega emas, bu kodning o'zi optimallashtirish kabi foydali. Spritemapper spritlarni yaratadi, to'g'ri joylashishni aniqlagan holda bir nechta rasmlarni CSS uslublar jadvaliga birlashtiradi. Natijada sayt tezlashadi, HTTP so'rovlar kamayadi va soddalashtirilgan CSS paydo bo'ladi.
Palto
Topcoat an'anaviy CSS tozalash vositasi emasTopcoat an'anaviy CSS tozalash vositasi emas; bu mohiyatan CSS ishlab chiqish to'plami, sof CSS-ga asoslangan yondashuv. Agar sizda yaxshi yozilgan CSS bo'lsa, ehtimol siz hech qachon CSS-ni tozalashingiz shart emas.
CSSTidy vositasi Windows, Mac yoki Linux platformalarida ishlaydi.CSSTidy ko'plab CSS tozalash vositalariga o'xshaydi, ammo bu ba'zi bir noyob atributlarni taqdim etadi. CSSTidy buyruq satri yoki PHP yordamida chaqirilishi mumkin va u Windows, Mac yoki Linux platformalarida ishlaydi. CSSTidy-tozalash vositasi mavjud ish oqimiga mukammal mos tushishi va CSS-ni oflayn rejimda tozalab turishi mumkin. W3C Valdiator CSS kodini tekshirish vositasi
W3C Valdiator kodni tozalash, siqish yoki optimallashtirish uchun vositalarni taklif qilmaydi va CSS haqiqatan ham noto'g'ri bo'lgan hollarda albatta ko'rib chiqilishi kerak. Yuqoridagi vositalar o'z vositalariga ega, bu standartlarni yaratadigan W3C konsortsiumi tomonidan amalga oshiriladi.
Ertami-kechmi, har bir oldingi qism (maket dizayneri) oldida butun saytni ishlatilmagan CSS qoidalarini tekshirish vazifasi turadi. Aqlga keladigan birinchi narsa - google va biz uchun barcha iflos ishlarni bajaradigan xizmat yoki dasturni topishdir.
Muxtasar qilib aytganda, men terladim va quyidagi echimlarni topdim:
- pullik xizmat unused-css.com
- DustMe Selectors - Mozilla uchun FireBug kengaytmasi
- CSS foydalanish - Mozilla uchun FireBug kengaytmasi
Pulli xizmatga kelsak, siz saytga o'tasiz, tekshirish uchun sayt manzilini kiritasiz va OK tugmasini bosasiz. Ular sizga natija pochta orqali yuborilishini yozadilar, natijada bir kun ichida siz allaqachon natija borligi haqida xat olasiz va uni havoladan yuklab olishingiz mumkin (boring va tekshiruv natijasini yuklab olish uchun sizdan to'lov amalga oshiriladi). Ammo biz osonlikcha pullik yo'nalishlarni qidirmayapmiz va biz hamma narsani o'z qo'llarimiz bilan qilishni xohlaymiz, shuning uchun biz pullik natijani boshqalarga qoldiramiz.
Keling, nimadan boshlaylik dasturiy ta'minot bizga kerak bo'ladi. Avvalo, bizga kerak Mozilla Firefox... Firefox o'rnatilgandan so'ng biz unga FireBug qo'shimchasini joylashtirdik.
Dust Me Selektorlari
Brauzer qo'shimchalarining rasmiy katalogida Dust Me Selectors qo'shimchalari mavjud emas, uni havolani bosish va "Hozir o'rnatish" tugmachasini bosish orqali o'rnatishingiz mumkin (albatta, havolani FireFox bilan ochishingiz kerak). Plagin o'rnatildi, brauzer qayta ishga tushirildi va pastki o'ng burchakda pushti supurgi belgisi paydo bo'ladi.
Kengaytma sahifani ko'rib chiqqandan so'ng, uchta yorliqli oyna ochiladi: foydalanilmagan selektorlar (foydalanilmagan qoidalar), ishlatilgan selektorlar (ishlatiladigan qoidalar) va o'rgimchak jurnali (o'rgimchak - saytni ko'rib chiqish). Pastki qismida ikkita tugma mavjud: hujjatni saqlash va skanerlash natijalarini tozalash.
Endi o'rgimchak jurnali haqida bir oz ko'proq. Sayt manzilini yoki sayt xaritasi manzilini kiritib, GO tugmachasini bosish talab qilinadi. Nazariy jihatdan, hamma narsa aniq va hamma narsa ishlashi kerak, ammo men natija qanday bo'lishini istamasam ham, natija chiqmadi, aksincha, bir nechta sahifani skanerdan o'tkazdi va qo'shimcha osib qo'yildi, bu juda achinarli edi, bir so'z bilan aytganda, qandaydir muvaffaqiyatsizlikka uchradi. Muallif qo'shimcha moddaning ehtiyojlari borligini ta'kidlamoqda Mozilla versiyalari 1.5 va undan yuqori (bu ham firibgarlik [huh] Men uni o'rnatdim, lekin hamma narsa ishlaydi, lekin hali ham kerak emas). Printsipial jihatdan bu yagona salbiy va eng ahamiyatlidir, chunki butun saytni tekshirish kerak edi, lekin u uzoq vaqt davomida tekshiriladi (men bu axlatxonada yarim kunni o'ldirdim). Eng ijobiy narsa shundaki, agar siz sayt nomini kiritsangiz, u holda plagin sayt xaritasini yaratadi va u keyingi plagin uchun foydalidir. CSS-dan foydalanishshuning uchun sayt xaritangizni saqlaganingizga ishonch hosil qiling.
Aslida, agar siz bitta sahifani tekshirishingiz kerak bo'lsa, unda ushbu kengaytma sizga juda yaxshi yordam beradi, men shuni ta'kidlaymanki, har safar qo'shimchani ochganingizda sahifa doimo skanerdan o'tkaziladi, qisqasi, kengaytmani boshqarish juda qulay emas, shuning uchun men unga gol urdim.
CSS-dan foydalanish
Rasmiy katalogdagi CSS Usage qo'shimchasini bu erda topishingiz mumkin. Yaqin vaqtgacha kengaytmaning ishlashi uchun siz o'rnatishingiz kerak edi firefox versiyasi 3.6.25 va ushbu yozuv paytida Muallif go'yo uyg'ongan yoki uyg'ongan va qo'shimchani yangilagan, shuning uchun siz pul tikishingiz mumkin so'nggi versiyasi Mozills. Ushbu qo'shimchani o'rnatganingizdan va brauzeringizni qayta ishga tushirgandan so'ng, tekshirmoqchi bo'lgan saytga kiring va sahifa yuklangandan so'ng, F12 tugmachasini bosing (FireBug oynasi ochiladi) va u erda siz CSS foydalanish yorlig'ini ko'rasiz:
Sahifada ishlatilmagan qoidalarni tekshirish uchun Scan tugmachasini bosishingiz kerak (skanerlash 30 soniyani yoki undan ham kam vaqtni oladi). Bir qarashda, ushbu kengaytma faqat bitta sahifani skanerlayotgandek tuyuladi, qolgan sahifalarni nima qilish kerak. Shuni esda tutingki, biz Dust Me Selectors kengaytmasi yordamida sayt xaritasini saqladik, garchi tekshirilgan sayt html sayt xaritasiga ega bo'lsa, unda uni ishlatish yaxshiroq, agar u yo'q bo'lsa, unda yangi sayt sahifasini yarating va Dust Me Selectors kengaytmasidan sayt xaritasini kiriting (agar imkon bo'lmasa yaratmoq yangi sahifa keyin quyida keltirilgan).
Endi skanerlash bo'yicha harakatlar ketma-ketligini tasvirlayman:
- html sayt xaritasini oching
- f12 tugmachasini bosing - FireBug ochiladi
- cSS-dan foydalanish yorlig'iga o'ting
- autoScan tugmasini bosing
- sahifani yangilang (F5 tugmachasini bosing)
Natijada biz birinchi skanerlangan sahifani oldik. Siz natijani saqlashingiz yoki skanerlashni davom ettirishingiz mumkin. Davom etishni maslahat beraman. Skanerlashni davom ettirish oson, endi biz hech narsa tanlashimiz shart emas (chunki biz sahifalarni avtomatik skanerlashni tanladik), lekin shunchaki sayt xaritasidagi birinchi havolani bajaring (havolani yangi oynada ochishingiz shart emas, barcha harakatlar bitta oynada amalga oshirilishi kerak).
Skanerlangan sahifaning boshida quyidagi belgilar ko'rsatilgan:
- Chiziq - qoida chizig'i
- CSS Selector - CSS qoidasi
- Ko'rilgan - ishlatilgan CSS qoidasi (och yashil rangda)
- Avval ko'rilgan - ilgari ishlatilgan CSS qoidalari (to'q yashil rangda)
- Ko'rilmagan - foydalanilmagan CSS qoidalari (qizil rangda)
- : hover - fokus olgan elementlar uchun CSS qoidalari (kulrang)
- (2 ta skanerlash) - skanerlash soni ko'rsatiladi (agar siz hozirgi bitta sahifani skanerdan o'tkazgan bo'lsangiz, unda 1-raqam mos ravishda bo'ladi)
- eksport qilingan tozalangan CSS - skanerlash natijasini saqlang
Siz skanerlashni davom ettirishingiz mumkin, ammo sayt xaritasiga qaytishingiz kerak (birinchi minus). Bosish uchun shoshilishning hojati yo'q, sahifani to'liq yuklashi muhim, siz avtoskanerlash ishini ko'rasiz (ya'ni, skanerlash natijasi FireBug oynasida ko'rsatiladi).
Kengaytma tarkibidagi barcha fayllarni tekshiradi. Agar saytda juda ko'p CSS qoidalari bo'lsa, skanerlash natijasini ko'rish uchun g'ildirakni aylantirishingiz kerak bo'ladi:
Ushbu natija har bir uslub faylidan keyin bir nechta bo'lsa ko'rsatiladi.
Barcha sahifalar skanerlanganda eksport qilingan tozalangan CSS havolasini bosing, natija yangi varaqda ochiladi, barchasini tanlang va .css kengaytmali faylga saqlang, har bir ishlatilmaydigan qoidadan oldin UNUSED yorlig'i bo'ladi:
Ushbu skanerlash usulining ikkinchi kamchiligi shundaki, bu kengaytma saytning ochiladigan (modal) oynalarini skanerlamaydi, afsuski, shuning uchun modal oynalar uchun CSS qoidalarini nusxalash kerak bo'ladi.
Ikkala minusga qaramay, mening fikrimcha, bu eng zo'r foydalanilmagan CSS qoidalari uchun uslublar faylini tekshirish usulibugungi kunda mavjud.
Men uni umumiy og'irligi 360Kb - 18000 qatorli ikkita uslubiy fayllarni optimallashtirish uchun ishlatganman, buni ko'rib hayron bo'ldim. Ushbu usul bilan barcha manipulyatsiyalardan so'ng biz bitta uslubiy faylni oldik - 90Kb va 1100 qator, natijadan hamma xursand bo'ldi, men ham. To'g'ri, echim uzoq vaqt davomida izlandi, keyingi safar hamma narsa tezroq bo'ladi, bu juda yoqimli.
Men deyarli unutgan edim. Agar sayt xaritasi bilan sahifa yaratish imkoni bo'lmasa, nima qilish kerak? Bunday holda, siz sayt xaritasidagi har bir havolani tutqichlar bilan manzil satriga kiritishingiz kerak bo'ladi va barchasi yaxshi ishlaydi.
Aytgancha, agar siz WordPress tarkibini boshqarish tizimini tanlagan bo'lsangiz, unda ushbu maqolada siz unga qanday qilib sayt xaritasi qilishni o'rganishingiz mumkin.
Shuni ham ta'kidlaymanki, pullik xizmat skanerlash natijasini 24 soat ichida yuboradi va agar sizning saytingizda (manbangizda) 10 yoki 20 sahifali shablonlar mavjud bo'lsa, unda sizning chekingiz ulardan natijani kutish uchun sarflaganingizdan ancha kam vaqt talab etadi. Ammo, agar sayt juda ko'p sahifalarga ega bo'lsa va ular uchun turli xil shablonlardan foydalanilsa, albatta, bunday xizmat uchun 25 dollar to'lash tavsiya etiladi.
Umid qilamanki, uslublar jadvalini tekshirishning ushbu usuli sizga foydali bo'ladi.
Muallifdan: Monolitik uslublar haqida gapirish juda qiyin, chunki CSS fayllari odatda shishiradi. Ishlatilmaydigan CSS-ni olib tashlash, ishlarni to'g'ri yo'lga qaytarishi kerak. Ishlatilmaydigan uslublarni qidirishni boshlashdan oldin, shuni ta'kidlash kerakki, saqlanadigan uslublarni yozishning ko'plab boshqa strategiyalari mavjud. Bizning uslublarimiz mantiqiy qismlarga bo'linishi mumkin (sahifa tartibi, tugmachalar, katakchalar, vidjetlar va boshqalar) va tushunarli nomlash tizimidan foydalaning (masalan, BEM). Odatda, ishlab chiquvchilar buni foydalanilmagan qoidalarni izlashdan oldin qilishadi. Menimcha, bu to'g'ri, chunki uslublar uzoq muddatli ta'sirga ega.
Qoidalarning tez-tez qisqartirilmasligining yana bir sababi shundaki, kichik veb-loyihadan kattaroq narsada foydalanilmaydigan uslublarni topish va olib tashlash shunchaki noqulay. Agar tarkib statik bo'lmasa, qanday qoidalar va qaerda ishlatilishini qanday bilasiz?
Chrome ishlab chiquvchi vositasi
Ma'lum bo'lishicha, Chrome-ning ishlab chiquvchi vositalari allaqachon o'rnatilgan xususiyatga ega. O'chirish mumkin bo'lgan ko'plab uslublar borligini bilgan saytimda sinab ko'rdim. Tuyg'ular aralash edi. Kirish chegarasi juda past, ayniqsa Chrome ishlab chiquvchilar paneli bilan ishlagan ishlab chiquvchilar uchun. Hech narsa o'rnatishingiz shart emas, yoqimli.
Saytdagi uslublarni tekshirish uchun nima qilish kerak:
Qiziqarli saytni oching
Ishlab chiquvchilar panelini oching
Auditlar yorlig'iga o'ting
Veb-sahifa ishlashi parametrini tanlang va ishga tushiring
Natijalarning bir qismi "Foydalanilmagan CSS qoidalarini olib tashlash" ni o'z ichiga oladi. Agar yo'q bo'lsa, unda sizda foydalanilmagan uslublar yo'q. Tabriklaymiz! Natija uslublar bo'yicha buziladi. Buzilish faqat fayllar tomonidan emas, balki uslublar bloklari orqali amalga oshiriladi. Haqiqatan ham foydali funktsiya, chunki biz faqat yozgan uslublarga muhtojmiz. Hech bo'lmaganda ushbu maqola doirasida.
Bu yaxshimi?
Men super topmadim oson yo'l natijani Chrome-dan eksport qiling. Siz to'g'ridan-to'g'ri blokdan nusxa ko'chirishingiz mumkin, lekin avval uni kengaytirishingiz kerak. Bu natijalarni tahlil qilishni biroz noqulay qiladi. Sinovni brauzerda ishlatish bizni kod bilan ishlashdan ancha uzoqlashtiradi, bu esa saytni sinab ko'rishni unutishimizga olib kelishi mumkin.
Qabul qilish: boshlash uchun foydali, ammo uzoq muddatli echim emas.
UnCSS
Foydalanilmaydigan uslublarni topish uchun buyruq satri vositalaridan foydalanishingiz mumkin. UnCSS - bu qiziqarli misol. U phantomJS orqali sahifani chiqaradi va JS orqali kiritilgan uslublarni ushlaydi. Ushbu vositani sinab ko'rishni juda xohlardim, chunki bu mening muammomni hal qildi, chunki Chrome ishlab chiquvchilar paneli tahrirlash kodlari bilan umuman bog'liq emas. UnCSS yordamida natija to'g'ridan-to'g'ri faylga saqlanishi mumkin.
O'rnatish
Ubuntu-da npm-ni o'rnatishni amalga oshirolmadim. Hech narsa jiddiy emas, men bir nechta bog'liqlikni unutganman. Yo'qotilgan kutubxonalarni o'rnatish uchun men boshqargan buyruqlar:
sudo apt-get update sudo apt-get install-essential chrpath libssl-dev libxft-dev sudo apt-get install libfreetype6 libfreetype6-dev sudo apt-get install libfontconfig1 libfontconfig1-dev
sudo apt - yangilanishni oling sudo apt - get install build - essential chrpath libssl - dev libxft - dev sudo apt - libfreetype6 ni o'rnating libfreetype6 - dev sudo apt - install libfontconfig1 libfontconfig1 - dev |
UnCSS-ni qurish jarayoniga qo'shish mumkin, ammo biz buni hozircha qoldirmaymiz. O'ylaymanki, uni qurish jarayoniga kiritish bu eng katta narsa emas yaxshi fikr... Addy Osmani bu mavzuda yaxshi maqolaga ega. Ideal holda, biz ishlatilmaydigan uslublarni to'g'ridan-to'g'ri koddan olib tashlamoqchimiz, ularni faqat oxirgi mahsulot uchun filtrlamaymiz.
Ehtimol, eng yaxshi chiqish yo'li ikkalasini ham qilishdir. Birinchidan, uni kodingizni optimallashtirish uchun oldindan tuzilgan qadam sifatida ishlating. Ikkinchidan, o'zingiz boshqarolmaydigan uslublarni optimallashtirish uchun qurilish bosqichini bajaring.
Buyruq satridan foydalanish
uncss http://your-site.foo/\u003e unused-styles.css
uncss http: //your-site.foo/\u003e unused-styles.css |
Natijada sayt uslublariga your-site.com va chrome brauzerilekin bitta faylda saqlanadi. Mening saytimda shrift-ajoyib va \u200b\u200bishlatilmaydigan barcha belgilar mavjud uy sahifasi, UnCSS chiqishiga kirdi. Hozir men uchun bu muhim emas. Buyruqni qayta ishga tushirish va ignoreSheets-ni ko'rsatish orqali ularni yashirish mumkin.
IgnoreSheets qatorni (e'tibor berilmasligi kerak bo'lgan uslubning to'liq URL-manzili) yoki oddiy ifodani qabul qilishi mumkinligini unutmang. Muntazam ifodalash osonroq, chunki belgilar kamroq va fayl yo'lidagi o'zgarishlarni qamrab oladi.
IgnoreSheets /.*font-awesome.min.css/
Bu sahifa tugashi bilan paydo bo'lgan xato xabari. Vaqtni -t N bilan oshirish mumkin, bu erda N millisekundalar soni (keyin kod nima uchun 5 daqiqa kutmaganligi haqida o'ylash uchun -t 360 dan foydalanmang).
Xulosa: uslublarni tahrir qiladigan joyga yaqinroq bo'lgani uchun UnCSS qulayroq. Chiqish fayli keraksiz uslublarni yo'q qilish uchun foydalidir. Buning uchun foydalanishni odatiy ifoda ostida bo'lgan hamma narsani avtomatik ravishda e'tiborsiz qoldiradigan –includeSheets opsiyasi tufayli ko'rmoqdaman. Masalan, turli xil plaginlar o'z uslublarini jalb qilishi mumkin bo'lgan WordPress saytlari uchun qulay, ammo ishlab chiquvchiga faqat style.css mavzusi kerak.
Qaysi vositadan foydalanishingiz kerak?
Birinchidan, men tanlovni UnCSS-ga berdim va qulay buyruq satri... Ammo, men ushbu maqolani yozayotganda, ularni yana bir nechta saytlarda sinab ko'rdim va unchalik umidvor bo'lmagan natijalarga erishdim. Xususan, menda bir necha yil oldin doimiy sharhlardan foydalanadigan ramkadan foydalanadigan bir nechta saytlar mavjud / *! * ... * /. Ular PostCSS bilan yaxshi ishlamaydi, shuning uchun ular UnCSS bilan yaxshi ishlamaydi. Men hali muammoni hal qilmaganman, lekin ehtimol ko'proq yangi versiyasi PostCSS bunday sharhlarni kechiradi. Biroq, hozirda bu yana bir to'siq bo'lib qoldi va men o'z ishimda UnCSS-dan to'liq foydalana olmayapman.
