Yeni başlayanların yaptığı 5 CSS hatası

Piyasada CSS hakkında birçok makale var bunların bir kısmı çok yararlı olup bazıları ise yanlış anlaşılmalara ve hata yapmaya sebep olmaktadır. Özellikle CSS’ye yeni başlayanların sıklıkla yaptıkları birçok hata mevcuttur. Bu yazıda en çok yapılan hataların 5’ini inceleyeceğiz.

1-) Class ve ID leri aşırı kullanmayın
Yeni başlayanlar sayfada bulunan her elemente class ve ID ekliyorlar. Bu hem gereksiz hem de CSS’nin kullanım amacını toptan iptal etmiş oluyor. Class ve ID lerin aşırı kullanımı sadece stil sayfanızın kalabalıklaşmasına neden olmayıp ayrıca gereksizdir. Aşağıda bu bahsettiğimle alakalı örnek bulabilirsiniz.

Yanlış Örnek:

<div id="container" class="container">
  <p class="heading"><strong class="extrastrong">Welcome</strong></p>
  <p class="link1"><a href="#" class="link">Home</a></p>
  <p class="link2"><a href="#" class="link">About</a></p>
  <p class="link3"><a href="#"> class="link"Services</a></p>
  <p class="link4"><a href="#"> class="link"Contact</a></p>
</div>

Doğru Örnek:

<div id="container">
    <h1>This is a heading</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
</div>

2-) İnline stilini kullanmayın
HTML sitenizi biçimlendirirken sıralı (inline) stilini kullanmayın. Bu özellik de her elemente ayrı ayrı uygulanmak zorunda. Ayrıca CSS yi harici olarak çağırarak tek dosya üzerinden çalışmak varken neden bu kadar kendimizi zorlayalım ki ?
Yanlış Örnek:

<p style="color: #fff; font-size: 2em;">This is a sentence.</p>

Doğru Örnek:

<p>This is a sentence.</p> 
/*Harici Stil Dosyası*/
p { color: #fff; font-size: 2em; } 

3-) Absolute position’ı kötüye kullanmayın
Absolute position’ın doğru kullanımını öğrenmek gerekiyor. Örneğin sayfadaki her elemente absolute position uygulanmamalı. Efektive olarak nasıl kullanılabileceği öğrenilmeli, çünkü bu uygulama CSS için önemlidir.

4-) Hatasız ve dağınık olmamasına özen gösterin
Eğer CSS’niz hatasız ve düzenli olursa bu hem arama motorları için iyidir ayrıca diğer geliştiriciler tarafından daha rahat geliştirilebilir veya düzenlenebilir. Hataları düzeltmek için W3C doğrulamasını kullanabilirsiniz. Mesela Mac ve PC lerde Dreamweaver programı kullanılarak da hatalar kontrol edilebilir.

5-) Her yerde DİV etiketi kullanmayın
Yeni başlayanların yaptığı en büyük hatalardan biri de CSS’nin her yerinde div etiketi kullanmasıdır. Bu durumun sebeblerinden birisi de table’dan div’e geçmedir. Kesinlikle div etiketi kullanmayın demiyorum ancak sayfanın her elementinde kullanılmamalı. Örneğin bir paragraf etiketi ile “p” div etiketi “div” yer değiştirmemelidir.
Yanlış Örnek:

<div id="container">
    <div id="nav">
                <ul id="navlist">
                        <li>Home</li>
                        <li>About</li>
                        <li>Services</li>
                        <li>Contact</li>
                </ul>
    </div>
        <div id="heading"></div>
            <div id="news">News</div>
            <div id="stories">Stories</div>
</div> 

Doğru Örnek:

<div id="container">
    <ul id="navlist">
            <li>Home</li>
            <li>About</li>
            <li>Services</li>
            <li>Contact</li>
    </ul>
        <h1>Heading</h1>
            <p id="news">News</p>
            <p id="stories">Stories</p>
</div> 

Kaynak