Siz de benim gibi yoğun olarak CSS kodlarıyla boğuşuyorsanız, arada sırada bu kodlar içerisinde kaybolmuşluğunuz olmuştur mutlaka.

Bunu engellemek, hiç yoktan bunu en aza indirgemek için yapabileceğiniz birkaç şey var.

Anlaşılır tanımlamalar yapın

Her ne kadar hızlı kod yazarken durup daha fazla düşünmenizi ve mantıklı birşeyler türetmenizi gerektirse de, CSS tanımlamalarınızın objelerinizle ilgili, anlamlı olması birkaç hafta sonra o CSS kodlarına tekrar müdahale etmeniz gerektiğinde size inanılmaz bir kolaylık sağlayacaktır.

.baslik { ... }

ile

.yaziAnaBaslik { ... }

arasındaki farkı görebiliyorsunuz değil mi?

Organize kodlayın

Her nerede olursa olsun, gruplayarak çalışmak; organize etmek her zaman işlerinizi kolaylaştıracaktır. Düşünsenize, sayfanın üstüyle ilgili CSS tanımlamaları, CSS dosyanızda bir orda, bir burda dursa mı daha rahat takip edebilirsiniz yoksa sayfa üstü elementleri bir yerde, sayfa altı elementleri bir yerde olsa daha rahat rakip edebilir ve içinde kaybolmazsınız?

Benim kullandığım yöntem,

• En başta sayfalara ait bölümleri gruplamak,
• Ardından sayfadaki elementlerin yerlerine göre gruplamak,
• Ortak kullanılan özellikleri (yazı boyutu, transparanlık, renk gibi) ayrıca gruplamak.

Yorum alanlarını mutlaka kullanın

Bildiğiniz üzere

/* Yorum açıklaması */

slaş ve yıldız işaretleri arasına yazılan herşey yorum satırı olarak algılanıyor. Yorumları grupladığınız özellikleri tanımlamak / açıklamalarını yazmak için, kullandığınız hackleri açıklamak için, ortak çalıştığınız kişilere kalıcı notlar bırakmak için, versiyonlama yapmak için kullanabilirsiniz.

Devamını okuyun

Versiyonlama yapın

Her ne şekilde olursa olsun, eğer bir CSS dökümanına belirli aralıklarla erişiyor ve düzenliyorsanız kendinize veya başkalarına version notları düşün. Böylece hem yaptıklarınızı hatırlamanız gerektiğinde zorluk çekmezsiniz, hem de neden yapıldığına dair fikir alınabilecek bir kaynak olur.

Kodların görselliğine önem verin

.tableHeader {background: #ffcc00; color: white; }
.tableFooter {
color:#ccc;
background: #f1f1f1;
}

gibi bir kodlama düzeni alışkanlığınız varsa hemen bırakın. Rahat takip edebileceğiniz stilinizi oluşturun. Eğer CSS kodlarını hızlı okuyabiliyorsanız, özellikleri iyi biliyorsanız, siz de benim gibi:

.tableHeader { background: #ffcc00; color: white; }
.tableFooter { background: #f1f1f1; color: #ccc; }

şeklinde yazabilirsiniz. Böylece bir sayfada görebileceğiniz kod sayısı artıyor ve aradığınıza kolaylıkla ulaşabiliyorsunuz. Bir diğer yol ise:

.tableHeader {
background: #ffcc00;
color: white;
}
.tableFooter {
background: #f1f1f1;
color: #ccc;
}

şeklinde kullanmak. Böylece özellikleri daha rahat görebilir, fakat alan kaybı yaşamış olursunuz. Eğer yazarken düzenlemenin vakit kaybı olduğunu düşünüyorsanız -ki hiç öyle değil, alışkanlıklar açısından gerçekten önemli- CleanCSS ve CSS Tidy gibi araçları da kullanabilirsiniz.

Son olarak, CSS kodlarınızı yazarken yapılabilecek yanlışlar yazısına bir göz atın.