Kolay Css Kodlamak İçin 10 Pratik Yöntem

Günümüzde çoğu web tasarımcı, tasarımlarında css i kullanmakta. Peki bunların kaçı standartları yakalamış durumda?

Bu yazımda sizlere standartları yakalamak ve css yazmayı daha kolay hale getirecek 10 yöntem vereceğim. Hadi başlayalım.

1- Her zaman css sıfırlamayla başla

Çoğu kez olur bu bazı tarayıcılar düzgün gösterirken bazısı o kadar da düzgün göstermez. Bu sorunu gidermek için iki farklı yöntem var;
ilki kullanımı kolay birşey, aşağıdaki kısa kod parçası fakat her biraz eksik kalabiliyor.

* { margin:0; padding:0; }

Diğeri eric meyerinki daha uzun ama ilkinden daha iyi olduğunu söyleyebilirim.

/* v1.0 | 20080212 */

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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

2- Kolay tarama için girinti

Doğru söyleyin sizce de aşağıdaki gibi bir görünüm hoş mu?

.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

Böyle göze daha hoş görünüyor.

.classname {
     background: #FFF;
     border: 0;
     color: #252525;
     float: left;
     margin: 0;
     padding: 0;
}

3- Yorum bırakmayı unutmayın

Tasarımı yaparız, ve belli bir zaman onunla hiç uğraşmayız. Neyi nereye yazdığımızı unuturuz tabiki.
sonra css dosyasını tekrar düzenleyeceğimiz zaman, ona tekrar alışma süreci olur. İşte bu süreci kısa tutmak için
size tavsiyem yorum bırakın, ahanda böyle.

/********** Hacı boşuna arama sidebar kodları burda **********/

4- Tek Satır yada çok satır kararı sen ver

Size burda iki farklı yol sunuyorum, aşağıda örneği verdim anlaycaksınız. Benim fikrimi sorarsanız tek satır.

.classname { border: 0; background: #000; color: #676767; padding: 0;}

.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

5- Yazılarınızda Bir stil belitleyin

Tek bir yazı stiliniz olsun, her yazı için ayrı ayrı css kodunuza eklemelerde bulunmayın, bu size hem zamandan tasarruf yapacak,
hemde yazılarınızda sabit bir görüntü kazandıracaktır. Css kodunuzda yoksa yazılarınız için h1 h2 h3 pre code bloq stilleri belirleyin,
yada onları bir gözden geçirin bu size kalmış.

6- Koşullu Css

Ne yazık ki dünyada tek bir tarayıcı firması yok bu yüzden sitemize farklı tarayıcılarla ulaşılabiliyor ve sitemizin görüntüsü

hepsinde istediğimiz gibi çıkmıyor, bu sorunu anlatmak için css in if fonksiyonunu kullanabiliriz. http://www.conditional-css.com/usage bu adreste

bir anlatım var ingilizce fakat anlayacağınızı umuyorum.

7- Kısa kodları kullanın

Bu kuralda yine css dosyamızın boyutunu azaltmak için geliştirilmiş. Aşağıda bir bölümün margin ini belirleyen css kodu var.
Onun altında da bir css kodu ikiside aynı işi görüyor, fakat sizde görüyorsunuz ki ikincisi daha kısa.

.classname {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 4px;
margin-left: 1px;
}

Yukarıdaki kod sırasıyla üst, sağ, aşağı ve sol u belirtiyor. Aşağıdaki kod da sırasıyla aynı yünleri belirtiyor.

.classname { margin: 1px 2px 4px 1px; }

8- Kendinize bir içindekiler tablosu oluşturun

Daha önce 3. kuralda bahsettiğimiz olayın biraz daha genel hali css dosyamızda sırasıyla hangi dıv lerin belirlendiğini gösteren
bir tablo oluşturun bu işinizi kolaylaştıracaktır.

/*****************************************************
1. HEADER kodu
2. NAVIGATION kodu
3. CONTENT kodu
4. SIDEBAR kodu
5. FOOTER kodu
*****************************************************/

9- class ve ıd leri kolay takip için

Aşağıda dağınık css dosyasından bir parça görüyorsunuz.

.wackyblueline5 { ... }
.leftsidesection { ... }
#bodyleftcurve2 { ... }

Ve burada da daha düzenli css dosyasından bir kod parçası, size tavsiyem css ıd ve class larınızı düzgün belirleyin birden fazla kelime ise
onları ‘-’ ile ayırın.

.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }

10- Alfabetik sıra

Bu kural biraz olayı aşmışlar için geçerli olabilir. Neyse css kodlarını alfabetik sıraya göre yazarsanız okunması kolay olur.

.classname {
border: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin: 48px;
padding: 0;
position: relative;
z-index: 101;
}

Kaynak