BEST PRACTICE

bukan cuma bikin UI bagus, tapi cepat, bisa diakses semua orang dan maintainable

1. Performance

Minimalkan CSS

• hapus css tidak terpakai
• hindari selector terlalu kompleks kurang baik:

div ul li a span { }

baik:

.nav-link { }

Gunakan Class

• class lebih reusable dan ringan untuk styling

Hindari !important

sebisa mungkin hindari !important agar lebih mudah di-maintain

Gunakan transform dan opacity untuk animasi

lebih ringan dibanding top/left

transform: translateX(20px);

Lazy load gambar

<img src="image.jpg" loading="lazy">

Gunakan shorthand

margin: 10px 20px;

jika menggunakan semua value gunakan shorthand, lebih efisien dari 4 baris

2. ACCESSIBILITY

website harus bisa digunakan oleh:

• keyboard-only users
• screen readers

Kontras Warna

gunakan kontras cukup

WCAG minimal 4.5:1

Fokus Keyboard

jangan hilangkan outline

outline: none;

bisa pakai

:focus {
  outline: 2px solid blue;
}

Gunakan :focus-visible

:focus-visible {
  outline: 3px solid red;
}

Gunakan unit relatif

font-size: 1rem;

biar bisa di zoom.

Jangan hanya warna sebagai indikator

❌ hanya merah untuk error ✅ tambah icon / teks

Gunakan HTML semantik

<button>Submit</button>

bukan:

<div>Submit</div>