CSS, web dilleri arasında öğrenebileceğiniz en temel ve basit dillerden bir tanesi. Yani, bir websitesinin görünüme etki eden elemanlara stil vermek her zaman kolay ve zevkli bir iş olmuştur ve syntax (yazım şekli) İngilizce olduğu için gayet basit ve anlaşılabilir bir dilden ibarettir. Bir yerdeki yazı boyutunu değiştirmek istediğimiz zaman örneğin, font-size özelliğini kullanırız. Rengi değiştirmek istediğimizde, color özelliğini kullanırız.

Ancak tüm bunlara rağmen, CSS komplike bir sistemdir. Özellikle de bir ajansa bağlı ya da freelance işler icra eden, profesyonel, uzman biriyseniz, yazmış ve yazacak olduğunuz kodları en aza indirgeyerek, tek bir kod ile birçok işi halledebilecek türde kodlar yazmak sizin için önemli olmalıdır ve daha da önemlisi çoklu tarayıcı desteğini göz önünde bulundurursak, işiniz bir hayli zor görünebilir. Bu yazıda birçok kişinin bilerek/bilmeyerek yaptığı CSS hatalarından bahsedeceğim.

1. Uygun CSS Reset Kullanmamak

Web tarayıcıları sürekli değişen, dönek arkadaşlarımızdandır. Onların bu tutarsızlıkları, geliştiricilerinin sabırlarını zorlayan ana nedenlerden biridir. HTML elementlerinin yerleşimleri birçok web tarayıcısında farklı göründüğü için bir geliştiricinin ana görevi, tüm tarayıcılarda aynı görünümü sağlamak olmalıdır. Bunu sağlayabilmemiz için de yerleşik bir CSS sıfırlama dökümanı kullanmamız gerekiyor. Web’de işinize yarayabilecek birçok CSS reset dökümanı mevcut. Ben şu ana kadar içinde bulunduğum gerek kurumsal, gerek kişisel tüm işlerimde Eric Meyer‘ın yazmış olduğu CSS Reset dökümanını kullanıyorum. Bunun dışında da Yahoo! UI Reset CSS dökümanı da mevcut. Ona da buradan ulaşabilirsiniz.

Bildiğiniz tüm HTML elementlerinin tüm margin ve padding değerlerini sıfırlayan evrensel seçici şu şekildedir.

[php]
* {
margin: 0;
padding: 0;
}[/php]

Bunun işe yaramasına rağmen, tam anlamda bir sıfırlama sağlamaz. Aynı zamanda, kenar çizgilerini, yazı stillerini, renkleri, liste öğelerini, bağlantıları ve tabloları da sıfırlamanız, beklenmedik tarayıcı farklılıklarını ortadan kaldıracaktır.

2. Seçiciyi Belirtirken Gereksiz Kodlar Kullanmak

Bunun bir hata olduğunu bilmeme rağmen ben de bazen bu hatayı yapabiliyorum. CSS’de bir elementi seçerken, kesin bir kod ile o elementi seçmeniz pek de mantıklı bir iş değil. Aşağıdaki örnek ile ne demek istediğimi daha iyi anlayacağınızdan eminim.

[php]ul#navigasyon li a {…}[/php]

Genel bir yapı olarak bir navigasyonu düşündüğümüzde içinde birkaç liste öğesi ve içlerinde de diğer sayfalara giden birçok bağlantının olduğu bir yapı aklımıza gelecek. Bunun HTML kısmı doğru olmasına rağmen, CSS kısmında bazı endişelerim var. #navigasyon ID’si zaten oldukça belirgin bir seçici. Ve bunların içine yerleştirdiğimiz a elementleri de zaten #navigasyon’a ait olduğu için bunların listeye ait a elementleri olduğunu belirtmek gereksiz. En öz seçim şekli şu şekilde olmalı:

[php]#navigasyon a { … }[/php]

Hazır bundan bahsetmişken bir de ID durumundan bahsetmek istiyorum. Yalnızca bir dakikalığına bu navigasyonun bir #header katmanı içerisinde olduğunu düşünün ve header içerisinde başka bir liste bulunmayacağını düşünürsek (her zaman için geçerli değil), kodu en az ve öz şekilde şu şekilde yazabiliriz.

[php]#header ul a { … }[/php]

Bu kısmı özetlersek: CSS seçicilerinizi daima minimum seviyede yazarak işe yarar hale getirin.

3. Kısaltılmış Özellikleri Kullanmamak

Aşağıdaki örneğe bir göz atalım:

[php]

#secici {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}[/php]

Yukarıda bir seçici için yazmış olduğumuz 4 kodun yapacağı iş ile aşağıdaki tek kodun yapacağı iş aynıdır. Seçim sizin:

[php]

#secici {
margin: 50px 0;
}[/php]

Bir de aşağıdaki font stillerini ayarlayan font kodlarımıza bir göz atalım:

[php]

font-family: Helvetica;
font-size: 14px;
font-weight: bold;
line-height: 1.5;[/php]

Yine bir özelliği 4 kod ile belirtmek yerine tek bir satır kod ile sağlayabiliriz.

[php]font: bold 14px/1.5 Helvetica;[/php]

Aynı şey arkaplan özelliği için de geçerli:

[php]

background-image: url(arkaplan.png);
background-repeat: repeat-y;
background-position: center top;[/php]

Kısaltılmış şekilde:

[php]background: url(arkaplan.png) center top repeat-y;[/php]

Kısa kodlar yazmak her zaman yazmış olduğumuz kodun optimizasyonunu en üst düzeyde tutacaktır ve bu şekilde de websitemizin daha hızlı yüklenmesi için gerekli öğelerden birini sağlamış olacaktır.

4. 0 Yerine 0px Yazmak

Bir elementi yukarıdan ve aşağıdan 20px ittirdiğimizi farzedelim. Şu şekilde bir kod yazabiliriz:

[php]

#secici {
margin: 20px 0px 20px 0px;
}[/php]

Burada dikkat etmemiz gereken ipucu; 0 sayısından sonra px, %, pt tarzı birimler kullanmamızın gerekli olmadığı. Bir şeyin 0 olduğunu ister yüzde cinsiyle, isterseniz px cinsiyle belirtin. Sonuç olarak bahsettiğiniz şey 0′dır.

5. Hexadecimal Renkler Yerine Renk İsimleri Kullanmak

Bir yazıyı kırmızı renk yapmak için #f00 yerine red değerini kullanmak tembel insanların işidir.

[php]color: red;[/php]

Tüm hexadecimal renk kodlarını aklınızda tutmanızı zaten sizden kimse beklemeyecektir. Ancak yine de belli başlı renkler için bazı hexadecimal kodları aklınızda tutmak faydalı olacaktır. Mesela black için #000, kırmızı için #f00 gibi. Bunları Photoshop, Fireworks ya da web üzerinde bulabileceğiniz pek çok color cheatsheet ile öğrenebilirsiniz.

Hexadecimal renk kodlarını Color Scheme Designer aracıyla kolaylıkla bula bilirsiniz.

[468×15]

 

6. Gereksiz Seçici Tekrarı

Kendi CSS yazım şeklimden bahsedecek olursam ilk olarak tipografi ile başlıyorum ardından yapı üzerinde çalışıyorum ve son olarak renkler ve arkaplanları ayarlıyorum. Bazen kullandığınız bir ID seçicisini, dökümanın ortalarında, sonlarında tekrar yazmış olabiliyorsunuz. Bazen de bu tekrar yaptığınızı farketmeniz geç olabiliyor. Böyle bir şey yaptığınızı farkettiğinizde onları tek bir seçici altından toplamak en mantıklı iş olacaktır. Hem gereksiz kod yazmaktan, hem de dosya boyutunun artmasından kurtulacaksınız.

7. Gereksiz Özellikler

Yukarıdaki hataya benzeyen bir durum. Bazen dalgınlığınıza gelip aynı özelliği birden fazla kullanmış olabiliyorsunuz. Farkedip düzeltmek yine size bağlı.

Bir de buna benzer bir durum olarak, 2 tane seçicimiz olduğunu varsayalım. Bu seçicilerin her ikisinde de aynı özellikleri kullandığımızı düşünelim. Bunları ayrı ayrı seçici olarak yazmak yerine, ikisini gruplayarak yazmak mantıklı bir seçim olacaktır.

[php]

#secici-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

.secici-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}[/php]

Bu seçicileri birleştirerek ve virgül işaretiyle (,) ayırdıktan sonra gayet temiz bir şekilde kullanıma hazırlar!

[php]

#secici-1, .secici-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}[/php]

8. Alternatif Fontlar Belirtmemek

Mükemmel bir dünyada yaşadığımız düşünürsek her bilgisayarda her font bulunur. Ne yazık ki, mükemmel bir dünyada yaşamıyoruz. Web tasarımcıları web-safe olarak tabir ettiğimiz (Verdana, Arial, Georgia, serif, vb.) fontları kullanmaya mahkum gibi görünüyorlar. (@font-face ve türevlerinin kullanılmadığını düşünürsek)

İşin CSS kısmında bir seçicide font-family olarak tek bir fontu belirtirsek ve de en önemlisi bu font kullanıcının bilgisayarında bulunmuyorsa, ne yazık ki web tarayıcısının varsayılan olarak öngördüğü font kullanılacaktır. Bunun önüne geçmek için de font-family özelliği için tek bir font belirtmek yerine alternatif fontlar tanımlamak gerekiyor.

[php]

#secici
font-family: Helvetica;
}[/php]

Bu sayede, Helvetica fontunun kullanıcının bilgisayarında yüklü olmadığı durumlarda Arial, Arial’in yüklü olmadığı durumlarda da sans-serif fontu devreye girecektir.

[php]

#secici {
font-family: Helvetica, Arial, sans-serif;
}[/php]

9. Gereksiz Boşluklar

Çoğu geliştirici projelerini, websitelerini yayına almadan önce dosyalarını optimize etmiyorlar, ki bence bu büyük bir hatadır. CSS dökümanımızda seçiciler arası bıraktığımız boşukları kaldırarak kodlarımızı, sunucuları yormayacak şekilde ve en hızlı yüklenebilecek şekilde yazmalıyız. Bu sayede sayfalarımızın açılış süresi hızlanacak ve daha erişilebilir sayfaları kullanıcılarımıza sunabileceğiz.

Yukarıdaki birçok maddede performans, optimizasyon ve çeşitli sebeplerden bahsettim. Geliştirme işi yaparken, kodlarınızı daima en rahat müdahele edebileceğiniz şekilde ve en optimum biçimde yazmaya özen gösterin.