27

CSS Kod Yazma Düzeni

CSS yazarken bazı kurallar koyarsak ve bu kurallara göre kodumuzu yazarsak bir çok konuda yararını göreceğiz.

Daha hızlı kod yazma: Belli bir standardınız oluşturunca kod yazmak daha hızlı olacaktır.
Birden fazla kişinin çalıştığı durumlarda kolaylık sağlar: Aynı kodlama düzenine sahip olmak beraber çalışmayı kolaylaştırır. Koordinasyonu arttırır.
Daha okunabilir kodlar elde ederiz.
Daha performanslı sayfalar elde ederiz.
Daha sonra kodları güncellememiz gerektiğinde bize kolaylıklar sağlar. Mesela bir projeyi bitirdik 3-4 ay sonra değişiklik geldiğinde düzenimiz standart olduğu için düzeltmelerimizi daha kolay yaparız.

CSS kodu yazarken bazı standartlar oluşturmanın avantajlarından bahsettik yukarıda. Peki bu standartlar nasıl olmalı neler yapmalıyız ki optimum kod elde edelim.

css_duzenleme2

1. CSS doküman indeksini oluşturun

CSS dokümanınız indeksini hazırlayınız. Büyük projelerde tercih edilecek bir husus bence. Şimdiye kadar hiç uygulamadım ama büyük projelerde uygulamanın yararlı olacağını düşündüğüm bir uygulama

    
            01
            /*------------------------------------------------------------------
        
            02
            [CSS Kod indeksi]
        
            03
            1. Body
        
            04
            2. Üst Alan / #ustAlan
        
            05
            2.1. Menü / #menu
        
            06
            3. İçerik Alanı / #icerik
        
            07
                3.1. Sol Kolon / #solKolon
        
            08
                3.2. Sidebar / #yanKolon
        
            09
                    3.2.1. RSS / #rss
        
            10
                    3.2.2. Arama / #arama
        
            11
                    3.2.3. Kutular / .kutu
        
            12
            4. Alt Alan / #altAlan
        
            13
            -------------------------------------------------------------------*/

2. CSS dokümanınıza imzanızı atın

Kod yazarının veya yazarlarının imzası ve genel bilgilerini yazarak kodlarımızı başlamalıyız.(Bende bunu ara sıra unutuyorum. Ama unutmamak gerekli)

    
            1
            /************************
        
            2
            ************************
        
            3
            MYK Medya - http://myk-medya.com/
        
            4
            yahoyt.com
        
            5
            fatih hayrioglu
        
            6
            28 Mayis 2009
        
            7
            ie6, ff, opera. chrome, safari
        
            8
            ************************
        
            9
            ************************/

3. Seçici isimlendirirken standart ve anlamlı isimler verin

Seçici isimleri ve genel isimlendirmede bir standardı oturtun.

Anlamlı isimler verin. Anlamlı isimler vermek kod yazarken ve daha sonrası için çok büyük kolaylık sağlayacaktır. XHTML kodların nasıl bir anlamı(body, p, form vd.) varsa, kendi oluşturduğumuz seçici isimlerinde bir anlamı olması mantıklıdır.

#maviKutu yerine #haberKutusu veya #haberAlani tanımı daha mantıklı ve anlamlı bir isimlendirmedir.

İsimlendirmede bir standardınız olsun. Benim standardım bu konuda ilk harf küçük, sonraki kelimelerin baş harfi büyük ile başlar ve bitişik yazılır.

`1`	`#icerikOzu{..}`

`2`	`#solIcerikAlani{..}`

Bu benim standardım. Başka türlü standartlarda vardır. Her kesin kendince bir standardı olabilir. Mesela alt çizgiyle ayıranlar var. (-)Tire ile ayıranlar var.

`1`	`#icerik_ozu{..}`

`2`	`#sol-icerik-alani{..}`

Bu standardı herkes kendince yapabilir. Benim önerim aynı projede çalışan insanların aynı kodlama yöntemini kullanması, diğer türlü pek hoş olmuyor. Göz aşina olmayınca bir eksik hissediyor insan kod yazarken.

4. Kısaltma kullanın.

CSS tanımlarında kısaltmaları kullanın. CSS kısaltmaları hakkında daha fazla bilgi için http://www.fatihhayrioglu.com/cssde-kisaltmalar/ okumanızı tavsiye ederim.

    
            1
            font-weight: bold;
        
            2
            font-family: verdana, sans-serif;
        
            3
            font-size: 11px;
        
            4
            line-height: 15px;

yerine

`1`	`font:` `bold` `11px/15px` `verdana,` `sans-serif;`

5. CSS dokümanlarınızı anlamlı bölümlere ayırın.

Büyük projelerde css dokümanlarını birden fazla bölümlere ayırarak daha düzenli ve kolay kodlanabilir dokümanlar elde ederiz.

    
            1
            @import url(/css/iskelet.css);
        
            2
            @import url(/css/fontlar.css);
        
            3
            @import url(/css/renkler.css);
        
            4
            @import url(/css/sifirlama.css);

Ben yukarıdaki yöntemi genelde çok büyük projelerde kullanmayı tercih ediyorum. Normalde ve genellikle tek ve iki css dokümanı ile projeyi bitiriyorum. Performans açısından bu daha iyi ayrıca.

Eğer CSS sıfırlama tekniklerinden birini kullanacaksam Bunu imzadan sonraya yazmak. Yada site genel tanımlarını başa yazmak. YUI CSS Reset ve Eric Meyer‘in ki var mesela.

    
            01
            /************************
        
            02
            ************************
        
            03
            MYK Medya - http://myk-medya.com/
        
            04
            fatih hayrioglu
        
            05
            28 Mayis 2009
        
            06
            ie6, ff, opera. chrome, safari
        
            07
            ************************
        
            08
            ************************/
        
            09
             
            10
            body{margin:0; padding:0;}
        
            11
            ul{margin:0; padding:0; list-style:none;}
        
            12
             
            13
            /*kapsayamam sorunu */
        
            14
            .kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
        
            15
            .kapsayamamaSorunu{display: inline-block;}
        
            16
            /* IE-mac de bu bolumu sakla  */
        
            17
            * html .kapsayamamaSorunu{height: 1%;}
        
            18
            .kapsayamamaSorunu {display: block;}
        
            19
            /* IE-mac bu bolumu saklam artik */
        
            20
            /*kapsayamam sorunu */

6. Her satıra bir tanım yöntemini kullanın

CSS özelliği tanımlarken her satıra bir tanım yazarak daha uygun kod elde edebiliriz.

Ben daha önce her satıra bir özellik tanımı yapıyordum.

    
            1
            #aramaAlani{
        
            2
                float:left;
        
            3
                width:265px;
        
            4
                background-color:#fff;
        
            5
                border:3px solid #525252;
        
            6
            }

Bu yöntemde kod açık ve görüntü olarak daha kullanışlı görünse de, fazla boşluklar sorun oluşturmaya başladı. CSS kodları çok uzayınca kaydırma çubuğu ile çok aşağılara in yukarı çık zaman kaybına neden oluyordu.

Her Satırda Bir Tanım Yapma Yöntemi

Bende her satıra bir tanım yöntemini kullanmaya başladım. Aslında benim bu yönteme ilk geçme nedenim olan optimizasyonda css kodlarımı optimize ederken fazla boşluklardan kurtulmam gerektiğiydi. Daha sonra bu yöntemin daha avantajlı olduğunu gördüm, ayrıca daha derli toplu kodlar oluşturmama yaradı. Bundan sonra böyle kod yazamaya başladım.

    
            1
            #anaKapsul{...}    
        
            2
            #ustalan{...}    
        
            3
            #icerikAlani{...}    
        
            4
            #solIcerikAlani{...}    
        
            5
            #sagIcerikAlani{...}
        
            6
            #altAlan{...}

Kodlarımızın daha okunabilir olması içinde girintili bir yapıyı tercih etmeliyiz.

    
            1
            #icerikAlani{float:left; clear:left; padding-top:20px;}   
        
            2
                #solIcerikAlani{float:left; width:647px; margin-right:13px}
        
            3
                    #icerikOzu{float:left; clear:left; margin-top:20px}   
        
            4
                #sagIcerikAlani{float:left; width:300px; margin:0;}

7. Kodlarınızı yorum satırları ile açıklayıcı hale getirin.

Kodumuzun anlaşılabilir olması için yorum satırları eklemeliyiz. Bölümleri ve özel alanları yorum kodu ile belirleyerek anlaşılabilirliği arttırabiliriz. Böylelikle bölümler arasında daha kolay ayrım yapabiliriz. Kod okunabilirliği daha fazla olacaktır.

    
            01
            #anaKapsul{margin:0 auto; width:960px;}    
        
            02
            /**************************************************** ustalan   */
        
            03
            #ustalan{padding-top:20px;}
        
            04
             
            05
            /**************************************************** icerikAlani   */
        
            06
            #icerikAlani{float:left; clear:left; padding-top:20px;}
        
            07
             
            08
            /*sol icerik alani */
        
            09
                #solIcerikAlani{float:left; width:647px; margin-right:13px}
        
            10
                    #icerikOzu{float:left; clear:left; margin-top:20px}
        
            11
             
            12
            /* sagIcerikAlani */
        
            13
             
            14
                #sagIcerikAlani{float:left; width:300px; margin:0;}

8. CSS özellik tanımlarını sıralayın.

Özellik tanımlarında sıralama uygulayın. Özellik tanımlarında şablon tanımlarını başta yazmak. CSS tabanlı kodlama yazarken site yapısını oluşturan özellikler(float, width, height gibi özellikleri) ilk sırada yazıp sonra diğer özellikleri yazmayı tercih ediniz.

`1`	`#solIcerikAlani{float:left;` `width:647px;` `margin-right:13px}`

Burada bir diğer yöntemde özellikleri alfabetik sıraya göre yazmaktır. Buradaki amaç bir standart oluşturup göz aşinalığı sağlamak ve böylelikle daha hızlı kod yazmaktır.

Sıralayı şöyle yapmak mantıklı olacaktır.

Konumlandırma, boyutlar (width, height, position, float, clear)
Kenar için ve kenar dışı boşluklar ve kenar dışı çizgisi (margin, padding, border)
Metin tanımları (font, line-height, color)
Diğer özellikler

9. Çalışma gruplarınızda ortak standardınızı oluşturun.

Bir projede beraber çalıştığınız insanlarla aynı kodlama düzeninde çalışması çok önemlidir. Projede çalışan kişilerin bir araya gelip ortak bir düzen oluşturmaları ve projede bu düzen üzerine çalışmaları herkes açısından büyük katkı sağlayacaktır. Ayrıca css düzeltmelerinde(hack) de aynı şey söz konusu. Mümkünse aynı css düzeltmelerini kullanmanız ortak çalışılan projelerde size kolaylık sağlayacaktır.

10. CSS Editör araçlarından yararlanın

Daha öncede yazdığım gibi css editörü olarak Adobe Dreamweaver kullanıyorum. Bunun bir kaç sebebi var. Eskiden beri kullana gelmenin verdiği bir el alışkanlığı. CSS ve son sürümde de javascript editör kısımların gayet güzel çalışması.

Gelelim CSS Editörlerinin bizim CSS düzenine katkılarına

10.1 Otomatik tamamlama özelliği bize kod yazarken çok yardımcı oluyor. Bu özellik kod yazma hızımızı arttırıyor ve yanlış yazımları engelliyor.

dw_duz_01

10.2 Kodların renklendirilmesi de editörün güzel özelliklerinden biridir. Seçici, özellik, tanım ve yorum satırı ayrımı bize göstererek kod ayrımına yardımcı olur ve daha okunabilir kod görünümü sağlar.

dw_duz_02

10.3 Sık kullandığımız css düzeltmelerini(hack) snippets(dw özelliği) alanına ekleyerek hız kazanabiliriz. Daha hızlı olmak için bu tanımlara bir kısa yol bile atayabilirisiniz.

dw_duz_03

10.4 Dreamweaver’ın stil dosyalarını standarda oturmak çok kolay.

Edit -> Preferences.. tıklayınca gelen pencereden Code Format kısmını seçince sağ tarafta CSS.. düğmesine tıklayınca CSS doküman formatını ayarlama ekranından css düzenimizi ayarlayabiliyoruz.

dw_stil_ayarlama

Notepad ++ daki hizalama çizgileride çok güzel dw olmaması çok üzücü. DW’da hala tam olarak istedikleri karşılaya bilmiş değil, ama bildiğim en iyi editör.

hiza_cizgileri

Sonuç

Burada ben kullandığım ve araştırma sonucu elde ettiğim css düzeninden bahsettim. Bu stadartları kendinize göre değiştirebilir ve kendi stadartlarınızı oluşturabilirsiniz, Amaç stadart ve düzenli bir css kodlama düzenine erişmek. Son olarak örnek bir css dokümanı nasıl olmalıya bir örnek yazarsak:

XHTML kodu:

    
            01
            <div >
        
            02
             
            03
                <div >
        
            04
                </div><!--[if !IE]>ustAlan sonu<![endif]-->
        
            05
             
            06
                <div >
        
            07
                    <div >
        
            08
                        <div ><img src="images/promo.jpg" width="647" height="264" alt="Promo" /></div>
        
            09
                        <div >
        
            10
                        </div><!--[if !IE]>icerikOzu sonu<![endif]-->
        
            11
                    </div><!--[if !IE]>solIcerikAlani sonu<![endif]-->
        
            12
                    <div >
        
            13
                    </div><!--[if !IE]>sagIcerikAlani sonu<![endif]-->
        
            14
                </div><!--[if !IE]>icerikAlani sonu<![endif]-->
        
            15
             
            16
                <div  class="kapsayamamaSorunu">
        
            17
                </div>    
        
            18
             
            19
            </div><!--[if !IE]>anaKapsul sonu<![endif]-->

CSS kodu

    
            01
            /************************
        
            02
            ************************
        
            03
            MYK Medya - http://myk-medya.com/
        
            04
            yahoyt.com
        
            05
            fatih hayrioglu
        
            06
            28 Mayis 2009
        
            07
            ie6, ff, opera. chrome, safari
        
            08
            ************************
        
            09
            ************************/
        
            10
             
            11
            /************************************************** Genel Tanımlar   */
        
            12
             
            13
            body{margin:0; padding:0;}
        
            14
            ul{margin:0; padding:0; list-style:none;}
        
            15
             
            16
            /*kapsayamam sorunu */
        
            17
                .kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
        
            18
                .kapsayamamaSorunu{display: inline-block;}
        
            19
                /* IE-mac de bu bolumu sakla  */
        
            20
                * html .kapsayamamaSorunu{height: 1%;}
        
            21
                .kapsayamamaSorunu {display: block;}
        
            22
                /* IE-mac bu bolumu saklam artik */
        
            23
            /*kapsayamam sorunu */
        
            24
             
            25
            #anaKapsul{margin:0 auto; width:960px;}    
        
            26
             
            27
            /************************************************** ustalan   */
        
            28
            #ustalan{padding-top:20px;}
        
            29
                         
            30
            /************************************************** icerikAlani   */
        
            31
            #icerikAlani{float:left; clear:left; padding-top:20px;}
        
            32
                 
            33
            /*sol icerik alani */
        
            34
                #solIcerikAlani{float:left; width:647px; margin-right:13px}
        
            35
                #icerikOzu{float:left; clear:left; margin-top:20px}
        
            36
                 
            37
            /* sagIcerikAlani */
        
            38
             
            39
                #sagIcerikAlani{float:left; width:300px; margin:0;}                
        
            40
             
            41
            /************************************************** altAlan */
        
            42
             
            43
            #altAlan{clear:left; background-color:#404040; padding:12px; margin-bottom:20px;}