7 Kesalahan Pengunaan CSS dan Solusinya
1.Unit Ukuran
Menggunakan unit Pixel (px) maupun persentase (%) adalah hal yang biasa dalam beberapa kasus, yang jadi masalah adalah ketika menggunakan unit yang absolut bukan relatif.
Contoh Buruk
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 8px;
}Masalah dan solusinya
- Menggunakan unit relatif memastikan bahwa situs web menskalakan secara proporsional sesuai dengan pilihan font Anda, dan sesuai dengan pilihan ukuran layar dan tingkat zoom pengguna.
- Rumus untuk menghitung nilai rem adalah size / base-font-size (dalam kasus ini adalah 16), singkatnya 8/16 = 0,5. Jika Anda tidak ingin menggunakan kalkulator setiap kali membutuhkan unit baru, gunakan Sass dan buat mixin. Lihat disini caranya.
Contoh Baik
body {
font-size: 16px;
/* lebih baik biarkan browsers menentukan base font size, biasanya 16px */
}
p {
font-size: 1rem;
line-height: 1.25;
margin-bottom: 0.5em;
}Sumber
- CSS Units: Which Ones To Use And Avoid
- CSS values and units
- Building Resizeable Components with Relative CSS Units
2.Variasi Font
Variabel Font mungkin bs sangat berguna, tapi menggunakan font-variation-settings yang tidak perlu dapat merusak tampilan.
Contoh Buruk
CSS:
.bold {
font-variation-settings: 'wght'700;
}
.italic {
font-variation-settings: 'ital'1;
}HTML:
<span class="italic bold">italic bold?</span>
Anda pasti berfikir teks tersebut akan menjadi tebal dan miring, faktanya hal tersebut tidak akan terjadi
Masalah dan solusinya
- font-variation-settings tidak akan menambahkan, jadi ketika beberapa aturan tumpang tindih, aturan tersebut akan saling menggantikan.
- Solusi umum untuk itu adalah menggunakan variabel CSS, tetapi Anda pasti tidak ingin repot-repot hanya untuk mendefinisikan font-weight dengan cara yang berlebihan.
- Mendefinisikan ulang font-weight, font-stretch atau font-style dengan cara ini tidak menghasilkan apapun, font variabel dapat menangani properti ini.
Seperti yang saya kutip dari sini
Jika memungkinkan, penulis biasanya harus menggunakan […] properti ini untuk kasus khusus di mana penggunaannya adalah satu-satunya cara untuk mengakses variasi font tertentu yang jarang digunakan. Misalnya, lebih disarankan gunakan font-weight: 700 ketimbang font-variation-settings: ‘wght’ 700
Contoh Baik
Hanya gunakan font properties
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}Sumber
3.Spesifikasi
Terlalu berlebihan menentukan aturan CSS mana yang diterapkan oleh browser. Pengembang sering kali menulis selector yang terlalu spesifik hanya agar 10.000% yakin aturan mereka akan berlaku.
Contoh Buruk
div#my-popup div span.my-radiocheckbox-label-text {
color: #666;
}
#some-id .label {
color: #111 !important;
}Masalah dan solusi
- Aturan yang terlalu ditentukan akan mengarah pada pengelolaan yang sulit dan keterbacaan kode, sementara tidak ada manfaat nyata.
- Jika ingin menggunakan kembali kode yang ada, hindari menggunakan ID untuk styling : seperti yang ditunjukkan oleh namanya, ini adalah pengenal unik, tidak dapat diulang dalam halaman. Jika Anda memerlukan bantuan dengan penamaan selector dan menghindari konflik style, coba gunakan BEM atau metodologi penamaan serupa lainnya.
CSS adalah singkatan dari Cascading Style Sheets, yang berarti, jika Anda menerapkan warna yang berbeda untuk teks beberapa kali di CSS Anda dengan kekhususan yang sama, selector yang berada di bagian bawah sumber yang akan diterapkan. Misalnya, pada kode di bawah ini, warna font akan menjadi hitam:
.label-color {
color: red;
}
.label-color {
color: black;
}Sumber
- Specificity on w3.org
- Specificity on MDN
- Specifics on CSS Specificity
- CSS Specificity: Things You Should Know
- Specificity Calculator
4.font-family
Menentukan font utama untuk hampir setiap selector bukanlah cara yang baik, namun masih banyak mengalami masalah ini.
Contoh Buruk
.my-class-1 {
font-family: Roboto;
}
.my-class-2 {
font-family: Roboto;
}
p {
font-family: Roboto;
}
.my-class-3 {
font-family: Roboto;
}
footer {
font-family: Roboto;
}Masalah dan solusi
- Menduplikasi impor font-family hanya menyebabkan sulitnya perawatan. Jika karena alasan tertentu Anda ingin mengubah font situs web Anda, lakukanlah di setiap baris, atau di seluruh file.
- Jika Anda menambahkan nama font secara manual, ada kemungkinan besar Anda salah ketik dan browser akan memuat font yang berbeda (misalnya Ariel, bukan Arial …).
- Kutipan tidak diperlukan, tetapi ini merupakan cara yang baik untuk digunakan, terutama jika nama font mengandung spasi.
- Selalu tambahkan opsi fallback. Jika Roboto tidak tersedia, font sans serif yang ditentukan oleh user agent akan digunakan. Perhatikan, Roboto bukan nama font, jadi jangan gunakan tanda kutip!
- Jika Anda ingin menggunakan jenis font yang berbeda untuk tajuk Anda, tautan, apa pun, cara terbaik untuk menyimpan namanya sebagai variabel CSS.
Contoh Baik
body {
font-family: "Roboto", sans-serif;
}Contoh Baik Lainnya
:root {
--heading-font-family: "Georgia", "Times New Roman", "Times", serif;
}
.title {
font-family: var(--heading-font-family);
}Sumber
5.Prefix
Vendor browser terkadang menambahkan prefiks (awalan) ke properti CSS dan JavaScript API eksperimental atau nonstandar, sehingga pengembang dapat bereksperimen dengan ide-ide baru sementara – secara teori – mencegah eksperimen mereka diutamakan dan kemudian merusak kode pengembang selama proses standarisasi.
Contoh Buruk
.my-class {
-webkit-transition: left 400ms ease-out;
/* older webkit */
-webkit-transition: left 400ms ease-out;
-moz-transition: left 400ms ease-out;
-ms-transition: left 400ms ease-out;
-o-transition: left 400ms ease-out;
transition: left 400ms ease-out;
}Masalah dan solusi
- Menambahkan awalan yang tidak perlu membuat kode Anda lebih sulit untuk dibaca dan dikelola. Ukuran file juga bisa bertambah tanpa alasan.
- Jika tidak yakin properti mana yang memerlukan awalan, dan mana yang tidak, gunakan caniuse.com. Dengan alat ini Anda dapat memeriksa dukungan keseluruhan untuk setiap properti.
- Jika tidak ingin mengotak-atik prefiks, Anda dapat menggunakan Autoprefixer dalam proses build.
- Vendor browser sedang bekerja untuk berhenti menggunakan prefiks vendor untuk fitur eksperimental. Pengembang web telah menggunakannya di situs Web produksi, meskipun sifatnya eksperimental. Hal ini mempersulit vendor browser untuk memastikan kompatibilitas dan bekerja pada fitur-fitur baru; itu juga berbahaya bagi browser kecil yang akhirnya terpaksa menambahkan awalan dari browser lain untuk memuat situs web populer (Sumber: MDN).
Contoh Baik
.my-class {
transition: left 400ms ease-out;
}Sumber
6.Link
Salah satu kesalahan paling umum: menyetel warna untuk tautan, tetapi tidak menambahkan status :hover, :focus dan :active.
Contoh Buruk
a {
color: #ca0000;
text-decoration: none;
}Masalah dan solusi
- Tanpa status yang hilang tersebut, tautan kita tidak akan dapat diakses, pengguna mungkin bingung saat menavigasi situs web kita dengan mouse atau keyboard, karena mereka tidak akan dapat mengidentifikasi apa yang dapat diklik dan apa yang tidak.
- Secara default, browser menyetel text-decoration: underline; ke tautan, tetapi menghapus properti ini juga dapat menyebabkan kebingungan
- Coba gunakan warna yang sesuai dengan desain Anda tetapi tetap memperjelas apakah teks dapat diklik. Di blog ini, warna biru muda konsisten untuk item yang dapat diklik.
Contoh Baik
a {
color: #ff0000;
}
a:hover,
a:visited,
a:focus {
color: #a60000;
text-decoration: none;
}
a:active {
color: #000000;
background-color: #a60000;
}Sumber
7.z-index
z-index adalah sesuatu yang dapat membuat kita frustasi. Jumlah digit adalah cara pengembang mencoba memposisikan div di atas konten, tetapi kadang gagal total.
Contoh Buruk
.my-class {
z-index: 122828282882;
}Masalah dan solusi
- z-index hanya dapat digunakan dengan posisi absolute, fixed, relative, atau sticky. Dalam contoh diatas, baris ini hilang.
- z-index memiliki nilai maksimum yaitu 2147483648, nilai positif maksimum untuk bilangan bulat biner bertanda 32-bit dalam komputasi (contoh diatas memiliki +2 digit).
- Jika Anda tidak mengubah apa pun pada nilai sumbu z, menambahkan 2 atau 3 memiliki efek yang sama dengan 100 atau 10000. Menambahkan angka besar dapat menyebabkan sulitnya mengelola.
- Anda bahkan mungkin tidak memerlukan z-index sama sekali, cukup dorong elemen DOM sedikit lebih jauh ke tag </body>, ini akan dirender lebih lambat dari elemen dalam lapisan yang sama sebelumnya, sehingga dapat menutupi mereka.
Contoh Baik
.my-class {
position: absolute;
z-index: 2;
}
