Güncel web teknolojileri ve bilişim.

Ara

// okuma parçası...

Internet

Her Tasarımcının Uyması Gereken 9 CSS Kuralı

By cnkt ⋅ Ocak 31, 2008 ⋅ Post a comment

“Ölmeden önce görmeniz gereken 101 yer” ve benzeri “top list” kavramlarını hiç sevmesem de bugün sizlere tasarımcıların uyması gerekn CSS etik kurallarından oluşan bir liste hazırladım.

Özellikle geniş kapsamlı siteler tasarlarken aynı CSS dosyasında birden çok tasarımcının çalışması gerekebiliyor. Ya da, tasarımın farklı kısımları farklı tasarımcıların sorumluluğunda olabiliyor. Bu durumda CSS dosyalarını birden çok kişinin müdahelesi söz konusu.

Aşağıdaki liste CSS yazımını ve yönetimi kolaylaştırmak için ipuçları içeriyor.

1) Bağlantılı CSS kurallarını hizalayın:

Birbiri ile bağlantılı CSS kurallarını içe hizalayarak sayfa yapısını daha kolay görebilirsiniz.

#main {

width: 530px;

padding: 10px;

float: left;

}

#main #nav{

background: #fff;

width:100%

}

#main #left-col {

background: #efefef;

margin: 8px 0;

}

2) CSS kurallarını gruplayın ve yorum ekleyin:

Her sayfada bulunan tasarım kısımlarını gruplayın ve başlıklarına yorum satırı ekleyerek kolay farkedilir hale getirin.

/* Header Stili Başlangıcı **************/

...CSS Kodu Buraya…

/* Header Stili Sonu *************/

Sayfada genel yapı şu şekilde olabilir:

Header

Structure

Navigation

Forms

Links

Headers

Content

Lists

Common Classes

Aşağıdaki örnek, stiller arası basit bir ayıraç görevi görür.

/* -----------------------------------*/

/* >>>>>>>>>>>>> Menu<<<<<<<<<<<<<<<<-*/

/* -----------------------------------*/

3) Stil dosyasını yayınlarken boyutunu küçültün:

Tasarım sırasında okunabilirlik ve kolay yönetim için stil kurallarını ve özelliklerini ayrı satırlarda tutuyor olabilirsiniz. Fakat stil dosyanızı internette yayınlarken boyutunu küçültmelisiniz. Bunun için tüm CSS özelliklerini tek satıra indirgeyebilirsiniz.

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

Yukarıdaki kod yerine aşağıdakini yazabilirsiniz:

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

Kodunuzu bu şekilde optimize etmek için basit bir “Bul - Değiştir” işlemi yetiyor olsa da çeşitli araçları kullanarak da kodunuzu optimize edebilirsiniz.Yahoo! UI Library’nin YUI Compressor aracını bu iş kesinlikle öneririm.

4) CSS kurallarını birden çok dosyaya bölün:

CSS yazarken temel sorunlardan biri de aynı kural ve özellikleri birçok kez tekrar etmektir. Bu sorun çok uzun stil özellikleri yazarken ve gruplandırma kullanılmadığında ortaya çıkar. Sorunun üstesinden gelmek için temel CSS kurallarını farklı dosyalara taşıyabilirsiniz. Aşağıdaki kod buna örnektir.

@import "/css/layout.css";

@import "/css/typography.css";

@import "/css/design.css";

@import "/css/design-home.css";

@import "/css/extra.css";

5) Elementleri resetleyin:

Tasarımcılar, tarayıcıların temel CSS’ini iptal etmek için “global reset” yöntemini kullanırlar. Fakat bu durumdan formlardaki elementler olumsuz etkilenir. Bu durumda:

*{ margin: 0; padding: 0; }

CSS kodunu kullanmak yerine aşağıdaki kodu kullanabilirsiniz:

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 {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

İsterseniz Yahoo!’nun CSS Reset dosyasını da sayfanıza ekleyerek bu işlemleri kolaylaştırabilirsiniz.

6) Renk şemanızı belirleyin:

CSS yazmaya başlamadan önce sitenizdeki temel renkleri yorum olarak CSS dosyanızın başına ekleyin. Böylece hem işiniz kolaylaşır hem de sitenizin tek bir renk şeması kullandığı kesinleşir.

/* Colors: Dark Brown #473B38 Light Blue #A8EFEE Pink FF4095 */

7) Anlamlı bir isimlendirme kullanın:

ID ve Class’lar için anlamlı bir isimlendirme kullanmak hem zaman kazandırır hem de hata ayıklamada kolaylık sağlar.

#header #header_menu #header_logo

8 ) Alfabetik özellikler:

Elementin özelliklerini alfabetik olarak sıralamak işinizi daha kolay hale getirebilir:

body {

background:#fdfdfd;

color:#333; font-size:1em;

line-height:1.4;

margin:0;

padding:0; }

9) Yardımcı CSS kodlarından bir kütüphane oluşturun:

Çok sık kullandığınız ve genel bir şablona girmeyen CSS özelliklerini ayrı Class’lara yazarak bunlardan bir kütüphane oluşturabilirsiniz:

.width100 { width: 100%; }

.width75 { width: 75%; }

.floatLeft { float: left; }

.alignLeft { text-align: left; }

.alignRight { text-align: right; }

Temel Kural: Basit Olsun.

Programcılığın temel kurallarından biri de sonuç ne kadar karışık olursa olsun kodunuzun basit olmasıdır. Yukarıda belirtiğim kurallar CSS tasarımı için yeterlidir. İstek ve ihtiyaçlarınıza göre farklılaştırabilirsiniz ama ne yaparsanız yapın, basit yapmaya çalışın.

Siz de CSS için farklı kurallar uyguluyorsanız Yorumlar bölümüne yazarak paylaşabilirsiniz.

Not: Bu yazı İngilizce olarak 10 Kasım 2007′de Nopue.com’da yayınlanmıştır.

Popularity: 30% [?]

İlgili Yazılar

Yorumlar

Bir yorum - “Her Tasarımcının Uyması Gereken 9 CSS Kuralı”

Merhaba Cankat,
Görüyorum ki yine güzel bir içerik sunmuşsun bizlere. Bir teşekkür edeyim dedim :). CSS ile uğraşırken kısmen anlattıklarını bilsem de kendimi biraz daha geliştirdim. Basit olma konusuna gelince de zaten Fizikçiler basiti arayan insanlardır sadece onlar değil hayatı basit olarak algılamak isteyen pek çok insan gibi sanırım web tasarım ve programlamacılar da basitliği seçiyor…
Saygılar

Posted by Gökhan ATMACA | Şubat 3, 2008, 02:06

Ara