Membuat situs yang bagus dengan CSS seminimal mungkin (2023)

(thecascade.dev)

6 poin oleh GN⁺ 2025-10-07 | 1 komentar | Bagikan ke WhatsApp

Banyak developer mengalami masalah yang tidak perlu akibat desain CSS yang berlebihan
Hanya dengan style global yang minimal, kita tetap bisa membuat halaman yang cukup rapi dan responsif
Masalah layout dasar bisa diselesaikan cukup dengan membatasi ukuran dan menampilkan elemen gambar, SVG, dan video sebagai blok
Keterbacaan bisa ditingkatkan dengan font system-ui, jarak antarbaris yang tepat, dan pembatasan lebar paragraf maksimum
Perlu menerapkan properti color-scheme agar preferensi lingkungan seperti dark mode dari OS dapat tercermin

Membuat situs yang bagus dengan CSS seminimal mungkin

Masalah CSS yang berlebihan dan pendekatan yang dipakai

Banyak orang membuat rancangan CSS yang terlalu rumit saat membangun website
Dengan CSS yang minimal sekalipun, kita tetap bisa membuat halaman responsif yang cukup rapi dan berpegang pada dasar

HTML dasar dan penanganan gambar

Hanya dengan menulis HTML dasar, sebuah situs sudah memberikan responsivitas dasar
Karena gambar dapat menimbulkan masalah overflow pada layout, terapkan CSS berikut
```
img {
  max-width: 100%;
  display: block;
}
```
Jika masalah serupa muncul pada elemen SVG dan video, bisa diperluas seperti berikut
```
img,
svg,
video {
  max-width: 100%;
  display: block;
}
```

Peningkatan tipografi

Font bawaan browser cenderung terasa kurang menarik dari sisi desain
Dengan memakai system-ui sebagai font family, kita bisa menerapkan typeface bawaan yang sesuai untuk tiap platform
Karena ukuran font dan jarak antarbaris default cenderung sedikit kecil, pengaturan berikut direkomendasikan
```
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}
```
Hanya dengan pengaturan ini saja, kita sudah bisa mendapatkan peningkatan yang besar dibanding nilai default browser

Dukungan dark mode

Karena banyak pengguna menyukai dark mode, menerapkan properti color-scheme yang mengikuti pengaturan OS sangat berguna
```
html {
  color-scheme: light dark;
}
```
Properti ini mengatur agar style user agent secara otomatis mencerminkan tema sistem yang dipilih
Ini juga bisa ditentukan lewat atribut pada tag HTML
```
<html lang="en" color-scheme="light dark"></html>
```
Selain mengikuti preferensi sistem, memberikan opsi agar pengguna dapat memilih color scheme secara langsung juga merupakan best practice yang baik

Pembatasan lebar konten

Panjang paragraf konten adalah elemen penting yang sangat memengaruhi keterbacaan
Secara umum, idealnya isi utama ditampilkan dalam 45–90 karakter per baris
Dengan membatasi lebar maksimum elemen main seperti di bawah, kita bisa meningkatkan keterbacaan paragraf
```
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```
Fungsi min() memilih nilai yang lebih kecil antara 70ch dan 100% - 4rem
margin-inline: auto membuat elemen rata tengah secara horizontal
Sesuai kebutuhan, alih-alih main, kita juga bisa memakai kelas .container atau .wrapper

Contoh CSS minimal akhir

Jika semua poin di atas digabungkan, set CSS minimal berikut sudah cukup untuk membangun situs yang stabil

html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

Penutup dan skalabilitas

Contoh di atas bisa langsung dipakai sebagai titik awal yang ringan atau untuk halaman kecil
Dalam kebanyakan kasus, lebih baik memperluasnya dengan menambahkan style tambahan di atas fondasi ini

1 komentar

GN⁺ 2025-10-07

Opini Hacker News

Artikel lama, tetapi ini adalah tulisan yang masih relevan di beberapa wilayah yang merangkum alasan mengapa system ui font family tetap tidak direkomendasikan
https://infinnie.github.io/blog/2017/systemui.html
- Isinya menarik, tetapi ligatur st pada font-nya terlalu tidak enak dilihat, jadi saya tidak ingin menerima saran font dari situs itu
Sejujurnya saya kurang paham. Saya mengerti ingin membuat halaman web minimalis yang mudah dibaca. Tetapi bukankah cara-cara yang dibutuhkan untuk itu sudah cukup dikenal? Saya penasaran siapa pengguna sasaran yang sampai kesulitan dengan hal seperti ini. Saya juga heran kenapa topik ini populer di HN
- Saya. Saya kebanyakan adalah pengembang backend, dan kadang membuat frontend untuk side project, tetapi hampir tidak tahu CSS. Bagi saya, cara-cara seperti ini bukan sesuatu yang "sudah dikenal". Saya selalu kesulitan karena tidak paham CSS
- Orang yang kesulitan hanya dengan satu max-width? Sasaran artikelnya adalah semua orang yang membuat homepage pribadi

font-family: System UI;

Ini salah. Sintaks yang benar adalah

font-family: system-ui;

Penulis artikel menulisnya dengan benar di beberapa contoh, tetapi salah pada contoh pertama sehingga bisa membingungkan

Saya penasaran, kalau nama font terdiri dari dua kata apakah harus dibungkus tanda kutip ganda. Misalnya

font-family: Times New Roman;

seperti ini. Melihat 'times' maupun 'Times New Roman' sama-sama berjalan tanpa kutip, saya bertanya-tanya apakah itu pengecualian karena font lama, atau CSS memang cukup longgar dalam pencocokan nama

https://meyerweb.com/eric/tools/css/reset/
Ini, saya ingin menyebutnya sekadar cachet money
- Eric Meyer adalah legenda di dunia CSS. Pada 2002, saat saya tidak paham box model, penjelasannya yang membuat saya mengerti
  https://meyerweb.com/eric/books/
- Saya sering melihat ini, tetapi entah kenapa terasa agak aneh di mata saya. Tidak cukup sederhana, juga tidak terasa modern/minimalis. Tulisannya sendiri pun rasanya kurang mudah dibaca. Mungkin ini hanya soal selera saya
- Stylesheet CSS reset adalah titik awal polusi styling. Pendekatan ala Kevin Powell—menghormati style bawaan browser—lebih baik. Pengujian lintas browser memang tetap perlu, tetapi selama hampir 20 tahun CSS reset terus dianggap default, lalu di atasnya masih ditumpuk framework sehingga yang bertambah hanya kompleksitas. Sekarang, dengan CSS Grid modern, variables, dan lain-lain, kita sudah bisa keluar dari cara lama dan bereksperimen jauh lebih kreatif. Dulu saya membenci CSS karena penuh trik dan akal-akalan, tetapi sekarang rasanya seperti merakit Lego yang pas. CSS reset kini bukan lagi kebutuhan mutlak, melainkan alat bantu untuk melepas rasa takut. CSS pre-processor juga sekarang sudah tidak terlalu diperlukan
Ini pertanyaan rekomendasi SSG (static site generator) untuk situs minimalis akademik. Opsinya Astro atau Hugo, tetapi Astro terasa terlalu rumit, sementara menulis html/css sendiri terasa tidak nyaman untuk layout dan kustomisasi. Tema Astro untuk blog pribadi juga kurang cocok; kebanyakan ditujukan untuk perusahaan atau terlalu ramai. Saat memikirkan hal ini, saya kembali heran kenapa merancang situs web jadi sesulit ini. Dengan framework, komponen, dan begitu banyak dependensi, saya penasaran bagaimana para pengembang web bisa terus mengikuti arus ini
- Saya merekomendasikan Eleventy(https://11ty.dev/) atau Zola(https://getzola.org/). Keduanya adalah alat yang relatif baru dan punya banyak pengguna yang kompeten
- Ini adalah kompleksitas alami sistem web. Kesederhanaan tidak bisa dipertahankan. Meski begitu, saya tetap bersyukur atas standar terbuka dan framework yang bisa digunakan tanpa lisensi. Pilihannya terlalu banyak sampai memicu kebingungan memilih
- Diskusi seperti ini sendiri menutupi rasa memalukan dari keadaan web modern. Selain layanan web besar seperti Facebook, hampir tidak ada yang benar-benar bernilai, dan itu memalukan
- Mungkin Anda tidak butuh pilihan tambahan, tetapi franklin.jl terasa pas dari sisi matematika, penanganan kode inline, dan kebersihan
Situs web ini sendiri menggunakan CSS jauh lebih banyak daripada yang disarankan artikel, kira-kira lebih dari 300 baris. Meski begitu, tetap lumayan sebagai titik awal
- Terima kasih sudah mengecek fakta ini di mobile. Fakta ini membuat kepercayaan saya pada media tersebut menurun. Nanti saya akan cek sendiri. Meski begitu, saya harap teknik yang diperkenalkan memang diterapkan dengan baik
Saat melihat saran "batasi lebar konten demi keterbacaan", saya berharap ini tidak dilakukan. Apa pun kata riset usability, saya lebih suka lebar yang luas. Lebar konten bisa dikontrol hanya dengan mengubah ukuran browser
- Jika ukuran browser diubah, seluruh jendela ikut mengecil, sehingga justru makin merepotkan. Misalnya, untuk memindahkan teks 80 kolom yang menempel di sisi kiri ke tengah, kita harus terus mengubah ukuran browser, dan itu sangat merepotkan. Kadang saking tidak nyamannya saya sampai menimpa stylesheet situs sendiri. Ada kalanya saya merasa lebih baik melihat teks biasa saja. Atau beralih ke reader mode untuk membaca
- Hampir semua kenalan saya, baik orang tech maupun bukan, selalu membuka banyak tab. Probabilitas setiap tab itu hanya berisi satu baris teks adalah 0%. Rasanya malah lebih enak mencetaknya dengan printer dot matrix daripada harus mengatur ukuran jendela terus-menerus. Sedikit hiperbola, tentu saja
- Untuk konten berbentuk prosa, lebar yang dibatasi memang lebih disukai. Menggerakkan mata sampai ke ujung layar lebar untuk membaca itu melelahkan
- Fakta bahwa komentar ini mendapat vote terbanyak menunjukkan bahwa saran di HN tidak perlu ditanggapi terlalu serius
- Membatasi lebar konten itu sendiri tidak masalah. Tetapi saya tidak suka penyalahgunaan content-width, font besar, dan line-height besar. Banyak situs sekarang memakai font terlalu besar dan jarak antarbaris terlalu lebar sehingga perlu banyak sekali scrolling. Ukuran font bawaan browser sudah pas dengan sistem, jadi sebaiknya ukuran font dibiarkan saja dan serahkan penyesuaiannya pada zoom
Bahkan tanpa membaca artikelnya pun, jawabannya jelas. Jawabannya adalah '0'
- Style default, terutama penanganan gambar, sangat tidak nyaman di mobile. Seperti yang dikatakan artikel, kalau yang diinginkan adalah sesuatu yang "cukup enak dilihat", saya rasa default saja tidak cukup
- Default browser adalah serif
Dengan CSS reset, penyelarasan dasar tetap masih dibutuhkan sampai batas tertentu. Jika hanya menargetkan browser dalam 5 tahun terakhir, cukup gunakan reset populer yang ringkas dan sudah dirapikan
- Intinya bukan keseragaman style, melainkan baseline yang mudah dibaca. Walaupun tampilannya berbeda di berbagai platform/browser, selama mudah dibaca itu sudah cukup. Lebih praktis fokus pada usability dasar ketimbang kesempurnaan estetika
- Reset terlalu dibesar-besarkan. Untuk kasus minimalis seperti blog pribadi, sedikit perbedaan style antarplatform bukan masalah besar. Ini muncul dari naluri desainer yang secara obsesif ingin menyamakan semuanya

img { max-width: 100%; }
Pengaturan ini wajib dipakai bersama height: auto. Kalau tidak, proporsi gambar akan rusak
img, svg, video { max-width: 100%; }
Di Chrome 141, perhitungan auto jadi salah karena masalah width/height pada elemen SVG bertingkat. Untuk sementara perlu ditangani dengan
svg:where(:not(svg svg))
Font system-ui bukan sekadar pengganti sederhana untuk sans-serif. Jika font UI sistem dipakai untuk isi utama konten, pada beberapa kombinasi OS/bahasa hasilnya bisa sangat tidak nyaman sampai nyaris sulit dibaca. Kalau butuh sans-serif, gunakan saja sans-serif
Ukuran font default sedikit kecil, jadi sekitar 18~20px (1.25rem) terasa pas. Tetapi pada layar kecil, sebaiknya jangan lebih dari 1rem
line-height default biasanya direkomendasikan di 1.5~1.7, tetapi 1.7 terlalu renggang di layar kecil. 1.4~1.5 lebih pas, dan bisa disesuaikan menjadi 1.4~1.6 tergantung ukuran layar
font-family: System UI;
Ini adalah kesalahan sintaks yang jelas. Jika stylesheet ditinjau, hal ini akan langsung terlihat
Memisahkan tema sistem gelap/terang dan tema web adalah ide yang bagus. Firefox secara default disetel agar konten mengikuti tema sistem, dan itu juga bisa diubah terpisah
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
Ini berarti margin minimal sekitar 2rem (jika ditambah body margin default, menjadi 2rem+8px). Margin-nya terlalu besar, dan lokasi penerapannya juga terasa janggal. Jika ingin menerapkannya ke main, lebih logis menggunakan padding seperti

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

Tetapi dalam praktiknya, header atau footer juga butuh margin sisi yang sama, jadi lebih baik menyesuaikan margin body

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

Dengan begitu margin bisa dikurangi dari sekitar ~40px menjadi 16px

Secara realistis, sebagian besar penyesuaian layout dan fine-tuning bisa diselesaikan dengan media query. Dalam kasus ini, pada akhirnya jumlah kodenya juga tidak jauh lebih banyak dibanding CSS biasa yang ditulis dengan baik

Membuat situs yang bagus dengan CSS seminimal mungkin (2023)