@mdo'dan Kod Rehberi
Esnek, uzun ömürlü ve sürdürülebilir HTML ve CSS standartları.
Internet Explorer uyumluluk modu
HTML kodunu sadeleştirmek
Tek satırlık tanımlamalar
Less ve Sass yuvalamaları
Less ve Sass hesaplamaları
İster buradaki, ister size ait olan, kabul edilmiş kuralları her zaman iyileştirmeye çalışın. Küçük ya da büyük farketmez, neyin yanlış olduğunu söyleyin. Bu Kod Rehberine eklemeler yapmak ya da katkıda bulunmak için lütfen GitHub üstünde bir konu açın.
Kodun her satırı, tek bir kişi tarafından yazılmış gibi görünmelidir, katkıda bulunanların sayısı bir şeyi değiştirmez.
İki boşluktan oluşan tablar kullanın - bu kullanım, kod formatlayıcıların her ortamda aynı davranmasını garantilemenin tek yoludur.
Yuvalanmış elemanlar girintili olmalıdır (iki boşlukla).
Özniteliklerde asla tek tırnak kullanmayın, her zaman çift tırnak kullanın.
Kendiliğinen kapanan elemanlarda bölü çizgisini kullanmayın - HTML5 şartnamesi bunun isteğe bağlı olduğunu söylüyor.
İsteğe bağlı kapatma etiketlerini ihmal etmeyin (örneğin </li> ya da </body>).
<img src="images/sirket-logo.png" alt="Şirket">
<h1 class="merhaba-dunya">Merhaba dünya!</h1>
Bu basit doctype ifadesini her HTML sayfasının başında kullanarak mümkün olan tüm tarayıcılarda standart modun kullanılmasını ve daha tutarlı çıktılar üretilmesini sağlamaya çalışın.
HTML5 şartnamesi diyor ki:
Geliştiricilerin kök html elemanına lang özniteliğini vererek dokümanın dilini belirtmeleri önerilir. Bu kullanım, metni konuşmaya çeviren araçların hangi telaffuzu kullanacaklarını beliremelerine, çeviri araçlarının hangi kuralları kullanacaklarını belirlemelerine, vb., yardımcı olur.
Şartnamede lang özniteliği hakkında daha fazla bilgi edinebilirsiniz.
Sitepoint'teki dil kodları listesine de göz atabilirsiniz.
Internet Explorer, doküman uyumluluk modu <meta> tagını özelleştirerek, tarayıcının çıktı üretirken hangi IE sürümünü kullanacağını belirtmemize olanak sağlar. Şartlar aksini gerektirmediği sürece en doğru olan, edge modunu kullanarak en son desteklenen sürümün kullanılmasını istemektir.
Detaylı bilgi için, bu harika Stack Overflow makalesini okuyun.
Doğru bir karakter kodlaması kullanarak, hızlı ve kolay bir şekilde, içeriğinizin düzgün çıktılanmasını sağlayın. Bunu yaparken (&raquo;, &copy;, gibi) özel HTML öğeleri yerine karşılıkları olan özel karakterleri kullanmak isterseniz, bunları destekleyen bir karakter kodlaması (genellik UTF-8) kullanabilirsiniz.
HTML5 şartname linkleri
<!-- Dahili (satır içi) CSS -->
HTML standartlarını ve anlamlılığı korumaya çalışın fakat pratikliği göz ardı etmeyin. Mümkün olduğu sürece, kodunuzdaki karmaşıklığı en aza indirin.
Kodun okunurluğunu artırmak için HTML öznitelikleri bu belirli sırada gelmelidir.
class özniteliği, yeniden kullanılabilen harika bileşenler oluşturur, bu nedenle önce gelir. id özniteliği ise daha spesifiktir ve daha az kullanılmalıdır (örneğin sayfa içinde yer imi tanımlarken), bu nedenle ikinci sıradadır.
Boolean özniteliklerin bir değer atanmaya ihtiyacı yoktur. XHTML, boolean özniteliklere bir değer atanmasını zorunlu kılar ama HTML5'te böyle bir zorunluluk yoktur.
Daha detaylı bilgi için WhatWG'nin boolean öznitelikler bölümüne bakalım:
Bir eleman üzerinde bir boolean niteliğin varlığı true değerini temsil eder ve niteliğin yokluğu false değerini temsil eder.
Eğer bir öznitelik değeri atamak zorundaysanız -ki değilsiniz- WhatWG'nin prensiplerini dikkate alın:
Eğer özniteliğe bir değer verildiyse, bu değer ya boş bir string olmalı ya da öznitelik adının kendisi olmalı, başında veya sonunda boşluk olmadan.
Kısacası bir değer atamayın.
HTML yazarken, gereksiz üst eleman kullanmaktan kaçının. Çoğu zaman bu, iterasyon ve yeniden düzenleme gerektirir ama daha az HTML üretir. Şu örneği ele alalım:
<!-- Pek iyi değil -->
<!-- Daha iyi -->
Seçicileri gruplandırırken, her bir seçicinin tek bir satırda olmasını sağlayın.
Okunabilirliği arttırmak için tanımlama bloklarının başlangıcındaki küme parantezinden önce bir boşluk bırakın.
Tanımlama bloklarının bitimindeki küma parantezini yeni bir satırda konumlandırın.
Her bir tanımlama için : işaretinden sonra bir boşluk bırakın.
Daha doğru hata raporlaması için her bir tanımlama, kendi satırında olmalıdır.
Tüm tanımlamaları noktalı virgül ile bitirin. Son tanımlamada kullanılacak olan noktalı virgül isteğe bağlıdır ama kullanmazsanız kodunuz hataya sebep olmaya daha meyilli hale gelir.
Virgülle ayrılan değerler, virgülden sonra bir boşluk bırakılarak yazılmalıdır (örneğin box-shadow).
rgb(), rgba(), hsl(), hsla() ve rect() komutları içinde boşluk kullanmayın. Bu kullanım, virgülle ayrılan değerler içindeki (virgülsüz) renk tanımlamalarını ayırt etmekte yardımcı olur.
Ondalıklı özellik değerlerinin başında sıfır kullanmayın (örneğin 0.5 yerine .5 ve -0.5px yerine de -.5px kullanın).
Bütün onaltılık değerleri küçük harfle yazın; örneğin #fff. Küçük harfler daha benzersiz olma eğiliminde olduklarından, belgeyi tararken ayırt etmek çok daha kolay olur.
Mümkün olduğunda onaltılık değerleri kısa formatta kullanın; örneğin #ffffff yerine #fff kullanın.
Seçicilerin içinde kullanılan öznitelik değerlerini çift tırnak içine alın; örneğin input[type="text"]. Çift tırnak kullanımı sadece bazı durumlarda seçime bağlıdır, tutarlılık için her zaman çift tırnak kullanmak iyi bir uygulamadır.
Sıfıra eşit olan değerlerde birim belirtmekten kaçının; örneğin margin: 0px; yerine margin: 0; kullanın.
Kafanızda burada kullanılan terimlerle alakalı soru işaretleri mi var? Vikipedi'deki Cascading Style Sheets makalesinin Syntax bölümüne bakın.
/* Kötü CSS */
/* İyi CSS */
İlişkili özellik tanımlamaları aşağıdaki sırayla gruplanmalıdır:
Pozisyonlama önce gelir, çünkü bir eleman pozisyonlandığında ilgili element, dokümanın normal sıralamasından çıkarılabilir ve bu da box model ile ilişkili stillerin yeniden hesaplanmasına neden olur. Sonrasında box model, bileşenin boyutlarını ve konumunu netleştirmek için gelir.
Bileşenin içinde yer alan diğer tüm özellikler önceki iki bölümü (pozisyonlama ve box model) etkilemeden en sona eklenir.
Özelliklerin ve özellik sıralamalarının tam bir listesi için lütfen Recess'e bakın.
/* Pozisyonlama */
/* Tipografi */
/* Görsellik */
/* Karışık */
<link> ile karşılaştırıldığında, @import yavaştır, ekstra sorgu gerektirir ve beklenmeyen sorunlara sebep olabilir. Bunlardan kaçınmak için farklı bir yaklaşım tercih edin:
Birden fazla <link> elemanı kullanın
Sass ve Less gibi bir ön işlemci kullanarak CSS'inizi tek bir dosyada birleştirin
Rails, Jekyll veya diğer ortamlarda sunulan özelliklerle CSS dosyalarınızı bir düzene sokun
Daha fazla bilgi için Steve Souders'ın makalesini okuyun.
<!-- link elemanını kullanın -->
<!-- @import kullanmaktan kaçının -->
Medya sorgularını, mümkün olduğu müddetçe ilgili CSS kural gruplarının yakınına yerleştirin. Tüm medya sorgularını tek bir dosyada ya da CSS dosyasının en sonunda paketlemeyin. Aksi taktirde insanların bu kodları gözden kaçırması ihtimalini arttırmış olursunuz. İşte tipik bir kulalnım:
Önekli özellikleri kullanırken her bir özelliğe girinti verin, öyle ki alttaki ve üstteki özellikler kolayca aynı anda (multi-line) düzenlenebilsin.
Textmate'de Text → Edit Each Line in Selection (⌃⌘A) kullanın. Sublime Text 2'de Selection → Add Previous Line (⌃⇧↑) ve Selection → Add Next Line (⌃⇧↓) kullanın
/* Önekli özellikler */
Bri kural setinin sadece bir tanımlama içerdiği durımlarda, okunabilirlik ve hızlı düzenlenebilirlik için satır sonlarını silmeyi düşünün. Birden fazla tanımlama içeren kural setlerinde her tanımlama ayrı bir satıra yazılmalıdır.
Buradaki anahtar faktör hata yakalamadır. Örneğin CSS validator 183. satırda bir hata yazım hatası olduğunu söylüyor. Tek tanımlamalı bir kural setinde sorun yok, hatayı kaçırmazsınız. Birden fazla tanımlamalı bir sette ise her bir tanımlamayı ayrı satıra almak, akıl sağlığınız için bir gerekliliktir.
/* Tek tanımlama, tek satır */
/* Birden fazla tanımlama, satır başına bir tanım */