Ada banyak tutorial CSS yang tersedia di internet namun beberapa tutorial yang bermanfaat. Dalam tutorial ini Anda akan menemukan 5 langkah untuk menulis kode css yang lebih baik untuk proyek web berikutnya. Kuharap menikmati Anda tutorial ini.

1. ResetCss

Anda harus selalu menggunakan Entah itu ulang dapat Eric Meyer Reset, si YUI Reset, atau kustom Anda sendiri ulang, hanya menggunakan sesuatu.

Tujuan dari stylesheet reset browser adalah untuk mengurangi inkonsistensi dalam hal-hal seperti garis standar ketinggian, margin dan ukuran font dari pos, dan seterusnya - Eric Meyer

  html, body, div, span, applet, objek, h1, h2, h3, h4, h5, h6, iframe, 
  blockquote, pre, abbr, acronym, alamat, besar, mengutip, kode, del, dfn, em, 
  font, img, ins, kbd, q, s, Samp, kecil, pemogokan, kuat, sub, sup, tt, var, 
  dd, dl, dt, fieldset, form, label, legenda, meja, caption, tbody, tfoot, 
  thead, tr, th, td, input, pilih, textarea 

  ; padding : 0 ; } (Margin: 0; padding: 0;) 


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 

2. CSS singkatan

Salah satu yang terbaik dan fitur penting dari CSS adalah kemampuan untuk menulis kode dalam suatu cara diminimalkan.

Salah Kode

  ( 
  margin-top: 10px; 
  margin-right: 7px; 
  margin-bottom: 10px; 
  margin-left: 7px; 

  padding-top: 10px; 
  padding-right: 7px; 
  padding-bottom: 10px; 
  padding-left: 7px; 

  font-size: 12px; 
  font-weight: bold; 
  ; font-family: Arial, Verdana, Arial, sans-serif; 
  ) 

Benar Kode

  ( 
  ; margin: 10px 7px 10px 7px; 
  ; padding: 10px 7px 10px 7px; 
   Arial, Verdana, Tahoma, sans-serif ; font: bold 12px Arial, Verdana, Arial, sans-serif;  
  ) 

3. Jangan menggunakan begitu banyak kelas dan Id's

Saya perhatikan bahwa sebagian besar menambah kelas pemula dan ID's untuk hampir setiap elemen pada halaman, yang tidak required.There adalah beberapa contoh di bawah ini dari apa yang saya maksudkan.

Salah Kode

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = "wrapper" class = "wrapper"> <p class = "heading"> <strong class = "subheading"> Selamat Datang </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Home </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Tentang </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Layanan </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontak </ a> </ p> </ p> 

Berikut adalah kode yang benar

Benar Kode

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> Selamat Datang </ h1> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Tentang </ a> </ li> <li> <a href = "#"> Layanan </ a> </ li> <li> <a href = "#"> Kontak </ a> </ li> < / ul> </ div> 

4. Organisasi Anda Stylesheet

Anda harus mengatur stylesheet sehingga mudah untuk menemukan hal-hal dan item terkait berdekatan. Menggunakan komentar secara efektif. Sebagai contoh, Ada Contoh akan memberitahu Anda bagaimana untuk mengatur stylesheet

  / * Reset * / 
   elements Hapus margin dan padding unsur 

  / * Basic Elemen * / 
  Tentukan style untuk elemen dasar: tubuh, h1, h2, h3, h4, h6, ol, ul, dl, p dll 

  / * Generic Classes * / 
  Tentukan gaya untuk kelas umum: hal-hal sederhana seperti menghapus bagian bawah,  
  melayang ke samping dll  
  / * Basic Layout * / 

  / * Basic Layout * / 
  Tentukan gaya tata letak dasar: header.  footer, sidebar dll 

  / * Header * / 
  Tentukan gaya header 

  / * Isi * / 
  Tentukan gaya daerah untuk konten 

  / * Footer * / 
  Tentukan gaya footer 

  / * Etc * / 
  Lanjutkan 

5. Gunakan Bersyarat stylesheet

Internet Explorer adalah yang paling kereta dari semua browser. Untungnya Anda dapat menggunakan komentar bersyarat untuk mengelola CSS yang disajikan ke IE. Jika aku membutuhkannya aku punya stylesheet yang disebut ie6.css yang menargetkan IE versi lama. Hal ini memungkinkan saya untuk mengelola CSS untuk browser lama dengan cepat dan mudah.

Berikut adalah Contoh

  LTE <!--[ if IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > <link rel = "stylesheet" href = "ie6.css" type = "text/css" media = "screen" /> 
 
  -- > <! [Endif] -> 

Kesimpulan

Ini hanya beberapa tips yang membantu saya untuk menulis kode yang lebih baik. Saya harap tutorial ini juga akan membantu Anda untuk menulis kode yang lebih baik dan bersih. Terapkan Tips untuk Anda saat ini dan proyek-proyek berikutnya, dan Anda pasti akan menghargai upaya.

Jika Anda Pikirkan bahwa tutorial dapat lebih baik, silahkan berbagi dengan kami. Komentar kami

jika Anda ingin menerima lebih banyak inspirasi dari kami, silahkan pertimbangkan untuk berlangganan feed dengan RSS atau email.

Filed under: Css, Tutorial oleh admin