Logo DesainerHub Blue
Contact

7 Kesalahan Penggunaan CSS dan Solusinya

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

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

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

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

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

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

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

Contoh Baik

.my-class {
  transition: left 400ms ease-out;
}

Sumber

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

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

Contoh Baik

.my-class {
  position: absolute;
  z-index: 2;
}

Sumber

Ditandai

Tinggalkan Balasan

Open WA
Bantuan?
🧑🏻‍💻 DesainerHub CS
Hello 👋
Need Help?