Kod Stili Kılavuzlarıyla CSS Nasıl Optimize Edilir

Tasarımcılar stil rehberleri hakkında konuşurken, genellikle üzerinde anlaşmaya varılmış bir el kitabı üzerinde uyumlu görünüm ve his iyi tasarlanmış bir web sitesinin veya uygulamanın renk şeması, tipografi ve kullanıcı arabirimi tüm projede kullanılır.

Web geliştirmede de kullanabileceğimiz başka bir stil rehberi var ve bu kadar önemli ancak çok nadiren tartışılıyor: kodun kendisi için stil kılavuzları. Kod stili kılavuzları, tasarımcılardan ziyade geliştiriciler içindir ve ana hedefleri CSS veya diğer kodları optimize etmektir..

Uygun kod stili kılavuzlarını kullanmak, bize daha iyi organize edilmiş, tutarlı kod tabanı, geliştirilmiş kod okunabilirliği ve daha fazla korunabilir kod. Google, AirBnB veya Dropbox gibi büyük teknoloji şirketlerinin bunları iyi bir şekilde kullanması tesadüf değildir..

Bu yazıda, CSS kod stil kılavuzları yardımıyla CSS'imizi akıllıca nasıl optimize edebileceğimize bir göz atacağız..

Kod Stili Kılavuzları ve Kalıp Kütüphaneleri

Endüstrimizde, stil rehberi olarak adlandırabileceğimiz konusunda belirli bir belirsizlik derecesi var.. Ayrı Bir Liste örneğin, terimi ile eşanlamlı olarak kullanır desen kitaplığı Bu yazıda, ancak diğer yazılarda da bu tür tanımlara girebiliriz..

Öte yandan, kod stili kılavuzlarını desen kitaplıklarından ayıran CSS Tricks veya Brad Frost'un blogu gibi yayınlar da var. Bu ikinci yaklaşım muhtemelen bizi iyi optimize edilmiş bir web sitesine yaklaştırır. Ayrı ayrı kod ve tasarım kullanmamızı sağlar, bu yüzden bu yazıyı kullanacağız.

Hem kod stili kılavuzları hem de desen kitaplıklarında bir stil stratejisi bulunur, ancak farklı bir tür. Bootstrap, Zurb Foundation, BBC'nin Global Tecrübe Dili veya MailChimp'in desen kütüphanesi gibi desen kütüphaneleri, bize önceden hazırlanmış CSS sınıfları, tipografi, renk düzeni, bazen bir ızgara sistemi ve diğer tasarım desenleri olan bir UI sağlar..

Evernote veya ThinkUp'lar (veya introda belirtilenler) gibi CSS kod stili kılavuzları, CSS yazma hakkında kurallar gibi şeyler dahil adlandırma kuralları, dosya yapısı, özellik sırası, kod biçimlendirme, ve diğerleri.

KSS, Styledown veya Pattern Lab gibi yaşam tarzı kılavuz jeneratörlerine dikkat edin., Desen kitaplıkları oluşturmak ve değil kodlama stili kılavuzları. Desen kitaplıkları da oldukça faydalıdır ve web geliştirme sürecini arttırırken, kodun kendisini optimize etmemize izin vermezler..

CSS Kod Stil Kılavuzunuzu Oluşturun

Bir CSS kod stili kılavuzunun nihai amacı, tümü aynı kod stil kurallarını izleyen geliştiriciler tarafından yazılan tutarlı, kolayca hata ayıklanabilir bir kod tabanıyla çalışmamızı sağlamaktır. Bir CSS kod stili kılavuzu oluşturmak biraz zaman alabilir, ancak yalnızca bir kez yapmamız gereken bu zahmete değer. Sonra aynı stil kılavuzunu farklı projeler için kullanabiliriz..

En iyi tarzın yol gösterici olduğunu not etmek önemlidir. sadece stil kurallarını içermez, aynı zamanda örnekler de içerir Geliştiricilerin kuralları daha sezgisel bir şekilde anlayabilmeleri için iyi ve kötü kullanım.

Örneğin AirBnB, geliştiricilere aşağıdaki kolayca sindirilebilir şekilde iyi ve kötü örnekler gösterir:

Dosya yapısı

Öncelikle, CSS dosyalarımızı düzenleyeceğimiz bir mantık bulmalıyız. Küçük projeler için bir CSS dosyası yeterli olabilir, ancak daha büyük projeler için her zaman kodu kırmak için daha iyi, ve Ayrı dosyaları daha sonra üretimde birleştirmek.

ThinkUp gibi bazı stil rehberleri de bizi uyarır. satır içi veya gömülü stilleri kullanmamak kaçınılmaz olmadığı sürece; aynı zamanda uygulamaya değer olan faydalı bir kuraldır.

yuvalama

Yuvalama CSS'de harika bir özelliktir, ancak zaman zaman kontrolden çıkabilir. Kimse özellikle mutlu hissetmez, özellikle sinir bozucu bir hata ayıklama sürecinin ortasında, bunun gibi ekstra uzun seçicilere çarpmak:

 .class_1 .class_2 # id_1 # id_2 yayılma süresi color: #bad;

Bu yüzden her zaman iyidir makul bir yerleştirme limiti koymak, örneğin GitHub stil rehberinde üç seviye seçti. Yerleştirmeyi sınırlayarak kendimizi daha iyi yapılandırılmış bir kod yazmaya zorlayabiliriz.

Adlandırma Kuralları

Kodumuzu aylar hatta yıllar sonra anlamak istiyorsak, CSS seçicileri için tutarlı adlandırma kurallarını kullanmak çok önemlidir. Orada birçok çözüm var ve takip etmemiz gereken tek bir kural var yani bir seçici adı bir rakamla başlayamaz.

Seçici adlandırmada kullanılan dört genel stil .küçük, .under_scores, .çizgi-es, ve .lowerCamelCase. Bunlardan herhangi birini seçmek sorun değil ama tüm proje boyunca aynı mantığı izlememiz gerekiyor.

kullanma sadece anlamsal seçici isimleri istersek de önemlidir anlamlı kod var. Örneğin, yerine .kırmızı buton (hangi düğmenin ne yaptığını göstermez) kullanmak daha iyi .uyarı düğmeli isim (ne yaptığını söyler), bu şekilde, geliştiricilerin (ve gelecekteki benlerimizin) söylenen düğmenin ne yaptığını anlamalarını sağlıyoruz..

Dahası rengini gelecekte kırmızıdan başka bir şeye değiştirmek istiyorsak, uğraşmadan kolayca yapabiliriz. Ayrıca BEM (Blok, Eleman, Değiştirici) sözleşmesi gibi önceden hazırlanmış CSS adlandırma kuralları da vardır. tutarlı bir adlandırma yapısına neden olur benzersiz ve anlamlı isimlerle.

Biçimlendirme Kuralları

Kod biçimlendirme, boşluk kullanımı, sekmeler, girintiler, boşluklar, satır sonları vb. Gibi şeyleri içerir. Biçimlendirme konusunda gerçekten evrensel olarak iyi veya kötü bir yöntem yoktur, yalnızca tek kural kural okunabilir bir kodla sonuçlanan tutarlı kuralları seçin, ve onları takip et.

Örneğin Dropbox, geliştiricilerin özellik bildirimlerinde iki nokta üst üste boşluk koymalarını gerektirir; Evernote ise girinti için iki boşluk kullanır. Konforlu olduğumuz kadar biçimlendirme kuralı oluşturabiliriz, ancak asla kavrayabilmek mümkün değil.

Beyan Emri

Sipariş edilen şeyleri görmek her zaman daha kolaydır ve CSS bildirimleri sipariş etmek (değerleri ile özellikleri) Mantıklı bir kurala göre daha iyi organize edilmiş bir kodla sonuçlanır.

Örneğin, WordPress'in özellik sıralaması kurallarına bir göz atın, hangi özelliklerin anlamlarına göre gruplandırıldığını sıralamak için aşağıdaki basit ancak mantıksal temeli tanımlar:

Görüntüle
Konumlandırma
Kutu modeli
Renkler ve Tipografi
Diğer

Birimler ve Değerler

Birimleri ve değerleri nasıl kullanmak istediğimize karar vermek, yalnızca tutarlı bir kod görünümü elde etmek için değil, aynı zamanda bunu yapmazsak garip bir şeyle sonuçlanabilir.

Alternatif olarak kullanan bir site hayal edin px, em, ve rem uzunluk ölçüleri. Kod düzenleyicide yalnızca kötü görünmeyecek, ancak büyük olasılıkla bazı öğeler o sitede şaşırtıcı derecede küçük veya büyük olacak.

Ayrıca renk değerleri (onaltılık, rgb veya hsl) ve kısa yol özelliklerini kullanmak isteyip istemediğimiz ve hangi kurallara göre karar vermemiz gerekir. Girdiğim her CSS kod stili kılavuzunda yer alan bir talimat var.. 0 değer için birimler belirtmeyin (gerçekten, sadece yapma).

.sınıf // iyi marj: 0; // hatalı marj: 0px; // kötü marj: 0em; // hatalı marj: 0rem;

yorumlarında

Yorum kodu tüm dillerde, ancak CSS’de önemlidir. sadece hata ayıklama ve dokümantasyon yapmayı kolaylaştırmaz, aynı zamanda CSS kurallarını mantıksal gruplara böler. İkisini de kullanabiliriz / *… * / ya da // ... CSS'deki yorumlar için gösterim tarzı, önemli olan tutarlı ol Projemiz boyunca yorumlarla.

Örneğin Idiomatic CSS, bazı ASCII sanatlarını bile kullanan ve güzelce düzenlenmiş bir kodla sonuçlanan anlamlı bir yorum sistemi oluşturur: