CSS ile Kod Yazma Prensipleri
Css 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.
/*------------------------------------------------------------------ # [Color codes] # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mid Blue (header) #333399 # Light blue (top navigation) #CCCCFF # Mid grey: #666666 # */ /*------------------------------------------------------------------ [Typography] Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif; Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif; Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif; Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif; Notes: decreasing heading by 0.4em with every subsequent heading level -------------------------------------------------------------------*/
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.
/*------------------------------------------------------------------ [Table of contents] 1. Body 2. Header / #header 2.1. Navigation / #navbar 3. Content / #content 3.1. Left column / #leftcolumn 3.2. Right column / #rightcolumn 3.3. Sidebar / #sidebar 3.3.1. RSS / #rss 3.3.2. Search / #search 3.3.3. Boxes / .box 3.3.4. Sideblog / #sideblog 3.3.5. Advertisements / .ads 4. Footer / #footer -------------------------------------------------------------------*/
/*------------------------------------------------------------------ [Table of contents] 1. Body 2. Header / #header 3. Navigation / #navbar 4. Content / #content 5. Left column / #leftcolumn 6. Right column / #rightcolumn 7. Sidebar / #sidebar 8. RSS / #rss 9. Search / #search 10. Boxes / .box 11. Sideblog / #sideblog 12. Advertisements / .ads 13. Footer / #footer -------------------------------------------------------------------*/
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.
/* Basit açıklama satırı / yorum */ /* * Grup halinde açıklama * Birden fazla satır açıklama içeren yorum. */ /* ========================================================================== Üst seviye öneminde açıklama satırı diyebiliriz sanırım 🙂 ========================================================================== */
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.
.selector-1, .selector-2, .selector-3 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; color: #000; background: #fff;
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.
body /* Css tanimlamalarini alfabetik siraya gore yaparsak... */ background: #fdfdfd; color: #333; font-size: 1em; line-height: 1.4; margin: 0; padding: 0; /* Birbirleri ile iliskili ozellikler bir arada... */ .selector position: relative; display: block; width: 50%; height: 100px; padding: 10px; border: 0; margin: 10px; color: #fff background: #000;
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.
CSS ile Kod Yazma Prensipleri
