About Piksel

8 Tips Praktis CSS Untuk Mendesain Website

Cascading Style Sheet atau yang lebih dikenal dengan singkatan CSS sudah menjadi bagian penting bagi para desainer web. CSS sudah umum dan telah lama digunakan sejak berkembangnya konten internet, namun tidak sedikit yang mengalami kesulitan dalam menggunakannya. Hal itu lebih disebabkan oleh cara kerjanya yang tidak tepat dan kurang efisien.

Website Wireframe Sketch And Programming Code On Digital Tablet

Untuk membuat proses mendesain website menjadi lebih mudah dan nyaman, berikut ini 8 tips praktis yang dapat diterapkan dalam menggunakan CSS.

1. Menggunakan CSS Reset Saat Mulai Mendesain Website

Sebagian web desainer memang mengatakan bahwa menggunakan CSS Reset tidak terlalu penting. Namun bagi Anda yang lebih menyukai proses desain yang benar-benar dari nol, maka teknik ini akan sangat membantu. Dengan menggunakan CSS Reset, semua tampilan default dari browser akan dimatikan dan Anda akan diajak untuk mendesain setiap elemen yang dibutuhkan

2. Memanfaatkan CSS Shorthand

Terdapat shorthand atau format penulisan yang tersedia untuk sejumlah elemen CSS, hal ini patut dimanfaatkan untuk menuliskan kode secara lebih ramping dan mudah ditelusuri. Sebagai contoh, daripada menuliskan kode seperti berikut ini:

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

Anda dapat membuatnya lebih ramping dengan menuliskannya seperti ini:

background: #000 url(images/bg.gif) no-repeat top right;

3. Don’t Repeat Yourself (DRY)

Metode DRY (Don’t Repeat Yourself) sudah menjadi cara terbaik dalam menyusun kode CSS. Dengan tidak melakukan pengulangan yang tidak perlu, Anda akan memiliki struktur kode yang lebih rapi dan mudah diedit nantinya.

Tanpa DRY:

.menu li {
color: red;
}
.menu li a {
color: red;
}

Dengan DRY:

.main li, .main li a {
color: red;
}

4. Hindari Terlalu Banyak Menggunakan !important

Syntax !important memang sering menjadi senjata pamungkas saat sejumlah kode tidak berhasil menyajikan tampilan yang diinginkan. Masalah yang akan muncul jika tidak menempatkan !important pada tempat yang sesuai adalah kesulitan dalam hal maintenance. Perubahan-perubahan yang ada di waktu yang akan datang akan sulit ditelusuri jika Anda tidak menempatkan !important dalam kondisi yang benar-benar sesuai.

5. Tetap Konsisten

Setiap web desainer memiliki aturan kerjanya masing-masing dalam mendesain website. Terlepas dari semua itu, konsistensi struktur dari dokumen CSS patut dijadikan prioritas selama mengolahnya. Anda dapat menyusun urutan sesuai secara alfabetis, namun ada juga yang mengurutkannya sesuai fungsi ataupun panjangnya baris. Apapun pola yang Anda pilih, gunakanlah secara konsisten agar lebih mudah ditelusuri nantinya.

6. Penamaan Yang Jelas

Hal ini sering terkesan sepele, namun dalam memberi nama setiap elemen di CSS, hindari pilihan kata yang terlalu rumit. Usahakan untuk membiasakan diri dengan sistem penamaan standar seperti berikut ini:

  • Hindari kata yang bersifat tampilan (contoh: kotak-menu-biru), karena akan aneh saat tampilannya Anda ubah.
  • Gunakan hanya huruf kecil, karena CSS bersifat case-sensitive. Jika terpaksa, gunakan konsep camel case (contoh: mainMenu).
  • Pisahkan kata menggunakan dash (contoh: main-menu).
  • Tidak perlu terlalu spesifik (contoh: list-one, list two), karena bisa disamakan namanya jika tampilannya sama.

7. Manfaatkan Comment Sesuai Kebutuhan

Memang, struktur kode yang bagus tidak membutuhkan comments, namun tentunya penambahan comment pada bagian yang penting akan sangat berguna. Terlebih lagi jika Anda mengerjakannya secara bersama-sama dengan orang lain yang belum tentu memahami struktur kode Anda secara mudah.

Comment dapat digunakan untuk beberapa hal penting seperti berikut ini:

  • Menonaktifkan kode.
  • Perubahan kode yang sebelumnya dikerjakan oleh orang lain.
  • Pengingat, jika ada sebuah bagian yang masih perlu perbaikan.
  • Penjelasan, pada bagian kode yang fungsinya detil.

8. Mencoba Flexbox

Modul Flexible Box Layout atau yang lebih dikenal dengan Flexbox berguna untuk aligning tampilan sejumlah element. Penyusunan elemen-elemen secara vertikal merupakan salah satu kekuatan Flexbox yang tidak bisa dilakukan oleh float. Untuk mempelajari tentang Flexbox dalam mendesain website, Anda dapat menyimak sebuah artikel online berikut ini: https://css-tricks.com/snippets/css/a-guide-to-flexbox.

, , , , , , , , , , , , , ,

No comments yet.

Leave a Reply

AYO GABUNG DI PIKSEL

Dapatkan artikel, berita, tips dan tutorial terbaru!