Birkaç faydalı CSS kodlama ipucu

İnsan, uzun süre aynı şeyleri yaptığı zaman bir düzen ve standart tutturup hem süreden hem de gereksiz yere fosfor harcamaktan kurtuluyor. Bu durum, zaman ve fosfor tasarrufunun yanında yazılan kodun kullanılabilir, okunabilir, uzun ömürlü ve evrensel standartlarda olması gibi birçok avantajı da beraberinde getiriyor. Aşağıda özellikle CSS ve HTML kodlaması ile uğraşanların işini kolaylaştırmak adına kaale almaya değer birkaç madde bulacaksınız.

reset.css kullanın

Tarayıcıların yerleşik stilleri farklı yorumlamalarından kaynaklanacak sorunları minimize etmek için bir reset.css kullanmak her zaman faydalıdır. Aşağıda kullanabileceğiniz birkaç popüler reset.css örneği mevcut.

https://meyerweb.com/eric/tools/css/reset/
https://clarle.github.io/yui3/yui/docs/cssreset/
http://necolas.github.io/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/

Ben, Eric Meyer tarafından hazırlanan reset.css v2.0 kullanıyorum.

Kısa CSS tanımlamaları kullanın

Mecbur kalmadıkça uzun tanımlamalar yapmak yerine kodlarınızı mümkün olduğunca kısaltın. Zira kısa tanımlamalar kullanmak, gerek temiz kod yazımı gerekse anlaşılabilirlik açısından hem size, hem de haleflerinize (sizden sonra geleceklere) avantaj sağlayacaktır. Kısa CSS tanımlamalarının avantajını, ileride yazdığınız kodlarda güncelleme ve düzenleme yapmak zorunda kaldığınızda kendinizi kalabalıklaşmış kodlarla boğuşmak yerine bir bakışta şıp diye anlaşılabilen kodların içinde bulduğunuzda anlayacaksınız. Performans için dosya boyutundan edeceğiniz avantajı saymıyorum bile.

.post-title {
    font-family: Arial, Tahoma, Verdana;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    line-height: 30px;
}

yerine

.post-title {
    font: italic bold 15px/30px Arial, Tahoma, Verdana;
}

kullanım şeklini tercih edebilirsiniz.

Yine benzer şekilde özellikle margin ve padding gibi birden çok ve farklı değer verilebilen tanımlamaları yaparken tekrar eden değerleri kullanmaktan kaçının.

.container {
    margin: 10px 10px 10px 10px;
}

kullanımı yerine

.container {
    margin: 10px;
}

kullanımı,

.container {
    margin: 20px 10px 20px 10px;
}

kullanımı yerine de

.container {
    margin: 20px 10px;
}

kullanımı aynı sonucu verecektir.

CSS bloklarını birbirlerinden ayırın

Her bir bölge için tanımladığınız CSS kodlarını tek bir blok olarak bir arada tutun ve bu bölümleri anlaşılır yorum başlıkları ile diğer bölgelerin kodlarından ayırın. Böylece bir bölümde yapacağınız bir değişiklik için nerede düzenleme yapmanız gerektiğini rahatlıkla bulabilirsiniz.

/**
 * Header
 */
.header {
    line-height: 24px;
    margin-bottom: 20px;
    padding: 10px;
}

.site-title,
.site-description {
    font-family: Helvetica, Geneva, Arial, sans-serif;
    font-size: 24px;
}

/**
 * Navigation
 */
.navigation {
    margin-bottom: 10px;
}

.navigation ul {
    list-style-type: circle;
}

.navigation li {
    float: left;
    margin-right: 10px;
}

.navigation li a {
    color: #d00;
}

/**
 * Footer
 */
.footer {
    background: #eee;
}

.footer a {
    color: #333;
    font-size: 11px;
    text-decoration: underline;
}

Özellikleri bir arada toplamak için classları dağınık kullanmayın

Ortak özellikler atanması gereken elemanları ve class tanımlamalarını bir arada toplamak ile aynı özelliği birden çok eleman / class için tanımlamak arasında kalabilirsiniz. Bu durumda benim tercihim aynı özelliği birden çok eleman / class için tanımlamak oluyor. Her ne kadar diğer seçeneğin de avantajları olsa da sürdürülebilir bir kodlama yapısı için ikincisi çok daha makul ve mantıklı görünüyor.

Yani bahsettiğim;

.header,
.footer {
    line-height: 24px;
    padding: 10px;
}

.header {
    background: #333;
    color: #fff;
}

.footer {
    background: #eee;
    color: #222;
}

şeklinde bir kullanımdan ziyade

.header {
    background: #333;
    color: #fff;
    line-height: 24px;
    padding: 10px;
}

.footer {
    background: #eee;
    color: #222;
    line-height: 24px;
    padding: 10px;
}

şeklinde kullanmaktır.

Bu kullanım başlangıç için veya birkaç satırlık kod bloğu için yanlış bir kullanım şekli olarak görülse de çok fazla sayıda class ve id ile çalıştıkça hiç de yanlış olmadığı anlaşılacaktır. Aksi durumda, ileride çoklu tanım yaptığınız elemanlardan sadece bir tanesi için tanımladığınız özelliği değiştirmek istediğinizde; bu değişikliğin başka elemanları da etkileyip etkilemediğini sorgulamanız, etkilemişse etkilenenler için de ekstra tanımlamalar yapıp eski haline getirmeniz gerekecektir. Ki bu kadarıyla uğraşmak da pek doğru bir yaklaşım gibi görünmüyor.

Elemanların asli özelliklerini koruyun

Elemanlara standart kullanım özellikleri harici ekstra özellikler tanımlamayın. Örnek: strong için altı çizili bir tanımlama yapmak doğru değildir. İlla bu tür elemanlara özellik atamanız gerekiyorsa o eleman için bir class tanımlayıp o class için özellik belirleyebilirsiniz.

strong {
    text-decoration: underline;
}

yerine

strong.comment-author {
    text-decoration: underline;
}

şeklinde kullanırsanız daha sonra başka bir yerde strong uyguladığınız bir başlığın altının neden çizili olduğunu aramak zorunda kalmazsınız.

Anlaşılır ve mantıklı class – id isimleri kullanın

Her ne kadar her eleman için makul ve mantıklı class ve id ismi bulmak bir süre sonra zorlayıcı bir durum olsa da makul ve mantıklı isimler kullanmak her zaman yararlıdır. Birkaç harften oluşan kısaltmalar dosya boyutundan kazanmak için yararlı gibi görünse de stil dosyanızın içeriği yüzlerce hatta binlerce satırı geçtiğinde ve birbirine benzer bir sürü tanım olduğunda içinden çıkılmaz bir karmaşaya sürüklendiğinizi anlarsınız fakat iş işten geçmiş olur.

Aşağıdaki iki CSS bloğundan hangisinin daha okunabilir olduğunu söyleyip kıyaslama yapmanın gerekli olmadığını düşünüyorum.

.cnt {
    margin: 10px;
    padding: 5px;
}

.pt {
    font-size: 18px;
    font-weight: bold;
}

.content {
    margin: 10px;
    padding: 5px;
}

.post-title {
    font-size: 18px;
    font-weight: bold;
}

Sıfırlara değer vermeyin

Sıfır zaten sıfırdır ve px veya em ile bir değer tanımı yapmanız hiçbir şeyi değiştirmeyecektir. O nedenle 0px veya 0em şeklinde kullanım yapmaktan kaçının.
Yanlış kullanım şekli:

.comment {
    margin: 0px 10px 0px 5px;
}

Doğru kullanım şekli:

.comment {
    margin: 0 10px 0 5px;
}

Zorunlu üst elemanları genel tanımlamalara eklemeyin

Zaten bir üst elemana bağlı olmak zorunda olan elemanlar için CSS tanımlaması yaparken üst elemanını da kullanmayın.

ul li {
    float: left;
}

tanımlamasında ul kullanımının,

table td {
    padding: 5px;
}

tanımlamasında da table kullanımının hiçbir anlamı yoktur.

Çünkü bir listede li kullanabilmek için bir üst elemanı olan ul, bir tabloda td kullanabilmek için de yine bir üst elemanı olan table kullanmak zorundasınız. Ve sizin yapacağınız stil tanımı, siz üst eleman kullansanız da kullanmasanız da geçerli olacaktır.

CSS tanımlamalarında üst eleman ancak bir belirteçle (class veya id) kullanıldığında bir anlam kazanır. Şöyle ki;

ul.cat-list li {
    font-weight: bold;
}

Bu tanımlama ile sadece cat-list classı atanmış liste elemanlarının yazıları kalın olacak, bu tanım diğer liste elemanlarını etkilemeyecektir.

Ve diğerleri

Kendiniz için en kolay ve en kullanışlısının hangisi olacağına inanıyorsanız onu seçip standart bir isimlendirme sistemi kullanın.

– Tümü küçük harfle isimlendirme yapabilirsiniz:

.author-name {
    font-size: 18px;
}

– Sadece kelimelerin ilk harfleri büyük, diğerleri küçük şeklinde isimlendirme yapabilirsiniz:

.Author-Name {
    font-size: 18px;
}

Bir standardınızın olması için sabit bir ayraç belirleyip tüm isimlendirmeleri aynı ayraçla yapın.

– Ayraç olarak tire (-) kullanabilirsiniz:

.author-name {
    font-size: 18px;
}

– Ayraç olarak alt çizgi (_) kullanabilirsiniz:

.author_name {
    font-size: 18px;
}

Ben, class ve id isimlendirmelerini tümü küçük harfle ve kelimeleri tire ile ayırarak yapmayı tercih ediyorum.

Az lafla çok şey anlatmak her babayiğidin harcı değil, hele ki benim hiç değil! O nedenle yazı epey uzun olmasına rağmen hala değinilmesi gerektiği halde değinemediğim birçok madde var. Neyse ki bu maddelerin neredeyse tamamı az buçuk İngilizce bilgisi olanların anlayabileceği halde birileri tarafından yazılmış. Aşağıya gerek bu yazıyı yazarken faydalandığım gerekse yazıda bahsedemediğim ipuçlarını barındıran birkaç makaleye bağlantı ekliyorum.

• 20 Useful CSS Tips For Beginners
• 70 Expert Ideas For Better CSS Coding
• Tips to Write Better CSS Code