You Are Here: Home > Blog > Blog Detail

Blog

Article of Karisma Academy Blogpage

Kenali kebiasaan Baik dan Buruk ketika menulis kode CSS

Membuat kode CSS yang tersusun rapi seringkali menjadi tantangan tersendiri. Teknologi web yang berkembang sangat cepat bisa menimbulkan pertanyaan, apakah kita telah menuliskan kode dengan efektif atau sebaliknya, memanfaatkan semua teknologi yang ada tanpa menghiraukan efektifitas kode terhadap browser.

Dengan terus berlatih, mestinya Anda bisa menghindari CSS error. Untuk membantu Anda, berikut ini adalah beberapa panduan mengenai kebiasaan apa yang sebaiknya dilakukan dan dihindari ketika menuliskan kode CSS:

Kebiasaan Baik:

1. Menggunakan CSS Reset

Setiap browser menggunakan cara yang berbeda untuk menampilkan beberapa property seperti margins, paddings, line heights, headings, font sizes dan lain-lain. Tidak konsistennya browser dalam menampilkan halaman web merupakan problem terbesar bagi desainer web selama ini. Disinilah peran CSS Reset dibutuhkan guna mengurangi perbedaan tampilan tersebut seminimal mungkin, namun dengan tetap menyediakan ruang bagi para desainer web untuk melakukan styling tambahan.

Ada banyak sekali CSS Reset yang bisa kita gunakan, namun salah 1 yang paling bagus dan cukup modern untuk HTML5 yaitu normalize.css. Yang perlu Anda lakukan hanyalah menyertakan file normalize.css ke dalam dokumen HTML, tepatnya pada bagian <head>. Pastikan css reset sebagai css pertama yang dibaca oleh browser supaya tidak tumpang-tindih dengan kode CSS lainnya.

part1

2. Menyediakan Informasi Style Sheet

Tuliskan judul css, nama pembuat, tags, deskripsi, URL link dan lain-lain ke dalam file css. Dengan begini, pengguna css tersebut mengetahui siapa yang membuat stylesheet dan bisa menghubungi Anda bila memerlukan bantuan.

part2

3. Urutkan Penulisan Elemen dari Posisi Teratas Sampai ke Bawah

Biasanya desainer pemula akan menuliskan kode css sesuai keinginan tanpa mengindahkan urutannya. Hal ini kurang baik karena pada akhirnya akan sulit untuk menemukan kode css bila ditulis secara acak. Karena itulah, mengurutkan penulisan elemen mulai dari yang paling atas (contoh: dimulai dari styling elemen body, lalu berlanjut ke elemen div, h1, p, a dan seterusnya) merupakan kebiasaan yang baik untuk dilakukan.

Berikut ini adalah contoh penulisan kode CSS secara berurutan:

part3

4. Kompres Ukuran File CSS menggunakan CSS Compressor

Kompresi file css akan secara otomatis mencari dan menghapus baris kosong, line breaks serta style css yang berulang. Dengan begini, browser dapat lebih cepat membaca kode pada file css tersebut. Beberapa tools yang bisa dipakai untuk melakukan kompresi yaitu CSS Compressordan CSS Compressor & Minifier.

part4

5. Kelompokkan ID dan Class yang Berada dalam Elemen yang Sama

Sebuah elemen yang mengandung beberapa ID dan class sebaiknya dikelompokkan dengan cara menuliskan kodenya secara berurutan, sehingga kode lebih terorganisir. Hal ini akan memudahkan Anda untuk membaca ulang kode ketika terjadi error. Sebagai contoh, Anda mungkin memiliki container berupa div yang berisikan elemen div lain dengan ID bernama logo dan sebuah elemen div lain dengan ID bernama tagline.
part5

Supaya kode CSS tersusun rapi, tulislah kode CSS nya secara berkelompok seperti ini:
part6

6. Gunakan Baris Komentar untuk Mencatat Fungsi Kode

Kebiasaan baik lainnya adalah menuliskan baris komentar di awal setiap grup kode css. Dengan menandai grup kode seperti ini, akan lebih mudah mencari dan membaca ulang kode css ketika terjadi error.
part7

7. Beri Nama style Sesuai dengan Fungsinya

Biasakanlah untuk memberi nama ID dan Class sesai dengan fungsi dan tujuannya. Dengan begini, Anda atau orang lain yang membaca stylesheet dapat mengetahui fungsi style tersebut tanpa perlu menimbulkan banyak pertanyaan, akan sangat membantu bila nanti terjadi proses perubahan tampilan pada desain web tersebut.

Sebagai contoh, memakai ‘judul-merah’ sebagai nama class merupakan praktek yang kurang baik. Bagaimana bila elemen judul tersebut ingin diubah warnanya? akan lebih baik bila memberi nama class dengan ‘judul-artikel’ saja. Selalu beri nama style berdasarkan fungsinya, bukan berdasarkan property yang dipakai seperti warna atau ukurannya.

8. Gunakan Kode Hex pada Property Warna

Berdasarkan test yang dilakukan oleh Sean Connon (Web Developer Senior dari Alien Creations, Inc). Kode hex (angka hexadecimal) sekitar 4/5 kali lebih cepat untuk dibaca dan dimengerti oleh browser dibanding menggunakan nama warna ( green, blue dan sebagainya).
part8

9. Gunakan Vendor Prefixed CSS

Beberapa fitur baru CSS3 seperti drop shadow dan animate memiliki prasyarat untuk dapat digunakan, hal ini dikarenakan setiap browser menangani fitur baru tersebut dengan cara yang berbeda-beda. Seringkali developer mengalami error hanya dikarenakan lupa menambahkan kode vendor prefixed.

Berikut ini adalah browser prefixes yang biasa digunakan:

  • Chrome: -webkit-
  • Firefox: -moz-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

Misalkan Anda ingin memakai perintah Transtition pada CSS3, jangan lupa untuk menuliskan browser prefixes sebanyak target browser yang Anda mau. Lihat contoh kode dibawah:
part9

10. Validasi CSS

Gunakan W3C free CSS Validator untuk memastikan kode CSS Anda telah terstuktur dengan benar. Keuntungan lainnya adalah, proses validasi ini akan memberitahu Anda apabila terdapat kesalahan/error yang terjadi pada stylesheet, lebih hemat waktu ketimbang Anda melakukan troubleshooting secara manual.
part10

Hindari Kebiasaan Buruk:

1. Membuat Style CSS yang Sama Berulangkali

Menggunakan style yang sama berulang kali pada beberapa elemen HTML merupakan hal wajar, namun sangat penting untuk memastikan kode CSS yang sama tidak ditulis berulang (redundant). Sebagai contoh, terdapat elemen paragraf dan span yang memiliki kesamaan ukuran font dan warna. Ketimbang menulis 2 kode css yang sama dua kali, akan lebih baik bila Anda mengelompokkan style keduanya dengan menggunakan tanda koma.

Lihatlah contoh kode dibawah ini

Contoh styling berulang:
part11a

Contoh kode yang lebih efisien:
part11b

2. Menggabungkan nama Tag dengan nama ID atau Class

Menggabungkan nama Tag dengan nama ID atau Class tidak dianjurkan, karena disinyalir bisa memperlambat proses pembacaan kode oleh browser.

Perhatikan contoh kode berikut:
part12

3. Mengatur nilai Posisi Margin atau Padding secara Terpisah

Menggunakan beberapa kode CSS untuk mengatur nilai margin top, left, right dan bottom bukanlah ide yang bagus. Cobalah untuk menyusutkan baris kode tersebut menjadi satu baris kode saja supaya lebih mudah dibaca dan lebih cepat di ekekusi oleh browser. Kebanyakan property css yang sering dipakai seperti background, font, margin, padding dan border memiliki opsi penulisan bentuk ringkas. Manfaatkan ini supaya penuliskan kode bisa lebih efisien.

Contoh Buruk
part13a

Sebagai contoh, berikut ini adalah kode untuk mengatur posisi margin secara terpisah pada sebuah container div yang sama.

Contoh Baik

Supaya lebih efisien, akan lebih baik bila mengkombinasikan kode CSS tersebut dalam 1 baris kode.
part13b

4. Memakai Tanda Underscores pada Nama ID atau Class

Menggunakan tanda underscore (garis bawah) beresiko menimbulkan masalah kompatibiltas pada browser-browser jadul. Lebih direkomendasikan untuk menggunakan tanda strip (-).

Perhatikan contoh penulisan kode sebagai berikut:

part14

Comments

comments

Tentang Penulis

Mr. Karisma

Karisma Academy merupakan perusahaan profesional dibidang pelatihan software dan developer teknologi pembelajaran berbasis e-learning yang berada di kota Malang, Jawa Timur.