Tasarımcının Hastalığı: Divitis, Classitis…

Tarih : 26 January, 2009 ::
Kategori : CSS, XHTML
:: Etiketler : CSS, Design, Structure, Web Standartları, XHTML

Tablolarla layoutların oluşturulduğu dönemin ardından, standartlara sıkı sıkıya sarılan web tasarımcılarının bir bocalama geçirdiği çok açık. Tabloların yarattığı alışkanlığın bir devamı mıdır, yoksa yeni modern arayüz konseptinin tam algılanamaması mıdır bilinmez, ama gelin görün ki iki hastalığımız var. Divitis ve Classitis…

Bu kavramlarla ilk olarak CSS teknikleri üzerine okuduğum bir kitapta rastlamıştım. O zaman bu alışkanlıklara verilen bu iki isim (Divitis ve Classitis), gerçekten oldukça hoşuma gitmişti. Ve böyle bir hastalığım olduğunun farkına varmamı sağlamıştı o kitap.

Kısaca özetleyelim nedir bu hastalıklarımız;

Divitis

Tablolarla olan ilişkilerine bir çeki düzen verip, standartların işaret ettiği yöne bakan biz web geliştiricileri, orada ne bulduysak sıkı sıkıya sarıldık. Tabloları artık layoutları oluşturmak amacıyla kullanmayacaktık. Burada W3C bize biricik Div etiketini öneriyordu. XHTML dokümanı içerisinde içeriği anlamlı bloklara ayırmak için div’i kullanacaktık Biz bunu pek güzel yaptık, ama biraz fazla abarttık. Anlamlı, anlamsız her şeyi div içine almaya başladık. Bir örnek vermek gerekirse…

<div class="baslik">Yazı Başlığı</div>
<div>Yazı İçeriği <div class="onemli">Burada</div></div>

Bu XHTML, tablo etiketi içermese de, her yerden div fışkıran bu yapısıyla pek doğru bir örnek oluşturmuyor. Doğrusu şöyle olmalıydı;

<h1>Yazı Başlığı</h1>
<p>Yazı İçeriği <strong>Burada</strong><p>

Gördüğünüz gibi aslında bu XHTML kod bloğunda Div etiketine ihtiyacımız yok. Başka bir divitis vakasını inceleyelim;

<div id="Navigasyon">
    <ol>
        <li><a href="#">anasayfa</a></li>
        <li><a href="#">hakkımda</a></li>
        <li><a href="#">iletişim</a></li>
    </ol>
</div>

Burada özel bir sebebi yoksa, ol etiketini saran bir div etiketine ihtiyacımız yok. Anlamlısı ve doğrusu şöyle olmalıydı;

<ol id="Navigasyon">
    <li><a href="#">anasayfa</a></li>
    <li><a href="#">hakkımda</a></li>
    <li><a href="#">iletişim</a></li>
</ol>

Divitis hastalığımızdan kurtulalım, kurtulun!

Classitis

Modern web uygulamaları geliştirenlerin ikinci gizli hastalığı ise classitis. Belirli bir etiket grubunu seçmenin en makbul yoludur class’lar. Bu kolaylık bazen işin gereksiz yere çığırından çıkmasına sebep olmuyor değil. Örnekleyelim;

<div class="icerik">
    <p class="yazi">Yazı İçeriği <a class="mavi" href="#">Buraya</a> Geliyor</p>
    <p class="yazi">Yazı İçeriği Devamı <a class="mavi" href="#">Buraya</a> Geliyor</p>
</div>

Bu örnekte classitis‘i görmüş olmanız lazım… Aslında şu şekilde olmalıydı.

<div class="icerik">
    <p>Yazı İçeriği <a href="#">Buraya</a>Geliyor</p>
    <p>Yazı İçeriği Devamı <a href="#">Buraya</a>Geliyor</p>
</div>

Zaten, CSS ile bütün bu etiketlere class kullanmadan ulaşabiliyoruz… Örneklemek gerekirse;

div.icerik p {}
div.icerik p a {}

Başka bir classitis durumu;

<ol id="Navigasyon">
    <li><a href="#" class="link">anasayfa</a></li>
    <li><a href="#" class="link">hakkımda</a></li>
    <li><a href="#" class="link">iletişim</a></li>
</ol>

Gereksiz kullanılmış class’ları görebiliyorsunuz değil mi? Doğrusu şöyle olmalıydı;

<ol id="Navigasyon">
    <li><a href="#">anasayfa</a></li>
    <li><a href="#">hakkımda</a></li>
    <li><a href="#">iletişim</a></li>
</ol>

Yine CSS ile bütün bu etiketlere class kullanmadan ulaşabiliyoruz…

ol#Navigasyon {}
ol#Navigasyon li {}
ol#Navigasyon li a {}

Sonuç

Divitis ve Classitis vakalarında semptomlar yukarıda belirttiğim şekilde gerçekleşiyor. Bu hastalıklara dair ne yazık ki henüz bir ilaç geliştirilemedi. Öncelikle bu hastalığın farkına varmak, iyileşme sürecinin ilk adımını oluşturuyor

Hemen Paylaş!

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.

Yorumla Bakalım

Yorumlara Git

Daha Fazlasını Oku!

Makale Detayı

Bu Makale için toplam 11 adet yorum bulunmaktadır...

Bu Makale 26 January, 2009 ve saat 18:12 itibariyle CSS, XHTML kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...