Menata halaman kecil

Halaman toko roti dari kursus HTML mendapat warna, jarak, dan tata letaknya dari sekitar 40 baris CSS, dan HTML-nya sama sekali tidak berubah.

Mulai dari keputusan, bukan aturan

Sebelum menulis aturan, buat beberapa keputusan: satu warna aksen, warna teks dan latar dengan kontras cukup, satu tumpukan fon, ukuran dasar, dan langkah jarak yang berulang di mana-mana (misalnya 8, 16, dan 24 piksel). Halaman yang memakai ulang sedikit nilai terlihat tenang dan terencana; halaman yang setiap kotaknya punya margin sedikit berbeda terlihat berantakan, walaupun tak ada yang bisa menjelaskan sebabnya. CSS punya fitur yang dibuat untuk ini: custom property.

Custom property

Custom property adalah nama buatanmu sendiri, diawali dua tanda hubung, yang menyimpan sebuah nilai: --accent: #1a5fb4;. Tetapkan keputusanmu sekali di :root, yaitu elemen html, lalu pakai di mana saja dengan var(): background: var(--accent);. Custom property diwariskan seperti properti teks, jadi setiap elemen bisa membaca yang ditetapkan di akar. Mengubah warna aksen seluruh situs sekarang cukup dengan menyunting satu baris. Kamu juga bisa menetapkan ulang properti di dalam media query, misalnya untuk menukar warna saat prefers-color-scheme: dark.

:root {
  --accent: #1a5fb4;     /* 6.29:1 on white */
  --ink: #222;
  --paper: #fffdf8;
  --space: 16px;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
header { display: flex; justify-content: space-between; align-items: center;
         flex-wrap: wrap; gap: var(--space); padding: var(--space); }
nav ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); }
.cards { display: grid; gap: var(--space);
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { padding: var(--space); border: 1px solid #ddd; border-radius: 8px; }
img { max-width: 100%; height: auto; }
.btn { background: var(--accent); color: white; border: 0;
       padding: 8px var(--space); border-radius: 6px; font: inherit; }
.btn:hover { background: #154c90; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

Membaca stylesheet dari atas ke bawah

Stylesheet di atas memakai sesuatu dari hampir setiap unit. Akar menyimpan keputusan. body mengatur fon, tinggi baris, dan warna sekali saja, lalu pewarisan membawanya ke setiap paragraf. Kepala halaman adalah baris flex yang membungkus, jadi di ponsel sempit menu turun ke bawah nama alih-alih terjepit. main punya max-width dan margin: 0 auto, yang menjaga baris tetap enak dibaca dan menempatkan konten di tengah pada layar lebar. Kartu-kartu memakai pola grid auto-fill, jadi tertata ulang dari satu kolom ke beberapa kolom tanpa media query, dan gambarnya lentur. Tombol mendapat warna hover dan, sama pentingnya, outline fokus yang terlihat untuk pengguna keyboard.

Periksa di layar sungguhan

Menguji CSS berarti melihat. Buka halaman di jendela sempit (320 piksel untuk pemeriksaan reflow WCAG) dan di jendela lebar, lalu cari gulir ke samping dan teks yang menempel ke tepi. Perbesar sampai 200 persen. Tekan Tab menelusuri halaman dan pastikan kamu selalu bisa melihat letak fokus. Periksa kontras teks dan tombol di alat pengembang. Nyalakan pengaturan mode gelap atau pengurangan gerak di sistemmu jika kamu membuat gaya untuknya. Alat pengembang browser memungkinkanmu mengubah nilai apa pun secara langsung dan melihat model kotak elemen mana pun, cara tercepat untuk menjawab pertanyaan mengapa sesuatu berada di tempatnya.

Dari sini, potongan-potongan yang sama bisa diperbesar untuk situs apa pun. Proyek yang lebih besar memecah stylesheet menjadi beberapa file, menamai class berdasarkan komponennya (card, button, site header), dan menyimpan daftar pendek custom property bersama, tetapi aturan di baliknya adalah aturan dari sembilan unit ini.