• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tips dalam Menuliskan CSS yang Baik

26‘11
February

info53.jpg

Saat pertama kali menggunakan CSS menuliskan kodenya memang akan terasa melelahkan dan sangat rumit jika anda sebelumnya terbiasa membuat website hanya dengan table. Bagaimanapun juga setelah kita mengetahui bahwa pembuatan website dengan table bukanlah standar web yang baik dan sangat kuno, kita pun pasti akan mulai beralih dan mempelajari CSS.

Saya rasa semua orang pasti bisa menuliskan CSS, bahkan sekarang banyak sekali perusahaan yang bergerak di bidang converting PSD ke HTML dengan CSS. tapi satu hal yang jadi pertanyaan apakah CSS yang dituliskan cukup baik? saya akan bahas hal-hal tentang menuliskan CSS yang baik di article saya kali ini.

Memberikan indentasi (jarak) setiap menuliskan Properti CSS

body { 
	background: url(../images/background.jpg);
	font: 80%/160% Arial, Helvetica, sans-serif;
    height:auto;
    left:0;
	margin:0 auto;
	padding:0;
    top:0;
	width:100%;
}

Berilah jarak indentasi saat menuliskan properti CSS, pisahkan antara properti CSS yang satu dengan yang lainya bila memang propertinya banyak. Pemberian jarak akan membuat kode CSS terorganisasi dengan baik sehingga mudah untuk menemukan properti yang kita cari. Bayangkan bila menuliskan CSS seperti sebuah paragraph cerita pendek dan memiliki 500 baris kode tentu mata kita akan tegang dan pusing saat menelusuri kode

Disusun secara alphabetical

Ini saya telat melakukannya, tapi mulai saya terapkan dalam penulisan kode di beberapa project baru saya. Penyusunan tulisan properti CSS secara alphabetical juga adalah cara yang baik dan mempermudah pencarian properti yang mau kita rubah nilainya. seperti contoh CSS di atas properti dimulai dari huruf awal b (background) dan diakhiri dengan huruf awal w (width). pada Dreamweaver fasilitas ini sudah disediakan dengan menekan ctrl dan spasi.

Penulisan kode CSS secara singkat

anda harus belajar bagaimana menuliskan kode CSS secara pendek. Pada penulisan properti border di bawah ini adalah contoh penulisan yang kurang baik:

.sample {
	border-color:#000;
	border-style:solid;
	border-width:1px;
}
.sample2 {
	border-bottom:1px #000 solid;
	border-left:1px #000 solid;
	border-right:1px #000 solid;
	border-top:1px #000 solid;
}

Kedua penulisan diatas sebetulnya bisa di buat singkat dengan menuliskannya seperti contoh di bawah dan hasilnya juga sama saja:

.sample, .sample2 {
	border:1px #000 solid;
}

penulisan yang pendek akan mempercepat proses penulisan kode, selain itu juga akan mempercepat tingkat cluster dalam css sehingga bisa lebih cepat juga di render oleh browser.

Menggunakan CSS reset

html, body {
	height:100%;
	min-height:100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, form, fieldset, input, textarea, th, td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

Setiap browser mempunyai kompatibilitas yang berbeda dan juga perlakuan berbeda pada CSS, anda harus mereset semua CSS sebelum memulai penulisan CSS sehingga kode anda tidak terpengaruhi browser dan browser menampilkan item CSS anda dengan benar, Di atas adalah beberapa contoh yang saya buat untuk mereset CSS pada beberapa elemen. anda bisa membuatnya sendiri atau silahkan download CSS reset yang saya buat di sini

Lakukan CSS dengan benar

Anda tidak boleh membuat file CSS sebelum anda selesai melakukan markup terhadap HTML anda. Buatlah dulu keseluruhan markup di HTML mulai dari kepala sampai kaki. CSS tidak bernilai sama sekali tanpa format Dokumen HTML yang baik

Membuat pernyataan Comments

/*membuat layout*/
.layout {
	
}

/*membuat sidebar*/
.sidebar{

}

membuat comment di setiap bagian pengerjaan adalah hal yang baik untuk membuat penulisan kita tetap bersih dan terorganisir dengan baik. ini juga membantu anda untuk mempermudah penelusuran kode

Tulis CSS secara terstruktur

sepertihalnya menggambar manusia anda akan menggambar kepalanya dahulu sebelum menggambar kaki, begitu juga dalam menuliskan kode sebaiknya anda mulai dari kepala HTML (header) terstruktur hingga bagian kaki (Footer). Penulisan kode secara tidak terstruktur akan memusingkan anda sendiri

Hapus semua Kode CSS yang tidak terpakai

Mungkin saat menuliskan kode banyak atribut Class dan ID yang tidak jadi dipakai, buanglah segera semua atribut class dan ID yang tidak terpakai atau pisahkan dalam file referensi yang berbeda. Apabila anda belakangan ingin merubah CSS anda, anda tidak akan di pusingkan dengan banyaknya atribut class dan ID yang sudah tidak digunakan.

Pisahkan penulisan CSS hacking

Untuk membuat browser tertentu menampilkan item CSS yang kita buat secara benar, kita akan melakukan hacking CSS untuk browser tersebut. ini merupakan kegiatan rutin dalam menuliskan kode CSS. Pisahkan penulisannya dengan file css, tuliskan secara inline style sheet karena penulisan hacking akan di anggap tidak valid oleh browser

Gunakan Bahasa Inggris dalam menulikan Kode

Bahasa inggris adalah bahasa internasional bagaimanapun juga anda harus menguasainya dan belajar untuk menuliskan berbagai kode css dalam bahasa inggris. Terlepas dari tema CSS anda juga harus membiasakan menuliskan codinf dalam bahasa inggris baik untuk document (HTML, XML, XHTML, dsb) atau Programming (PHP, JAVA, dll).

Anda tidak tahu nasib anda 5-10 tahun kedepan, Mungkin saja anda akan bekerjasama dengan perusahaan asing atau pekerjaan anda akan di kembangkan oleh pihak asing yang tidak mengerti bahasa Indonesia, jiga terbiasa dengan menuliskan kode dalam bahasa Indonesia maka tentunya anda akan kesulitan untuk menuliskan kode dengan bahasa inggris. Maka dari itu mulailah dari sekarang!

Siapkan rokok yang banyak (jangan diikutin)

Bila anda seorang perokok siapakan persediaan rokok yang banyak karena saat coding tingkat merokok anda menjadi lebih banyak dan bila hobby coding anda suka lupa waktu. Bayangkan bila tengah malam rokok anda habis terus gak ada warung yang buka wah bisa tambah pusing codingnya.... Wakakakaka.

Konsistensi Penulisan CSS

Terlepas dari berbagi tips, hal yang paling penting adalah anda harus konsisten dengan gaya penulisan anda. Setiap orang mempunyai pandangan sendiri lakukanlah apa yang menurut anda paling baik untuk anda lakukan.

Ok sekian tips dari saya dalam menuliskan CSS yang baik, hal-hal kecil yang sering dilupakan namun sangat berarti bila diterapkan. Mudah-mudahan bisa bermanfaat dan bisa di amalkan.
Widi Mawardi

Anda juga mungkin suka dengan artikel ini :

  1. Pengertian CSS dan Cara Penerapan CSS pada HTML
  2. Tutorial dan Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table
  3. CSS 3 untuk border dan background
  4. Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
  5. Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)

Komentar

  • jimmy (06 Nov 2016 03:27:32)

    siapkan rokok yang banyak
    ini yg penting! mod boost buat ngoding. :)
    sukses selalu gan

  • Obat Ace Maxs (28 Apr 2015 08:51:25)

    Thanks gan artikelna, good luck!

  • iyus (27 Feb 2015 04:05:02)

    thanks gan infonya,,,izin serap ilmunya..

  • Rudhimaya (05 Jul 2013 05:42:48)

    Mas saya sangat senang sekali dengan tip pnulisan struktur CSS diatas, dan sementara ini saya sedang asyik asyiknya membangun theme saya,tetapi saya tidak bisa memiliki ketetapan pilihan dalam menulis coding baik itu php dan css, saya selalu bimbang dan ingin menerapkan semua yang saya lihat dan pelajarai, seperti disini, saya sangat tertarik dengan penulisan font di web ini, mohon dikasi tahu gimana cara menuliskan font di website ini dalam CSS nya pak. saya sangat tertarik dan akan saya implementasika pada theme saya. tanks sir.

  • i[at]w3function.com (11 Apr 2013 11:18:33)

    @prastdj penjelasan font silahkan buka di sini http://w3function.com/blog/index.php?p=det&idn=46 kalo kamu baru di css sebelum ke link di atas masuk ke sini http://w3function.com/blog/index.php?p=det&idn=41

» Muat Komentar Sebelumnya (12 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff