Refactor CSS - Bir Kılavuz
Yönetilebilir ve optimize edilmiş bir kod tabanına sahip olmak istiyorsak, CSS refactoring'in ön uç geliştirme iş akışının önemli bir parçası olması gerekir. CSS’i yeniden yansıtdığımızda, mevcut kodumuzu temizleyin ve yeniden düzenleyin herhangi bir yeni özellik eklemeden veya hataları düzeltmeden.
Yeniden düzenleme yardımcı olur CSS patlamasını önleme, kod okunabilirliğini ve yeniden kullanılabilirliği iyileştirme, ve CSS'i daha şık ve daha hızlı yürütmek için yapar.
Kısa bir süre sonra yeniden yapılanmaya ihtiyaç duyulur; kısa ve sonra bir özlü ve organize kod üssü ile başlayan projeler bile netliklerini yitirmeye başlar; tutarlılık, eski kurallar ve yinelenen kod bölümleri görünür; ve ayrıca stilleri geçersiz kılmaya ve gittikçe daha fazla sayıda hack ve geçici çözüm kullanmaya başladık..
CSS kod tabanımızı sürdürülebilir tutmanın en iyi yolu “refaktör erken, refaktör sık sık” başparmak kuralı. Bu yazıda, etkili bir CSS refactoring işlemini nasıl uygulayabileceğimize dair bazı ipuçlarına göz atacağız..
1. İlk Denetimin Yapılması
Yeniden alevlendirmek için neye ihtiyacımız olduğuna dair daha iyi bir resim çekmek için, en iyisi Elimizde ne olduğunu görmek için kapsamlı bir denetim ile başlamak.
Bu çalışmada bize yardımcı olabilecek birçok harika çevrimiçi araç var. CSSDig, bir web sitesinin CSS'sini analiz eden ve çok özel seçiciler veya tekrarlayan özellikler gibi zayıf yönlerini inceleyen güçlü bir Chrome uzantısıdır..
Kullanılmayan CSS kullanılmayan CSS kurallarını araştırırken, CSS Lint gibi linting araçları hızlı bir şekilde uyumluluk, bakım kolaylığı ve diğer sorunları bulmayı mümkün kılar.
Mimari seviyede birçok sorun ancak bu şekilde yakalanabildiğinden, ilk denetim sırasında kodu manuel olarak incelemek de önemlidir..
2. Yönetilebilir Bir Plan Kurun
Çalışma kodunu yeniden düzenlemek her zaman göz korkutucu bir görevdir, ancak ne yapmamız gerektiğine dair bir plan oluşturursak, yeniden düzenleme işlemini yönetilebilir parçalara ayırmak ve uygulanabilir bir zamanlama yapmak için acıyı azaltabiliriz.
CSS yeniden düzenlemesinde, her zaman göz önünde bulundurmamız gereken çok önemli bir şey var: Yeniden düzenlediğimiz bazı şeyler, örn. Seçici adlarını değiştirmek, yapacak İlgili HTML ve JavaScript dosyalarının kodunu ayarlamak için gerekli yanı sıra.
Bu nedenle bu iyi bir fikir gerçekleştirmemiz gereken bu ek değişiklikleri izlemek, ve onları yeniden düzenleme programımıza dahil et CSS ile ilgili birincil görevlerle birlikte.
3. İlerlemeyi İzleme
Yeniden taşımacılığa başlamadan önce, bu önemli bir adımdır. ilk dosyalarımızı yedekle. Git veya Subversion gibi bir sürüm kontrol sistemini iş akışımıza dahil etmek, yeniden yapılanma sürecini de önemli ölçüde artırabilir, çünkü attığımız sıralı adımlar hakkında bir kayıt sahibiyiz ve bir şeyleri tekrar yapmak istiyorsak önceki aşamaya dönebilecek.
4. Kodlama Stili Kılavuzuna Yapış
Tutarlı bir kodlama stili kılavuzu kod okunabilirliğini ve bakımını önemli ölçüde geliştirebilir, bu nedenle yeniden aktive etmeye başlamadan önce CSS kodlama stili kılavuzunu ayarlama.
Karar verilmesi gereken önemli noktalar:
- adlandırma kuralları
- biçimlendirme kuralları
- bildirim emri
- kullanmak istediğimiz birimler ve değerler
- yorum kuralları
Kendi kodlama stil rehberimizi oluşturmak istemiyorsak, Github'da bulabileceğiniz ThinkUp gibi bir başkasını da kullanabiliriz..
Sadece bir kodlama tarzı rehber tanıtmak için yeterli değil, aynı zamanda ihtiyacımız var kodu yeniden yazdığımızda ona sadık kal yeniden düzenleme sırasında ve herkesten aynısını bekle projemiz üzerinde kim çalışıyor.
5. Tutarlı bir Dosya Yapısı Kurun
Hazırlıklara hazır olduktan sonra, yapmamız gereken ilk şey, CSS'nin basamaklı yapısına dikkat eden uygun bir CSS dosya yapısı oluşturmaktır..
Genelde projeye dosyalarımızı nasıl en iyi şekilde ayarlayacağımıza bağlı olmakla birlikte, ayrı bir kullanım gibi bazı evrensel kurallar vardır. normalize.css CSS sıfırlama stilleri için dosya, ayrı global.css Tüm proje boyunca kullanılan global stiller ve 3. parti kütüphanelerini ayrı bir klasörde saklamak için.
CSS dosya yapımızla güvenli bir şekilde oynamak istiyorsak, SMACSS veya ITCSS gibi hazır bilgi teknolojisi hakkında etkili teknikler sunuyor. CSS dosyalarını ölçeklenebilir bir şekilde nasıl düzenleyebilirim?.
6. Kullanılmayan ve Yinelenen Kurallardan Kurtulun
Bir süre sonra, CSS dosyaları genellikle yeniden yapılanma sırasında tanımlamamız ve temizlememiz gereken kullanılmayan kurallarla dolmaya başlar. Bize olanak sağlayan birçok çevrimiçi araç var bu eski kuralları araştırmak, ve bazen de onları hızlı bir şekilde hendek etmemize izin veriyor.
Bu amaç için en iyi bilinen araç, muhtemelen kullanılmayan CSS kurallarından hızla kurtulmayı mümkün kılan bir Node.js modülü olan UnCSS'dir ve ayrıca temizleme işleminde ince ayar yapmayı kolaylaştıran karmaşık yapılandırma seçenekleri de sunar..
Dikkate almak önemlidir kullanılmayan kuralları mutlaka kaldırmak istemeyin herşey sahip olduğumuz CSS dosyaları, örneğin genel, sıfırlama veya 3. parti stil sayfalarından; onları hariç tut temizlik yaparken.
Eski kurallarla birlikte, tekrarlanan kurallar ayrıca gereksiz kod şişmesine ve performans kaybına yol açar. Onları CSS Purge Node.js modülünü kullanarak kaldırabiliriz, ancak Çift kuralları aramak için CSS linters CSS dosyalarımızda.
7. özgüllüğü azaltmak
Bir CSS seçicinin özgüllüğü, içerdiği iç seçicilerin sayı ve tiplerinden hesaplanır. CSS özgüllüğü, bu görsel CSS özellik hesaplayıcısını kontrol edersek, anlaşılması en kolay 4 basamaklı bir sayı olarak ifade edilir:
En düşük özgüllük (0001gibi yalnızca bir genel HTML öğesini hedefleyen seçicilere aittir. veya . Bir bileşik seçicinin iç seçicileri ne kadar fazla olursa, özgüllüğü o kadar yüksek olur..
Bazı seçiciler, örneğin İD veya satır içi stillerden gelen seçicilerin daha yüksek öncelikleri vardır, çünkü daha genel seçicilere ait stilleri geçersiz kılarlar. Örneğin, özgüllüğü # id1 seçici 0100.
Yeniden yapılanmada amaç, seçicilerin özgünlüğünü mümkün olduğunca azaltmak (onları kısa tutmak) olmaktır. özgüllüğü yüksek olan seçiciler, seçicinin yeniden kullanılabilirliğini önemli ölçüde azaltır, ve şişirilmiş bir kod tabanına yol açmak.
3 ana yüksek özgüllük seçici türü:
- Nitelikli seçiciler, gibi
p.class1(tanımlayanpetiketi, aynı sınıfı diğer HTML öğeleriyle birlikte kullanmayı imkansız kıldığından gereksizdir) - Derinden iç içe seçiciler, gibi
.class1 .class2 .class3 .class4… - kimlikleri, gibi
# id1
Adım 1'de belirtilen CSSDig gibi çevrimiçi araçlar, bu yüksek özellikli seçicileri hızlı bir şekilde bulmak için kullanılabilir. Ayrıca, kodlama stili kılavuzunda, maksimum yuvalama düzeyi gibi şeyler hakkında bir kural ayarlamak ya da kullanımla ilgili bir sınır belirlemek de faydalı olabilir. İD seçiciler.
8. Yabancı Ot !önemli kurallar
CSS kuralları !önemli deyim normal stil kurallarını geçersiz kılar. kullanma !önemli er ya da geç kuralları tutarsız koda yol aç. Çoğu linting aracı onları hata olarak nitelemek bir tesadüf değildir..
Hızlı bir şekilde CSS yazmamız gerektiğinde, sadeliği nedeniyle bunlara güvenmeye başlayabiliriz.
Ana sorun !önemli bildirimler, gelecekte onları geçersiz kılmak istiyorsak daha da fazla koymak zorunda olduğumuzdur. !önemli kullanımda beyanlar, bu nedenle yeniden düzenleme sürecinde mümkün olan her yerde onları ayıklamak en iyisidir..
9. Sihirli Sayıları ve Sabit Kodlanmış Değerleri Temizleme
Günlük CSS iş akışımız sırasında bazen çözemediğimiz sorunlara rastlarız ve sözde kullanmaya başlarız. sihirli sayılar, Bazı nedenlerden dolayı çalışan değerler ancak nedenini anlamıyoruz. Örneğin, aşağıdaki örneği ele alalım:
.class1 position: mutlak; üst: 28 piksel; solda:% 15,5;
Sihirli sayılarla ilgili temel problem, ikinci derecede, ve onlar somutlaştırıyor “permütasyonla programlama” antipattern. Yeniden düzenleme sürecinde bu keyfi kuralları kodumuzdan çıkarmamız ve mümkün olan her yerde bunları daha makul çözümlerle değiştirmemiz gerekir..
Aynı kural geçerlidir kodlanmış değerler yanı sıra. Muhtemelen en çok kodlanmış değerlerin meydana gelmesi çizgi yüksekliği kurallarında bulunabilir:
/ * bad, .class1 * / .class1 alt öğelerine ek sabit satır yüksekliği kuralları eklememiz gerekecek font-size: 20px; hat yüksekliği: 24px; / * iyi, esnek satır yüksekliği kuralı alt öğeler tarafından da güvenle kullanılabilir * / .class1 font-size: 20px; hat yüksekliği: 1.2;
Sabit kodlanmış değerler, kodumuzu daha az geleceğe ve daha katı hale getirir, bu nedenle yeniden düzenleme işleminin bir parçası olarak bunları kazmamız gerekir ve onları esnek değerlerle değiştirin.
10. Refaktör Üniteleri ve Değerleri
Gelecekte bakım ve hata ayıklamayı kolaylaştırmak ve farklı birimler kullanmaktan kaynaklanan arızaları önlemek em ve px, aynı anda, ihtiyacımız var Göreceli ve mutlak değerleri nasıl kullandığımız konusunda tutarlı kurallara sadık kalın.
Onları geçmişte tutarsızca kullanırsak, özlü bir sistem oluşturabilmek için onları dönüştürmemiz gerekir.
Sitemizde çok fazla benzer renk kullanırsak, bu aynı zamanda akıllıca bir şey olabilir. renk şemasını rasyonelleştirmek Kullandığımız renk sayısını azaltarak. (İşte bir web sitesi renk şeması pratik bir şekilde nasıl seçileceği üzerine bir yazı.)
