CSS ile Kod Yazma Prensipleri

ile arayüz geliştirirken, malumunuz her geliştirici kendi stilinde kodlama yapıyor. Daha sonra bu şablon üzerinde, başka bir geliştirici geliştirme yaparken zorlanabiliyor. Bu tür durumları aşmak için, herkesin anlayabileceği şekilde bir kod yazma tekniği geliştirmemiz gerekiyor.

Yabancılar bu konuda oldukça ilerlemiş durumdalar. Bir çok blog yazarı ve geliştirici kendi stillerini oluşturmuş ve bu stile uygun kodlama yapmaya alışmışlar ve bunları insanlarla paylaşıyorlar. Fakat ülkemizde geliştiriciler daha comment satırı atmaktan acizler. Umarım Fatih Hayrioğlu, bir gün style guide hazırlar ve bizlere armağan eder 🙂

1-) Renk ve Tipografi
Öncelikle stilimizi yaratmadan önce arayüzde sıklıkla kullanacağımız, renkleri ve tipografimizi yorum satırımıza almamız bize fayda sağlayacaktır.

 

2-)İçindekiler Sayfası Tarzında Index Hazırlama

Kodumuzun yapısını ileride daha hızlı anlayabilmek ve daha hızlı müdahale yapabilmek için bu tarzda bir index oluşturmalıyız. Burada ileride kullanmak isteyeceğimiz anahtar kelimeler belirleyebiliriz. Böylece ileride kodlar arasında daha hızlı bir tarama yapabilir ve daha düzenli kodlama yapabiliriz.

3-) Açıklama Satırları

Kodlarımızın içinde açıklama satırı doldururken de dikkat etmemiz gereken bazı şeyler olduğunu düşünüyorum. Örneğin açıklama satırlarını derecelendirebiliriz.

Evet bu tarzda farklı kullanımlar yapabileceğimizi düşünüyorum.

4-) Seçici Kullanımı

Daha kolay okunabilmesi için bu tarz seçicileri alt alta yazmayı, ve kodların bir blok girintisi olarak kaydııılmasını öneriyorum.

Tanımlama yaparken sıralamayı alfabetik listeye göre yapabiliriz. Aradığımızda daha çabuk ulaşabiliriz fakat bir dezavantajı bulunuyor. Tanımlamalar ilişkili css özellikleri ayrılınca kodun anlamı bozulabiliyor.
Örneğin pozition-display, width-height, padding-margin, color-background gibi birbirleri ile ilişkili özellikleri bir arada tutmak daha avantajlıda olabilir. Okuduğum makalelerde her iki yöntemide kullanıyorlar. Fakat ilişkili özellikleri bir arada tutulması öneriliyor genellikle.

Diğer

– Hex değeri tanımlamalarında küçük karakter kullanılmalı. #ccc , #000 gibi.
– Seçicilerde özellileri tırnak içine almalıyız. input[type=”checkbox”] 
 Mümkün olduğunca 0 değeri vermekten kaçınalım. margin: 0
– Olabildiğince İngilizce değerler kullanılmalıdır. ana-kapsül, altin_ustu, ana, baba, kardes, kapsül gibi saçma kelimeler kullanmaya gerek yok.
– Kısa isim vermekten kaçınmalı ve açıklayıcı olmalıyız. Örneğin .cb yerine column_body etiketini kullanabiliriz.
– Büyük karakterlere gerek olmadığını düşünüyorum.
– Test ve sürümlendirme için Grunt adında bir araç varmış.
– Geliştirme yaparken tek bir tarayıcıya sadık kalmayın. Yaptığınız işlemler sonrası tarayıcı farklılığı olacağını düşündüğünüz anda müdahale edin ve fix’i o esnada yazın. İş bittikten sonra fix yapmanın insan sağlığına zarar verdiğini düşünüyorum. Bizlerde insanız.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir