Temiz HTML ve CSS Yazma Rehberi

Temiz kod kavramı, okunabilirliği yüksek ve performanslı kod anlamına gelmektedir. Yazımızda HTML ve CSS yazarken dikkat edilmesinde fayda olan temiz kod yazma kurallarına değineceğiz.

Temiz kod yazma kuralları genellikle resmi dokümantasyonlarda yer almayan ancak geliştiricilerin tecrübe ile edindikleri doğru kullanım kurallarını içermektedir. Uyulması zorunlu değildir ancak uyulmasında fayda vardır. Aşağıda vermiş olduğumuz kullanım tavsiyeleri pek çok kaynak incelenerek ve en çok önerilen yöntemler baz alınarak seçilmiştir.

Temiz CSS Yazım Kuralları

1) Sınıf ve id isimleri, alt çizgi veya camelCase yöntemi ile yazılmamalı, kısa çizgi kullanarak oluşturulmalı.

class="btn_danger" /* Yanlış Kullanım */

class="btnDanger" /* Yanlış Kullanım */

class="btn-danger" /* Doğru Kullanım */

2) Tek CSS özelliği için blok yapısı oluşturulmamalı, tek satırlık tanımlama yapılmalı.

.btn-danger {
  background: red; /* Yanlış Kullanım */
}

.btn-danger {background: red;} /* Doğru Kullanım */

3) Bir CSS özelliğinin değeri sıfır ise 0px gibi bir bildirim kullanmak yerine doğrudan 0 yazılmalıdır.

.btn-danger {border: 0px} /* Yanlış Kullanım */

.btn-danger {border: 0} /* Doğru Kullanım */

4) Sınıf ve id isimleri mümkün olduğunca kısa olmalı, ancak gereksiz kısaltmalarla da anlamdan ödün verilememeli.

class="button-dangerous" /* Yanlış Kullanım */ 

class="btn-danger" /* Doğru Kullanım */

5) Sınıf ve id isimleri işlevini belli etmeli.

class="green" /* Yanlış Kullanım */ 

class="success" /* Doğru Kullanım */

6) Renk değeri verilirken HEX isimli format tercih edilmeli ve küçük harf kullanılmalı. Ayrıca aşağıdaki örnekteki gibi, tekrarlı değerlerde üç haneli kullanım tercih edilmelidir.

.light {color: #FFFFFF;} /* Yanlış Kullanım */ 

.light {color: #fff;} /* Doğru Kullanım */

7) Sayı değeri eğer küsurattan ibaretse, başına sıfır eklemeden kullanılmalıdır.

.space {padding: 0.5;} /* Yanlış Kullanım */ 

.space {padding: .5;} /* Doğru Kullanım */

8) CSS özellik değeri verilirken, iki nokta üst üste işaretinden sonra bir boşluk bırakılmalıdır.

.space {padding:10rem;} /* Yanlış Kullanım */

.space {padding: 10rem;} /* Doğru Kullanım */

9) Birden fazla sınıfa aynı özellikler tanımlanırken, sınıf isimleri farklı satırlara yazılmalıdır.

.box-sm, .box-md, .box-lg {padding: 0;} /* Yanlış Kullanım */ 

.box-sm,
.box-md,
.box-lg {padding: 0;} /* Doğru Kullanım */

10) CSS özellikleri sıralanırken kullanılan yöntemlerden biri alfabetik sıralamadır. Bu kuralı gereksiz bulanlar kadar faydalı bulanlar da vardır.

.box {
  width: 150px;
  border: 2px solid red;
  margin: 0;
  color: #fff;
  height: 200px;
  padding: 0;
  float: left;} /* Yanlış Kullanım */ 
}

.box {
  border: 2px solid red;
  color: #fff;
  float: left;
  height: 200px;
  margin: 0;
  padding: 0;
  width: 150px;} /* Doğru Kullanım */

11) Steno yani kısa yazım özelliği tercih edilmelidir.

.p-1 {
  padding-top: 1px;
  padding-right: 2px;
  padding-bottom: 3px;
  padding-left: 4px;} /* Yanlış Kullanım */

.p-1 {padding: 1px 2px 3px 4px;} /* Doğru Kullanım */

12) CSS kodları bölümlere ayrılmalı ve bölümler başlangıç-bitiş yorumlarına sahip olmalı

/* Navbar Start */
/* Navbar End */

13) CSS sayfasının başlangıcında dizin olmalıdır.

/*==============================
  1- General
  2- Reset
  3- Typography
  4- Header
  5- Main
  6- Footer
==============================*/

14) Gereksiz boşluk kullanımından kaçınılmalıdır. Her bir boşluk, bir karakter olarak algılanır ve belge boyutunu artırır.

15) Satır içi CSS kullanılmamalı.

<p style="font-size: 16px;">Merhaba Dünya</p> /* Yanlış Kullanım */

16) Daha okunabilir ve modüler CSS yazmak için ön derleyiciler kullanılmalı (Sass, Less, Stylus, PostCSS).

17) Medya sorguları değiştirdikleri özelliğin hemen sonrasında olmalı.

body {background-color: red;}
@media screen and (max-width: 992px) {
  body {background-color: green;}
}

.container {font-size: 1.2em;}
@media screen and (max-width: 992px) {
  .container {font-size: 1.4em;}
}

18) Tarayıcı uyumluluğu için kullanılan prefixler, okunabilirlik için, sağa yatık girintileme ile yazılmalı.

g-webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;

19) CSS özellikleri sıralanırken, alfabetik sıralamaya alternatif olarak aşağıdaki gibi sıralama yapılabilir.

/* Konumlandırma */
position, top, bottom, right, left, z-index

/* Kutu Özellikleri */
display, width, height, float

/* Tipografi */
font, line-height, color, text-align

/* Görsel */
background-color, border, border-radius

/* Diğer */
opacity

20) Mümkün olduğunca !important özelliği kullanılmamalıdır. Aksi taktirde sürdürülmesi zor CSS dosyaları ortaya çıkar. Bu özellik yerine CSS özgüllükleri gözetilerek, uygun seçiciler kullanılmalıdır.

21) CSS kodlarını tekrar etmek yerine, sık kullanılan özellikler parçalara bölünmeli.

.green {background: green;}

.left {float: left;}

22) Yazılan kodlar resmi CSS doğrulayıcı ile kontrol edilmeli.

https://jigsaw.w3.org/css-validator/

Temiz HTML Yazım Kuralları

1) Tüm etiketler ve öznitelikler küçük harf ile yazılmalı.

2) Girintileme işlemi, iki boşluk kullanılarak yapılmalı.

<body>
      <ul>
            <li></li> 
      <ul> 
</body> <!-- Yanlış Kullanım -->

<body>
  <ul>
    <li></li> 
  <ul> 
</body> <!-- Doğru Kullanım -->

3) Öznitelikler için çift tırnak kullanılmalı.

<a href='#'>Link<a> <!-- Yanlış Kullanım -->

<a href="#">Link<a> <!-- Doğru Kullanım -->

4) Kapatılması gerekmeyen etiketler kapatılmamalı.

</br> <!-- Yanlış Kullanım -->

<br> <!-- Doğru Kullanım -->

5) HTML kodları içerisinde mümkün olduğunca Javascript kodları bulunmamalı.

6) Öznitelikler aşağıdaki sıraya göre yazılmalı.

class
id, name
data-*
src, for, type, href,value
title, alt
role, aria-*

7) Yeni başlayanların en sık yaptığı hatalardan biri olan gereksiz div kullanımından kaçınılmalı.

8) HTML belgeleri yukarıdan aşağıya okunduğu için ilk okunması gerekenler en üste yazılmalı. Örneğin bir meta etiketi olan karakter seti belirleme işlemi <title> etiketinden önce kullanılmalı, aksi halde başlık istenildiği gibi görünmeyebilir.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Site Başlığı</title>
</head>

9) Sayfayı yatay olarak taşıran uzun etiketler, aşağıdaki gibi satırlara yayılmalı.

<img
  src="resim.jpg"
  alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>

10) HTML kodları bölümlere ayrılmalı ve bölümler başlangıç-bitiş yorumlarına sahip olmalı

<!-- Navbar Start -->
<!-- Navbar End -->

11) Yazılan kodlar resmi HTML doğrulayıcı ile kontrol edilmeli.

https://validator.w3.org/

Yorum Yap