Daha önce blogum için bu öğretici yazıyı hazırlamıştım. Biraz derleyip forum için uygun hale getirdim ve yayınlamaya karar verdim.
Kod Yazma Prensipleri ? Nedir ?
Öncelikle herhangi bir grafik programında hazırlanmış olan bir arayüzü, tarayıcı diline uygun hale getirmek için belirli standartlar kullanabiliriz.
Bu standartlar sayesinde daha iyi ve sağlıklı kodlar yazarız. Projeye daha sonradan gelecek geliştirici, bu taslak çalışma üstünde çalışabilir ve hızlı şekilde düzenleme yapmaya başlayabilir.
Fakat siz kod yazmayı bilmiyorsanız, bu iş feci şekilde bozulur. Kodlarınızı kimse okuyamaz ve yaptığınız iş bir daha geliştirilemez.
O yüzden her arayüz geliştirici kendine bir standart kod yazma tekniği oluşturmalıdır.
Faydası Nedir
Profesyonel anlamda bu tarz teknikler kullanılmaktadır. Hiçbir yorum satırının olmadığı css'ler oluşturmanızı tavsiye etmiyorum. Eğer şuan hobi olarak geliştirme yapıyorsanız, acilen kod yazma tekniğinizi geliştirmeniz gerekmektedir.
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 :) ========================================================================== */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.
ody {
/* 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 Kurallar- 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ış.
Sizlerde bu tarzda oluşturduğunuz teknikler var ise konu altında paylaşıp, bu şablonu hep birlikte geliştirebiliriz.
Not: Makaleyi ilk olarak kişisel blogumda yazmıştım. Kaynak olarak gösterebilir, veya blog üzerinden ve forumdan konuya fayda sağlayabilirsiniz.
[HIGH] <?php include "sayfa.php"; $asdasd ="dasda"; ?>[/HIGH]
