Kodunuzu Yaşam Tarzı Kılavuzlarıyla Kolayca Nasıl Yapabilirsiniz?

Yesteryear'ın stil rehberleri, genellikle markalama ve renk kullanımına odaklanan tasarım odaklı belgeler olarak düşünülür. Ancak Facebook ya da Google'ın geniş ürün yelpazesi gibi web siteleri için delice büyük kodların ortaya çıkmasıyla birlikte stil rehberleri gelişti.

Bu günlerde, yaşam tarzı kılavuzları, mevcut kod tabanı ve kullanım durumları için daima güncel belgeler içermektedir. Bu belgelerle, kod tabanımızın nasıl optimize edildiğini anında görerek, daha fazla bakım ve yeniden kullanılabilir kod yazabiliriz.

Yaşayan bir rehberde neler var?

Yaşam tarzı rehberleri eski meslektaşlarına benzer; Kod kullanımının genel hatlarının yanı sıra logo ve marka bilgileri, renk kullanımı içerirler. Kod taslağı bölümü, çoğaltılan veya yakından benzer kodları kolayca bulabileceğiniz ve kod tabanınızı optimize etmek ya da halihazırda kullanımda olan bileşenleri görüntülemek için bunları birleştirebileceğiniz yerdir. Çoğu kılavuz, her kod örneğinin belgelendiği veya yalnızca kasıtlı olarak modüler kodun belgelendiği “günlük” stil yaklaşımını gösterir.

Bu kılavuzlar yalnızca HTML ve CSS'ye odaklanmakla kalmaz, aynı zamanda JavaScript ve PHP gibi performans için modülerleştirilebilecek diğer dillere de odaklanır. Yaşam tarzı rehberlerinin birkaç sağlam örneği bulunabilir. Github , Mozilla , ve MailChimp . Bu örneklerden de görebileceğiniz gibi, her bir bileşenin koduyla birlikte kullanım durumlarını görüntülemek için bir sayfanın veya alt sitenin olması yaygındır. Bu, onlara ihtiyaç duyduğunuzda ve bileşenlerin etkileşimli bir şekilde nasıl çalıştığını görmek için bilmediğiniz tasarımcıların veya geliştiricilerin ihtiyaç duyduklarında onları almayı ve almayı kolaylaştırır.

Kendi yaşam tarzı rehberinizi başlatmak

Kendi yaşam tarzı kılavuz belgelerinizi baştan başlamak, özellikle büyük projeler için göz korkutucu görünebilir. Ama genellikle, bunu yapmak için gereken zamanın yatırımında bir geri dönüş var. Daha büyük projeler, site stillerinin ve kod yapısının yaşayan belgelerinden müteşekkildir. Daha küçük projeler daha az dikkat çekicidir, ancak bazen de değerlidir, zaman yatırımınıza geri dönersiniz. Her iki durumda da, bir gün başka bir tasarımcıya veya geliştiriciye verilebilecek bir proje üzerinde çalışıyorsanız, bu tür belgeleri görmek için günlerini yapar.

Vakıfla başla

Sık kullandığınız bileşenler, canlı bir stil kılavuzu için en iyi kullanım çantasıdır, düğmeler hemen akla gelir. Belgelemeyi değerlendirmek isteyebileceğiniz kısa bir liste, mizanpaj seçenekleri (muhtemelen bir ızgara sistemini özetleyen), tipografi, renk kullanımı, düğmeler ve link stilleri, form stilleri, bildirimler veya uyarılar ve liste stilleridir. Yeniden kullanılabilir olmanın faydası olabilecek hemen hemen her şey eklenebilir. Ana hatlarını çizerken, şeyleri esnek tutmayı unutmayın. Kesinlikle gerekli olmadıkça, bir sayfaya veya tuşa özgü bir uyarı veya düğme kullanmayın. Bunun yerine, renk, tipografi veya estetik değişiklikler gibi şeyler için temel temeli oluşturmak için düzenleyici sınıflar ekleyin. Bu şekilde, düzenleyici sınıfların her kullanım durumu için belirli şeyleri değiştirmesine izin verirken tutarlı bir genişlik, yükseklik ve metin boyutu atamak için .button sınıfına her zaman güvenebilirsiniz.

Sürdürülebilir kodun amacı

Sürdürülebilir kodun amacı, nesneleri yeniden kullanılabilir ve geleceğe hazır hale getirmektir. Bildirim çubukları, düğmeler, üstbilgiler ve altbilgiler gibi bileşenler, yeniden kullanılabilir kodun harika örnekleridir - Sitede veya aynı sayfada birden çok kez kullanabileceğiniz şeyler. Gerçeği geçtikten sonra daha kalıcı hale getirmek için eski veya daha önce yazılı kodu kırıyorsanız, aslında oldukça basittir. CSS'yi temellere indirerek başlayın. Yükseklik, genişlik ve konum gibi yapısal şeyleri tanımlayan bir bileşen sınıfıyla birlikte kalmalısınız. Renk veya tipografi gibi estetik şeyleri değiştirmek için ek değiştirici sınıflar kullanılabilir. Ayrıca, projeniz her sayfa için bir beden kimliği veya sınıf kullanıyorsa, bu şekilde sayfa başına benzersiz kullanım durumları oluşturabilirsiniz. Stil rehberinize kolayca ağırlık kazandıracağından, bu uygulamaya çok fazla başvurmamaya özen gösterin.

KISS Principle Öpücük prensibi modüler geliştirme süreci için de uygun bir tasarım prensibidir. Basit, bakımı kolay bir kod yazmak, bileşenlerinizi basit tutarak genellikle en kolay olanıdır. Basitlik söz konusu olduğunda, aynı sonucu elde ederken, işleri daha verimli hale getirmek ve / veya daha az kod kullanmak mümkün olursa, bizim bileşenlerimiz bunun için yazılmalıdır. Sürdürülebilir bir kod yapısının nihai hedefleri, sürdürülemez bir muadilden daha küçük, ve çok daha verimli bir şeye sahip olmaktır.

CSS'de adlandırma kuralları

Bakımlı bir kod yapısı ile çalışmaya geldiğinde, adlandırma kuralları çok önemli hale gelir. Tanımlayıcı CSS sınıflarının yazılması, kod tabanınızın bakımının kolay bir iş olmasını sağlamak için uzun bir yol kat edecektir. Var limit yok CSS sınıfı uzunluklarında, bunu avantajınıza göre kullanın. Bununla birlikte, net bir adlandırma kuralına sadık kaldığınızdan emin olun, zira alt çizgi ya da deve harfleri gibi küçük harfli isimlerin karşısına kolayca karıştırabilirsiniz. Bileşen sınıflarını çok açıklayıcı hale getirmek, genellikle değiştirici sınıfları daha az yapmak için genellikle harika bir fikirdir. Aşağıda, bir düğmenin, benzersiz bir kullanım durumu kuralı ve değiştirici sınıflarının bir örneği verilmiştir.

  / * Bu bir bileşen sınıfıdır, yalnızca temel yapısal kuralları içermelidir * /. Düğmesi {display: block; width: 250px; height: 48px; satır yüksekliği: 48px;} / * Bu benzersiz kullanım durumu, kullanılan bir düğmeyi özetlemektedir. ana sayfada * /. homepage-cta-button {display: blockmargin: 0 auto 50px; width: 180px; height: 60px; satır yüksekliği: 60px;} / * Değiştirici sınıflar aşağıdadır, bunlar bileşene ek olarak eklenir renk veya diğer estetik değişiklikleri eklemek için sınıf * /. kırmızı {background: # C54F48} .çevre {border-radius: 5px;} 

Otomatik çözümler

Otomatik stil kılavuzu jeneratörler stil kılavuzları için itme yardımcı olmak için sola ve sağa haşhaş başladı. Stil prototip Ram Richard ve Mason Wendell tarafından yapılan bir SASS jeneratör Takım SASS . Şu andaki benzer jeneratörler gibi daha iyi seçeneklerden biri. hologram , Kalei , StyleDocco , ve KSS Ayrıca yararlı olduğunu kanıtlıyor.

Otomatik vs el yapımı

Her zaman olduğu gibi, burada her iki yöntemi de kullanmanın artıları ve eksileri vardır. Otomatik çözümler hızlıdır ve gerçeğin ardından kullanılabilir, ancak bazen de katıdırlar. El yapımı stil rehberleri, her şeyin yollarını ve çıkışlarını bilmenizi sağlar, ancak daha fazla zaman alır. Şahsen, el yapımı yaklaşım çoğu durumda benim için en iyisidir, çünkü diğer geliştiricilerle çalışmak açısından en esnek olanıdır. Ancak, otomatik çözümlerin bazılarını denemek için, sadece nasıl çalıştıklarını ve kodunuz hakkında ne söylediklerini öğrenmek için zaman ayırmaya değer.

Kodunuzu gözden geçirme

Web siteleri asla bitmez. Bir şeyleri değiştirir, yeni tarzlara ve trendlere geçiş yaparız ve sonunda geçmiş revizyonlardan çok fazla kodla sonuçlanabiliriz. Her şeyin gözden geçirilmesi ve bir şeylerin olabildiğince temiz olmalarını sağlamak için bir anı ve geri dönüp bakmanın “sonuna” bakmanız önemlidir. Bu noktada, her bir bileşeni (ve değiştirici sınıfları) Codepen tarayıcı desteğini test etmek ve buna göre not almak. Bu, destek kısıtlamaları olan bir sayfa tasarlıyorsanız, daha sonradan zaman kazandırabilir. Gözden geçirirken, birbiriyle çelişen veya kutu model problemlerine neden olabilecek bileşenlere dikkat edin.

Sonuç

Sonuç olarak, stil kılavuzları çok manipulatif ve esnek olan, ancak yine de bakımı ve okuması kolay olan bir kodla sonuçlanmalıdır. Böyle bir sonuca ulaşmak için ne kadar zaman harcayacağımızı düşünerek, yaşam tarzı rehberlerinin daha büyük projelerde daha küçük projelerden çok daha ölçülebilir bir etkisi vardır. Kompleks ya da büyük projeler, tüm optimizasyon ve performans artışlarından çok daha fazla fayda sağlar, bu da söz konusu sonuçlara ulaşmak için harcanan zamana değer. Küçük bir web sitesi veya proje için bir yaşam tarzı rehberi oluşturmak, zaman yatırımına layık değildir.

Sonuç olarak, hepimiz geleceğe dönük bir çalışmaya odaklanan temiz ve sürdürülebilir bir kod yazmaya çalışmalıyız. Yaşam tarzı rehberleri, böyle bir iş akışını teşvik etme eğilimindedir ve geliştiricileri ve izleyicileri daha mutlu hale getirme konusunda yardımcı olur.

Öne çıkan görsel / küçük resim, görüntü programlama Shutterstock üzerinden.