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!