İyi Bir CSS Kodu Yazmak İçin 8 İpucu

Yazımızdaki 8 ipucu verimli, anlaşılır ve kullanışlı bir CSS yazmanıza yardımcı olacaktır.
Daha iyi bir CSS yazmak, sizi çok da zorlayacak bir konu değil. CSS kod dosyanız içerisinde nasıl çalıştığınıza ilişkin birkaç küçük ipucunun büyük etkilerini göreceksiniz. CSS becerilerinizi geliştirebileceğiniz ve daha anlaşılır, daha verimli ve daha kullanışlı CSS kodları yazabileceğiniz sekiz basit ipucuna göz atacağız.

1.CSS’i Sıfırlayarak Başlayın


CSS Sıfırlama, çalışmak için temiz bir temel sağlar
Bazıları CSS Sıfırlamanın gereksiz olduğunu düşünebilir. Bu düşüncenin aksine, CSS Sıfırlama özelliği, temiz bir temelle başlamanıza olanak sağlar ve böylece web sitenize stil kazandırmayı kolaylaştırır.
CSS Sıfırlama, tarayıcının varsayılan stillerini sıfırlar veya geçersiz kılar. Kendinizinkini yazabilir, çevrimiçi olarak mevcut birçok sıfırlamadan birini kullanabilir veya ikisinin kombinasyonunu kullanabilirsiniz.

2.CSS Kısayollarının Nerede Kullanılacağını Bilin


Kısayollar dosya boyutunu küçültmeli ve yükleme sürelerini hızlandırmalıdır
CSS kısayolları, bir ögenin birden çok özelliğini tek bir satırda ayarlamanızı sağlar. Shorthand kullanımı yerden tasarruf sağlar ve yüklenmesi daha az zaman alır. Ancak, her zaman kullanmamalısınız.
Bazen longhand çok ihtiyaç duyulan netliği sağlar. Fakat daha da önemlisi, yalnızca bir veya iki özellik ayarlamanız gerektiğinde – veya sadece bir şeyi geçersiz kılmanız gerektiğinde – daha iyi olabilir.
Hatırlanması gereken başka bir şey: stenoyu kullanırken, geçersiz sayılan özellikler sıfırlanır ve bu da istenmeyen bir etkiye neden olabilir.

3.DRY Metodolojisini Kullanın

Kendini tekrar etmemelisin
Daha iyi CSS kodu yazmak için en iyi tavsiye DRY metodolojisini takip etmek diyebiliriz. DRY, ‘kendini tekrar etme’ anlamına gelir, aynı kod parçalarını tekrar tekrar kullanmayın.
CSS’de DRY’ı saklamanın bir yolu da gruplandırmaktır. Bir örneğe bakalım.

Orijinal CSS

Refactored ve DRY

Gördüğünüz gibi, bu yalnızca CSS dosyanızın genel boyutunu küçültmekle kalmaz – daha hızlı yüklenmesini sağlar – aynı zamanda bakım alanında da faydalanabilirsiniz. Eğer renk özelliğinin güncelleştirilmesi gerekiyorsa, sadece noktayı güncelliyoruz.

DRY’de kalmak için CSS özel özelliklerini de kullanabilirsiniz. Özellikle şu şekilde kullanılır:


Sonrasında, CSS kodunuzda istediğiniz yerde kullanabilirsiniz:


4.Aşırılıktan Uzak Durun!
!important kullanmak için gereken çok az durum vardır. En çok yanlış anlaşılmış ve aşırı kullanılan ifadelerden biridir.

Yanlış anlaşılmasın, !important ifadesi önemli bir yere sahiptir, ancak genellikle web geliştiricileri işler yolunda gitmiyorsa çaresizce kullanırlar. Bu yüzden düzeltmek için, onlara important! ifadesini ekleyerek kurallarına biraz daha ağırlık veriyorlar .

Sorun şu ki giderek daha fazla şeyler bildirilir hızlı bir bakımla onarabilecekken, bir domino etkisiyle büyük bir kabusa dönüşebilir. !important ifadesini mutlaka gerekli olduğunda kullanın!

5.Tutarlı Olun
CSS’nizi nasıl yazdığınızdan ve özellikleri hangi sırayla eklediğinizden bağımsız olarak tutarlı tutun. Bazı insanlar ögelerini alfabetik olarak sıralarken, diğerleri daha mantıklı bir yaklaşım kullanır – örneğin, ögeleri satır boyu veya türüne göre düzenleme. Aslında tamamen sana bağlı. Hangi şekilde kullanırsanız kullanın, ona bağlı kalın, böylece daha sonra bir şeyleri bulmak daha kolay olur.

6.Standart Adlandırmalar Yapın

Parametreleriniz için standart adlandırma kurallarını kullanın
Parametrelerinizi adlandırırken aşırı karmaşıklaştırmayın. Kendinize has ve standart adlandırma kurallarına uyarak adlandırma yapın.

Adlandırma yaparken dikkat etmeniz gereken bazı şeyler:

• Gereksiz sözcüklerinden kaçının: Bunlar, renk ve konum içeren sözcüklerdir (örneğin, yeşil metin veya üst menü çubuğu )
• Yalnızca küçük harf kullanın: CSS büyük / küçük harf duyarlıdır, bu nedenle MeNuBaR gibi adlar oluşturmayın . Bununla birlikte, camel case( menuBar ) kabul edilebilir, ancak bazı durumlarda tercih edilmediği unutulmamalıdır.
• Bir çizgi ile birden çok kelimeyi ayırın: Örneğin, ana-menü . Ayrıca camel case(mainMenu) da kullanabilirsiniz , yine de bunu genellikle tercih etmemenizi öneririm.
• Aynı tip ögeleri belli bir yerde tanımlayın: Aynı öge türü için birden fazla seçici kullanmanız gerekir. Örneğin, bir liste ve liste2 birleştirilerek tek bir liste ögesi oluşturabilirsiniz.

7.Gerektiğinde! Yorum Kullanın
İyi yazılan kodun yoruma ihtiyacı olmadığını doğrulasak da, bazı yerlerde koda yorum eklenmesi gerektiği de doğrudur. Buradaki temel kural, kaynak kodun yorumdan faydalanacağı takdirde eklenmesidir. Aksi takdirde yapmamalısınız.

Yorumların ne zaman gerekli olabileceğini merak ediyorsanız, işte birkaç örnek:

• Yorumlanan kod: Belirli bir nedenle belirli bir kod bölümünü yorumluyorsanız, bu nedeni açıklayan bir yorum bırakın. Bunu yapmazsanız, neden en başta onu yorumladığınızı hatırlamayabilirsiniz.
• Düzeltmeler: Kodun düzeltilmesiyle ilgili bir ifade eklerseniz, bunu açıklayan bir yorum eklemek de iyi bir fikir olabilir.
• Hatırlatmalar: Herhangi bir anda birden fazla proje üzerinde çalışıyor olabilirsiniz. Bir şeyi yarım bırakma durumunuz olursa, yorumlarınızı daha sonra yapacaklarınız için bir hatırlatma olarak kullanabilirsiniz.
• Açıklamalar: Kodun bir bölümü net değilse ve bir açıklamanın kodunuzun anlaşılmasında yardımcı olacağını düşünüyorsanız, o zaman yine bir yorum ekleyebilirsiniz.

8.Flexbox’ı Keşfedin


Flexbox, web tasarımındaki en güncel değiştirici
Sayfadaki ögelerin hizalanması söz konusu olduğunda, Flexbox size tam kontrol sağlar. Esnek kalıplar ve ögeleri kullanarak sayfanızın nasıl göründüğünü tam olarak gösterebilirsiniz. Flexbox, bir sayfada dikey olarak düzenlenemeyen ögeleri dikey olarak da düzenlemenizi sağlar.

İlk başlarda kafa karıştırıcı gelebilir fakat size yararlı olacağından eminim. Flexbox ile ilgili daha fazla bilgi almak için göz atabilirsiniz.

Kaynakça: A guide to writing better CSS