Sebelum membaca artikel ini apakah kalian sudah tau mengenai menulis code CSS yang benar pada sebuah website atau blog? mungkin sebagian besar belum begitu tahu bagaimana melakukannya. berikut ini adalah beberapa tips untuk menulis CSS yang baik dan benar.

1. CSS Reset

Hal ini berguna untuk menghapus padding dan margin pada semua elemen web atau blog anda. Apakah sebelumnya anda sudah pernah menggunakan Eric Meyer Rest, YUI Reset, atau anda lebih suka mengatur ulang kustom style pada website anda?

Dibawah ini adalah contoh penulisan css reset pada sebuah stylesheet.

CSS Code Reset

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,  
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Jangan menulis css reset seperti ini !

* { margin: 0; padding: 0; }

Why ?

Tanda (*) merujuk kepada semua elemen pada blog atau website anda selain itu dibutuhkan banyak waktu untuk memprosesnya, dan apa yang anda pikir ketika tombol radio () dan checkbox [] dihapus padding dan margin nya ? tentu akan menjadi berantakan bukan ?.

Elemen form terkadang melakukan hal yang tidak diduga ketika anda menulis css reset menggunakan tanda (*) tadi. jadi akan lebih baik jika anda meninggalkannya.

2. Menulis secara terurut / Alphabetize

Dalam hal ini cara manakah yang lebih mudah apabila kalian menulis deskripsi css menggunakan cara yang terurut atau dengan cara random/tidak beraturan ? mungkin kalian menyepelekan hal ini. Tapi hal ini membantu anda menghemat waktu untuk menemukan properti tertentu yang anda tulis dalam css.

Dibwah ini merupakan contoh penulisan css yang tidak terurut dan yang terurut sesuai abjad.

Random

header h1 {  
    z-index: 101;  //z
    color: #000;  //c
    position: relative;  //p
    line-height: 24px;  //l
    margin-right: 48px;  //m
    border-bottom: 1px solid #dedede;  //b
    font-size: 18px;  //f
}

Bandingkan dengan yang satu ini :

Alphabetizing

header h1 {  
    border-bottom: 1px solid #dedede;  //b
    color: #000;  //c
    font-size: 18px; //f 
    line-height: 24px;  //l
    margin-right: 48px;  //m
    position: relative;  //p
    z-index: 101;  //z
} 

Jadi cara manakah yang lebih anda suka ?.

3. Pengelompokkan / Organization

/*****Reset*****/  
Remove margin and padding from elements  
  
/*****Basic Elements*****/  
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.  
  
/*****Generic Classes*****/  
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc    
  
/*****Basic Layout*****/  
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site  
  
/*****Header*****/  
Define all elements in the header  
  
/*****Content*****/  
Define all elements in the content area  
  
/*****Footer*****/  
Define all elements in the footer  
  
/*****Etc*****/  
Continue to define the other sections one by one 

Dengan melihat kode diatas anda lebih mudah untuk menemukan item atau elemen yang anda cari, dan hal ini juga dapat mempersingkat waktu dalam pengeditan kembali kode tersebut. Anda dapat menggunakan komentar untuk pengelompokkan item tersebut.

4. Consistency

Menurut pendapat Saya secara pribadi, Jika Selector memiliki lebih dari 3 properti, saya menulisnya dalam beberapa baris, namun apabila tidak lebih dari itu saya hanya akan menggunakan satu baris.

Example

div#header { float: left; width: 100%; }  
div#header div.column {  
    border-right: 1px solid #ccc;  
    float: rightright;  
    margin-right: 50px;  
    padding: 10px;  
    width: 300px;  
}  
div#header h1 { float: left; position: relative; width: 250px; }  

5. CSS Shorthand

Manfaatkan penulisan CSS yang singkat untuk menulis kode CSS dengan cepat dan mengurangi ukuran file. Notasi singkat dapat digunakan untuk margin, padding, border, font, background dan juga untuk color.

Long code writing

li{   
    font-family:Arial, Helvetica, sans-serif;  
    font-size: 1.2em;  
    line-height: 1.4em;  
    padding-top:5px;  
    padding-bottom:10px;  
    padding-left:5px;  
} 

Using Shorthand Properties

li{   
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;   
    padding:5px 0 10px 5px;  
} 

6. Using External Stylesheet

Ini merupakan cara yang bagus untuk memisahkan code css yang muncul pada tampilan. Tempatkan semua kode CSS Anda ke eksternal stylesheet dengan menggunakan <link> untuk referensi stylesheet dalam halaman web. Dengan menempatkan CSS ke file eksternal, Anda dapat dengan mudah memperbarui tampilan pada web anda.

Example

<style type="text/css" >  
    #container{ .. }  
    #footer{ .. }  
</style> 

Setelah menempatkan file ke eksternal maka akan menjadi seperti ini :

<link rel="stylesheet" type="text/css" href="css/styles.css" />

8. Gabungkan Beberapa Selector Sekaligus

Dengan menggabungkannya maka penulisan stylesheet anda tidak akan memakan waktu yang lama, dan juga code akan terlihat lebih simple dan tidak mempengaruhi berat loading halaman.

Bad

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Bandingkan dengan yang ini :

Good

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }  

9. CSS Inheritance

Jika beberapa elemen anak dari elemen induk menggunakan style yang sama pada halaman web Anda, akan lebih baik untuk hanya mendefinisikan elemen induk nya saja dan biarkan CSS inheritance melakukannya. Anda akan dapat dengan mudah memperbarui kode kemudian dan juga akan mengurangi ukuran file CSS.

Berikut Contohnya :

Bad

#container li{ font-family:Georgia, serif; }  
#container p{ font-family:Georgia, serif; }  
#container h1{font-family:Georgia, serif; } 

Good

#container{ font-family:Georgia, serif; }  

10. Compress your CSS

Setelah Anda siap untuk menyebarkan proyek desain web anda, kompres kode CSS Anda menggunakan alat bantu seperti CSS Compressor untuk mengurangi ukuran file dan meningkatkan waktu loading halaman web.

Kesimpulan