Salah satu masalah terbesar dengan pemrograman adalah maintenance atau
pemeliharaan. Dalam skenario sebenarnya, seorang programmer pro tidak selalu
memulai pengembangan proyek dari awal. Sebagian besar, mereka mendapatkan
(atau mengambil) proyek yang mungkin telah ditulis sebelumnya atau biasa kita
sebut dengan template.
Untuk bekerja secara efektif pada suatu proyek, pertama-tama kita harus
memahami kode sumbernya. Pada titik ini, kita harus menyadari pentingnya kode
yang bersih dalam suatu template. Sebagai programmer, kita harus mencoba
menulis kode kita sebersih mungkin.
Hal ini juga berlaku untuk CSS. Ada beberapa poin yang perlu kita perhatikan
saat menulis CSS. Dalam posting ini, saya ingin berbagi beberapa yang paling
penting dengan Anda. Saya yakin beberapa tips ini akan membantu Anda
meningkatkan kualitas kode CSS Anda dan layak disebut sebaga desainer pro.
Jadi mari kita mulai...
Gunakan Reset CSS
Setiap browser dilengkapi dengan gaya default masing-masing untuk setiap
halaman. Ini menyebabkan halaman tampil berbeda dari browser ke browser.
Tujuan dari reset CSS adalah untuk mengurangi jenis ketidakkonsistenan
permasalahan tersebut. Reset CSS akan mengatur ulang nilai elemen seperti
tinggi garis default, margin dan ukuran font judul, dan sebagainya.
Berikut adalah contoh reset CSS yang dapat digunakan:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Gunakan CSS Variable
Variabel CSS juga dikenal sebagai properti khusus yang dapat digunakan kembali
di seluruh dokumen. Situs kompleks memiliki banyak nilai berulang. Misalnya,
alih-alih menggunakan warna yang sama berulang kali, Anda dapat menetapkannya
ke variabel CSS.
Dengan cara ini, saat Anda perlu melakukan perubahan global, hanya ada satu
tempat untuk melakukannya.
Contohnya adalah sebagai berikut:
:root{
--body-color:#fdfdfd;
--font-color:#333;
}
Untuk penggunaan dalam CSS gunakan aturan berikut:
body{
background:var(--body-color);
color:var(--font-color);
}
Adapun kegunaannya adalah apabila anda ingin mengubah warna atau gaya CSS yang
lain, anda tinggal mengganti yang ada di :root saja, tidak perlu merubah semua
CSS yang menggunakan nama yang sama. Sehingga mempersingkat waktu anda dan
membuat CSS anda menjadi terlihat seperti profesional.
Gunakan komentar untuk mengatur bagian CSS
Biasanya saat menata CSS, Anda berpindah dari satu bagian halaman ke bagian
lain, sambil menulis beberapa baris CSS untuk setiap bagian untuk menatanya.
Ini membuat kode Anda terfragmentasi. Lebih mudah untuk menulis pemilih CSS
dalam urutan yang sama atau mengelompokkannya dalam satu elemen halaman.
Jadi, pertama Anda memiliki gaya umum, untuk seluruh halaman kemudian Header,
Navbar, body dll. Dengan cara ini ketika Anda perlu melakukan perubahan,
sangat mudah untuk dengan cepat mencari ke baris yang benar di file CSS Anda.
/***** Header *****/
header{
// CSS anda
}
/***** Aside *****/
aside{
// CSS anda
}
/***** Footer *****/
footer{
// CSS anda
}
Gunakan Prinsip DRY
DRY adalah singkatan dari "Don't Repeat Yourself". Ini merupakan
prinsip umum dari pengembangan software dan dapat diterapkan dalam bahasa
pemrograman apa pun juga dalam CSS. Seperti namanya, DRY bertujuan untuk
menghindari atau mengurangi pengulangan sebanyak mungkin.
Misalnya, kita dapat membuat 3 kelas CSS untuk 3 tombol seperti ini:
.primary-button {
background: blue;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.form-button {
background: green;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.cancel-button {
background: red;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
Bisa dilihat kode dengan background kuning terdapat kesamaan, kita dapat
menggunakan prinsip DRY dengan menulis aturan umum "satu kali" di class CSS
tambahan dan aturan lain dalam CSS lain. Maka jadilah seperti ini:
.button {
color: white;
border-radius: 5px;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
.primary-button {
background: blue;
}
.form-button {
background: green;
}
.cancel-button {
background: red;
}
Seperti yang dapat kita lihat, penerapan prinsip DRY menghindari pengulangan,
mengurangi jumlah baris, dan meningkatkan keterbacaan serta kelancaran
kinerja.
Penamaan
Memberi nama CSS selector adalah aspek penting lainnya dalam menulis CSS yang
lebih baik. Nama pemilih harus deskriptif dan dapat dibaca dengan jelas.
// PENAMAAN YANG BURUK
.p {
// Rules
}
.myFirstForm {
// Rules
}
Normalnya ada tag HTML <p> yang menjadi singkatan dari paragraf. Di atas
kita tidak bisa benar-benar memahami apa class p itu. Hindari juga nama
seperti myFirstForm dan saya tidak merekomendasikan penggunaan huruf besar
kecil yang bercampur.
Sebagai gantinya, gunakan nama deklaratif (dipisahkan dengan tanda hubung jika
ada banyak nama). Seperti contoh dibawah ini:
// PENAMAAN YANG BAGUS
.article-paragraph {
// Rules
}
.contact-form {
// Rules
}
Saya pikir nama-nama itu lebih masuk akal sekarang.
Memberi nama sesuatu dalam pemrograman tidaklah mudah, tetapi ada berbagai
konvensi penamaan yang dapat Anda gunakan dalam proyek Anda. Salah satunya
adalah BEM (Block Element Modifier). Anda dapat mempelajarinya
disini.
Gunakan Singkatan
Beberapa properti CSS seperti paddings, margins, fonts dan border dapat
ditulis dengan cara yang jauh lebih sederhana dengan singkatan. Karena dengan
begitu akan membantu mengurangi garis aturan CSS, jadi CSS anda menjadi lebih
bersih, yang otomatis mempercepat loading.
Jadi jika tanpa singkatan, class CSS akan terlihat seperti ini:
.article-container {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
border-width: 1px;
border-style: solid:
border-color: black;
}
Dan setelah disingkat akan menjadi seperti ini:
.article-container {
padding: 10px 15px 20px 15px;
margin: 10px 15px;
border: 1px solid black;
}
Untuk mempelajari lebih lanjut tentang penyingkatan CSS silakan klik
disini.
Jangan gunakan penamaan Warna (Named colors)
Gunakan kode hex untuk warna Anda. Lebih sulit untuk dibaca tetapi mereka
memiliki beberapa keuntungan. Pertama mereka diberikan lebih cepat daripada
menggunakan nama warna. Kedua, browser terkadang tidak setuju dengan arti
beberapa nama warna. Ketiga Anda memiliki 16.777.216 pilihan warna untuk
dipilih. Juga akan lebih mudah untuk mengatasinya setelah Anda mulai bermain
dengan Javascript.
Contoh penggunaan warna adalah sebagai berikut:
// Gunakan kode hex
body{
background-color:#f50000;
}
//Jangan gunakan named colors
body{
background-color:red;
}
Jangan gunakan inline-styles
Terdapat beberapa argumen di web tentang hal ini: beberapa mengatakan kepada
Anda untuk tidak pernah menggunakan inline styles, sementara yang lain
berpendapat bahwa ini berguna dalam beberapa kasus.
Menurut pendapat saya, praktik terbaik sebenarnya adalah tidak menggunakan
inline styles. Saya akan fokus di sini tentang mengapa kita tidak boleh
melakukannya.
Menurut prinsip separation of concerns, desain (CSS), konten (HTML),
dan logika (JavaScript) harus dipisahkan karena alasan seperti keterbacaan dan
pemeliharaan yang lebih baik.
Menyertakan inline styles atau CSS di dalam tag HTML adalah hal yang melanggar
aturan ini, seperti contoh dibawah:
<div style="font-size: 16px; color: red;">Some Text</div>
Masalah lainnya dalam menggunakan inline styles adalah kita sulit untuk
mencarinya ketika ingin merubah gaya CSS. Misalnya, ketika kita akan mengubah
ubah ukuran font teks di halaman web. Untuk melakukan itu, hal yang paling
memudahkan adalah pertama-tama kita menemukan bagian tertentu di browser
tempat perubahan diperlukan dengan melihat struktur HTML, contoh seperti di
bawah.
<div class="text-bold">Some Text</div>
Kemudian kita hanya perlu menemukan selector dalam tag tersebut. Lalu, kita
pergi ke class itu dan membuat perubahan:
.text-bold {
font-size: 16px; // change the font-size to 14px
font-weight: bold;
}
Sesimpel itu.
Namun beda kasus jika kita menggunakan inline styles. Hal tersebut akan
memakan banyak waktu kita untuk mencari dan menemukan.
Kurangi Ukuran File CSS
File CSS yang lebih kecil berarti pemuatan halaman yang lebih cepat dan
pengalaman pengguna yang lebih baik. Pertama, Anda harus menghapus kode yang
tidak perlu. Untuk melakukan ini, periksa kode CSS yang berlebihan atau
duplikat menggunakan alat seperti ini:
http://unused-css.com/
Kecilkan juga ukuran file css dengan menggunakan kompresor css. Ada banyak.
Salah satu favorit saya adalah minifier CSS:
http://www.csscompressor.net/
Periksa di CSS Validator
Meskipun halaman Anda dimuat dengan benar di browser Anda, halaman tersebut
mungkin muncul secara tidak terduga di browser lain. Atau mungkin ada bug yang
tidak muncul di browser Anda.
CSS Validator akan memeriksa kesalahan atau bug pada CSS Anda dan memastikan
kompatibilitas lintas platform, lintas browser, dan di masa mendatang. Pilihan
saya adalah
https://jigsaw.w3.org/css-validator/
Demikan yang dapat saya bagikan mengenai cara menulis CSS seperti profesional, semoga bermanfaat. Terima kasih telah mengunjungi blog agung jaka nugraha. Wassalam!
