CSS'mi temiz, iyi yazılmış ve uygulamalara en uygun hale getirmeme yardımcı olan 8 kuralı sizlerle paylaşıyorum. Birleştiğinde, bu kurallar size iyi ve ölçeklenebilir CSS altyapısı için mükemmel bir şablon verecek.
CSS, her modern web uygulamasında yer alması gereken önemli bir unsurdur. Ancak, web uygulama geliştiricileri için, CSS genellikle gözden kaçıyor veya uygulamayı asıl oluşturan kodlama ve programlama ile karşılaştırıldığında daha az önem taşıdığına inanılıyor. Aslında, CSS ve kodlamanın benzer olması -ki işe yarayan bir kod yazmak zaten kolay, daha yakından incelendiğinde tonlarca kötü yazılmış kodun olduğunu gösteriyor.
Kurallar
1.Ön işlemci kullanın
Ön işlemciler olmadan başa çıkması ve yönetmesi kolay bir DRY CSS kodu oluşturmak hayli zordur. Bu nedenle, başlarken ilk dayanak iyi bir ön işlemci oluyor. İyi bir ön işlemci, kodunuzun daha temiz ve kolay yönetilebilmesini sağladığı gibi ayrıyeten bir sürü harika temel özellik sunar.
2. Stil kılavuzunuzu tanımlayın
Muhtemelen JS veya Ruby için bir stil kılavuzu kullanıyorsunuzdur. CSS'de farklı bir yol izlenmemelidir. Projeye stil kılavuzu tanımlayarak başlamak son derece önemlidir. Her stil kılavuzu; sözdizimini, kurallar sıralamasını ve isimlendirme kurallarını kapsamalıdır. Sizi biraz uğraştıracak gibi mi gözüküyor? Endişelenmeyin, büyük şirketlerin çoğu CSS stil kılavuzlarını herkese açık bir şekilde paylaşıyor. Bu nedenle sıfırdan başlamak zorunda değilsiniz, paylaşılan kılavuzlardan yararlanabilirsiniz. Öneğin, Sass Yönergeleri başlamak için harika bir seçenek.
Araçlar
Süreçlerinizi otomatikleştirmeniz gerektiğine inanıyoruz. Şans eseri, stil kılavuzlarına kolaylıkla uyum sağlayan birkaç seçenek var. Yerel gelişme için scss-lint'i deneyin (Sublime ve Vim eklentileri de mevcuttur). Github'da kodlarınızı saklarken, Hound'u denemenizi öneririm. Github, stil kılavuzu ihlalleri için şikayette bulunmak veya şikayet çekmek için bir araçtır. Hound, scss-lint'e dayandığından, farklı yapılandırma dosyaları oluşturmak mecburiyetinde de kalmazsınız.
3. Desteklenen tarayıcıları belirleyin
Bir web sitesinin tüm tarayıcılarda düzgün çalışıp çalışmadığından emin olmak özellikle eski Internet Explorerlardan birini kullanmanız gerekirse başınıza bela olabilir. Uygulamanızın hangi IE sürümüyle uyumlu olduğunu belirlemekle başlayın:
- Hatasız ve stabil çalışmak,
- İyi görünmek,
- Sahip olduğu tasarımı yansıtmak.
Mümkün olduğunda, CSS'nin faydalarından yararlanın (gölgeler, dönüşümler vb. için). Uygulamanın tüm modern tarayıcılarda stabil bir şekilde çalıştığından emin olun. Autoprefixer’dan yardım alın, başınıza bela olabilecek işleri üstlenir.
4. Kodunuzu küçük parçalara bölün
CSS dosyalarınızı kısa ve öz bir hale getirmeye çalışın. Kodunuzu bileşenlere ve görünümlere bölün. Aynı nesneleri sitenizde tekrar tekrar kullanmak için bileşenlerden faydalanın. Tasarımınız bir siteye özgü ise, görünümü stil sayfalarından birinde oluşturun.
5. Değişken kullanın
Gereksiz sabit kodlamadan kaçınmak iyi bir uygulamadır. Değişkenler, kodunuzun daha iyi kontrol edilmesini ve sınırlandırılabilmesini sağlar. Gerektiği kadar çok değişken kullansanız da yine sabit bir CSS elde edeceksiniz. Renkler ve yazı tipi özellikleri (yazı tipi ağırlıkları, yazı tipi aileleri veya yazı tipi boyutları) de dikkate alınması gereken öğelerdir.
Değişkenler, z-endeksi değerleri üzerinde kontrol sağlamada son derece yararlıdır. Tüm z-endeksi değerlerini tek bir dosyada saklayın, böylece onlara ihtiyaç duyduğunuzda hızlı bir şekilde onlara ulaşabilirsiniz. Ayrıca, değerleri karşılaştırabilir veya değiştirebilirsiniz. İlk olarak, her bir z-endeksi değeri için değişkenleri tanımlayın:
Ardından, _z-index-variables.scss dosyasını oluşturun ve değerleri taban z-dizini değişkenlerini kullanarak ayarlayın.
Bu şekilde tüm katmanlarda kullanışlı bir genel bakışa sahip olursunuz.
6. Mixin ve genişlemeler kullanın
Bir Sass süper gücü daha. Kodunuzu DRY şeklinde tutmanıza epey yardımları dokunuyor. Denecek başka bir söz yok sanırım! Mixinleri veya genişlemeleri bilmiyorsanız, Sass özellikleri hakkında bilgi edinin ve UI geliştirmeyi başlatın.
7. Vektör kaynaklarını kullanın
Günümüzde fazla sayıda cihaz artık yüksek çözünürlüklü ekranlara sahip. Retina görüntülerdeki uygulamanız için durağan resimler yerine vektörleri kullanırsanız keskin ve net bir görünüm elde etmiş olursunuz. Dikkat çekici hale getirmek içinse SVG ve yazı tipleriyle oynayın. Ayrı dosyalar oluşturmadan renk veya boyutu kolayca değiştirebildiğiniz için daha az alan kaplarlar ve oldukça verimli sonuçlar alabilirsiniz.
8. Çerçeveleri kullanın
Çerçeveleri kullanmada en önemli unsur onları akıllıca kullanmaktır. Bootstrap veya Foundation'ı oldukları gibi dahil etmeyelim. Sass'ın gücünü burada da kullanın. Aşağıda, ön yüklemeyi özelleştirme için kullandığım desene yer verdim. Bir çerçeve dizini yaratarak başlayın. Yapı aşağıdaki gibi görünmelidir:
Bileşenler
Sadece ihtiyacınız olan bileşenleri içe aktarın. GitHub’ta Sass bileşenlerinin hepsini bulabilirsiniz. Kullanmayacağınız dosyalara açıklama girerseniz daha verimli çalışmış olursunuz.
Her bileşenin kodu doğrudan GEM veya NPM / Bower paketlerinden gelmelidir. Bu, kod kodun temelini çerçeveyle güncel tutmanıza yardımcı olur.
Değişkenler
Bootstrap veya Foundation gibi popüler çerçeveler istediğiniz şekilde özelleştirilebilir. Ön yükleme, değişkenlerinin dahil olduğu bir dosyaya sahiptir. Her satırın varsayılan Sass bayrağıyla bittiğine dikkat edin. Bu, o değeri kolayca geçersizleştirebilirsiniz demektir. Geçersiz kılma örneği basit bir örnektir. _variables.scss dosyasını oluşturun, orijinal Bootstrap dosyasının içeriğini buna yansıtın ve oluşanı inceleyin. Belirli bir değeri değiştirmek isterseniz, varsayılan bayrağı kaldırmanız hile yaptığınız anlamına gelir ve diğer tüm yaptıklarınızı geçersiz kılar.
Ne yazık ki, özel bir tasarıma sahipseniz, her şeyi değişkenlerle değiştiremezsiniz. Bazen standart geçişler tek yoldur. Geçersiz kılmaları, çerçeve bileşenleri ile uyumlu hale getirmek yapılabilecek en iyi şeydir. Bu şekilde, framework/overrides/_navbar.scss dosyasında yalnızca navbar bileşenini ve navbar'ı geçersiz kılmış olursunuz.
Sonuç
Tüm bu kuralları birleştirerek aşağıdaki stile ulaşın:
İşlemi tamamlamak için oluşturduğunuz tüm dosyaları uygulamanıza aktarmanız gerekir. Bütün dosyaları tek bir CSS dosyasında birleştirerek adımları takip edin (dosya adını alt çizgi ile öne koymayı unutmayın, böylece Sass olduğunu bilinir). Oluşan uygulama aşağıdaki gibi görünmelidir:
Z-dizini ve özel değişkenleri içe aktarmaya başlayın, böylece onları çerçeve değişkenlerinde geçersizleştirebilirsiniz. Bundan sonra tüm çerçeve bileşenlerini geçersiz kılınmış ayarlarla içe aktarın. Devre dışı bırakma değişkenlerini kullanarak devam edin (büyük olasılıkla burada da çerçeve değişkenleri kullanmak isteyebilirsiniz) ve yardımcı programları kullanarak istediğiniz şekilde geçersiz kılmalar oluşturabilirsiniz. Bileşen ve görünümleri içe aktararak bitirin. Tüm bunları kontrol altına alabilmek ve uygulamak için hepsini tek tek içe aktarın.
İşte bu kadar! Bu, iyi ve ölçeklenebilir bir CSS altyapısı yazmaya yönelik tarifimdir. Umarım yapı modelindeki kurallarım ve genel bakış açım size daha iyi ve temiz bir kod yazmanızda yardımcı olur.
Tarif ettiğim şablonları beğenirseniz, sizin için dosya şablonları oluşturacak olan Ruby on Rails uygulamaları için Bootstrapper'ı inceleyin.
