Daha Anlaşılır Ve Düzenli CSS’ler İçin

Tararımın vazgeçilmezi olan CSS’lerinizi hazırlarken kısa boyuttaki kodlarda sorun olmasa bile yazdığınız kodlar arttıkça ve CSS’iniz karmaşık bir hal aldıkça içinden çıkılmaz ve anlaşılmaz olabilir. CSS hazırlarken bahsedeceğim konulara dikkat ederseniz. Bir süre sonra alışkanlık haline gelir ve daha güzel ve anlaşılır CSS ler ortaya çıkarırsınız.

Soy Ağacı Modeli ve İlişkiler Düzeni :

Bahsetmek istediğim aslında bir soy ağacı modeli oluşturmak ve birbiri ile ilişkili kodları düzen içerisinde yazmak.

1. #main {
2. width: 530px;
3. padding: 10px;
4. float: left;
5. }
6. #main #nav{
7. background: #fff;
8. width:100%
9. }
10. #main #left-col {
11. background: #efefef;
12. margin: 8px 0;

Gruplama ve Kodlara Yorum Ekleme:

Kodları yazarken gruplamak ve yorumlar yazmak en mantıklı ve doğru karar olur çünkü ileriki zamanlarınızda tekrar kullanmak istediğiniz bir kodu ararken yada düzenlemek için kod yada kod grubu araken işinizi kolaylaştıracaktır.

1. /* Header Buradan Başlıyor **************/
2. ...CSS Kodları buraya…
3. /* Header Kodları Sonu *************/

1. Header
2. Structure
3. Navigation
4. Forms
5. Links
6. Headers
7. Content
8. Lists
9. Common Classes

Basit Ayıraçlar gruplama için işinizi görecektir.

1. /* -----------------------------------*/
2. /* >>>>>>>>>>>>> Menu<<<<<<<<<<<<<<<<-*/
3. /* -----------------------------------*/

Tek Satırda Yazmaya Alışın

Özellikleri birleştirmek ve tek satıra indirgemek hem kodun anlaşılır olmasını hemde düzenlerken kolaylığı sağlar.
Bunun Yerine:

1. h2{ color: #dfdfdf;
2. font-size: 80%;
3. margin: 5px;
4. padding: 10px;
5. }

Bunu Kullanın:

1. h5{color: #dfdfdf; font-size: 80%; margin: 5px; padding: 10px;}

CSS’ inizi Sayfalara Bölün

Çoğumuz CSS’leri tek sayfada yazıyoruz, bu aslında düzen bakımından büyük bir hata ve karmaşıklığa davetiye çıkarıyor. CSS’leri sayfalara bölmek kendimizi tekrar etmemizi önler ve düzeni ve basitliği bize sunar.

1. #main { @import "/css/layout.css";
2. @import "/css/typography.css";
3. @import "/css/design.css";
4. @import "/css/design-home.css";
5. @import "/css/extra.css";

Elementleri Resetlerken Açık Olun

Elementleriziniz resetlemek istediğinizde sadece belli başlı özellikleri değil tüm özellikleri resetleyin. Genel bir reset kullanmadığınız sürece tasarımda bozulmalara neden olabilirsiniz. Bunu yaparken;

Bunun Yerine:

1. *{ margin: 0; padding: 0; }

Bunu Kullanın:

1. html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
2. margin: 0;
3. padding: 0;
4. border: 0;
5. outline: 0;
6. font-weight: inherit;
7. font-style: inherit;
8. font-size: 100%;
9. font-family: inherit;
10. vertical-align: baseline;
11. }

En Çok Kullandığınız Renklerin Şemasını Oluşturun.

CSS’inizi yazmaya başlamadan önce en çok kullandığınız renkleri belirleyin ve renk kodlarını not alın, bunu CSS sayfanızın en üstüne açıklama satırı olarak ekleyin böylece farklı tonları kullanmaktan kaçınır ve işinize kolaylık getirirsiniz.

1. /* Renkler: Koyu Kahve #473B38 Açık Mavi #A8EFEE Pembe FF4095 */

İsimlendirme Sistemini Kullanın.

Class’ları ve id’leri düzenlerken onların bir isime sahip olması size zaman ve kolaylık sağlar, bu işlemi yaparken yukarda bahsettiğimiz soy ağacı yapısını kullanın. Örneğin; Header 2 bölümden oluşuyorsa bunu mutlaka belirtin. Menü ve Logo için DIV yapımız var ise bunu anlamak ve uygulamak daha kolay olacaktır. İsimlendirme Yapısı şu şekilde olabilir;

1. #header #header_menu #header_logo

Özellikler Yapısını AlfabetikOlarak Düzenleyin.

Bu sizedaha sonraki düzenlemelerde kolaylık sağlayacaktır.

1. body {
2. background:#fdfdfd;
3. color:#333; font-size:1em;
4. line-height:1.4;
5. margin:0;
6. padding:0; }

Çok Kullanılan Özelliklerin Kütüphanesini Oluşturun

İlk etapta pek işinize yaramayabilir. Fakat sonraki aşamalarda ve kod karmaşıklığı arttıkça veya site içerisi düzenlemelerde çok yardımcı olacaktır.

1. .width100 { width: 100%; }
2. .width75 { width: 75%; }
3. .floatLeft { float: left; }
4. .alignLeft { text-align: left; }
5. .alignRight { text-align: right; }