# CSS Reset sederhana
CSS Reset adalah istilah untuk sekumpulan style CSS yang mengatur ulang style bawaan elemen HTML. Tujuan penggunaannya adalah agar tampilan web yang dibuat dapat tampil konsisten di berbagai peramban.
Salah satu CSS Reset yang cukup terkenal adalah milik [Eric Meyer](https://meyerweb.com/eric/tools/css/reset/) yang mengatur ulang *style* bawaan untuk hampir seluruh elemen HTML. Selain itu, ada juga [Normalize.css](https://necolas.github.io/normalize.css/) yang mengeklaim hanya mengatur ulang *style* pada elemen yang diperlukan.
Keduanya tentu masih bisa dipakai meskipun sudah lama sejak terakhir kali diperbarui. Namun, bagi saya yang sedang mempelajari CSS, menggunakan keduanya bukanlah opsi terbaik karena membuat saya tidak memahami seperti apa *style* bawaan dari tiap elemen, sehingga sulit untuk menetapkan *style* yang pas nantinya.
Karena alasan itu saya lebih memilih sebuah CSS Reset sederhana dan mengubah *style* suatu elemen hanya ketika saya memerlukannya. Beruntung, saya menemukan artikel berjudul [My Custom CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/) yang cukup mendekati apa yang saya inginkan.
Dengan sedikit perubahan, berikut adalah CSS Reset yang biasa saya gunakan:
``` css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--color-white: hsl(0, 0%, 100%);
}
html {
height: 100%;
}
body {
font-family: sans-serif;
height: 100%;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
}
img {
display: block;
max-width: 100%;
}
button, input, select, textarea {
font: inherit;
}
```
CSS Reset ini tidak banyak mengubah *style* bawaan, tapi cukup menyelesaikan beberapa masalah yang sering saya temui saat bekerja dengan tampilan. Berikut adalah penjelasan pada tiap *style*-nya:
## Dimensi elemen yang lebih mudah dikalkulasi
``` css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
```
Lebar dan tinggi elemen HTML secara bawaan dikalkulasi berdasarkan kontennya. Itu sebabnya elemen `` dengan *style* berikut akan memiliki lebar sebesar 224px alih-alih 200px.
``` css
p {
border: 2px solid red;
padding: 10px;
width: 200px;
}
```
Maka dari itu, penting bagi kita mengubah nilai bawaan *property* yang mengatur hal ini (yaitu `box-sizing`) dari `content-box` menjadi `border-box` agar dimensinya dikalkulasi berdasarkan batas tepinya. Dengan begitu, *style* di atas akan membuat elemen `
` memiliki lebar sebesar 200px dan lebar kontennya kini menyusut jadi 176px.
![Perbandingan box-sizing dengan nilai content-box dan border-box](https://cdn.hashnode.com/res/hashnode/image/upload/v1657071269078/5kOsgFxA_.png align="center")
*Style* ini menggunakan *Universal Selector* (`*`) agar bisa diterapkan di seluruh elemen HTML. Saya juga menghapus nilai `margin` dan `padding` bawaan agar mengatur jarak antara elemen nantinya bisa lebih presisi.
## Selector untuk menampung CSS Variables
``` css
:root {
--color-white: hsl(0, 0%, 100%);
}
```
*Selector* `:root` sebenarnya masih merujuk pada elemen ``. Namun, saya tetap pisahkan fungsinya dari *selector* `html` dan menjadikan `:root` sebagai tempat menampung apa yang disebut sebagai *CSS Variables*.
*CSS Variables* adalah fitur di mana kita bisa membuat *custom property* sendiri. Aturan penamaan *property* yang merupakan *CSS Variables* adalah dimulai dengan **dua tanda setrip** (`--`) agar membedakannya dari *property* asli CSS.
Contoh sederhana penggunaan fitur ini adalah kita dapat menyimpan nilai warna yang nantinya akan digunakan, seperti contoh di atas. Setelah dibuat, kita hanya perlu memanggilnya menggunakan fungsi `var()` ketika ingin digunakan, seperti contoh berikut:
```css
div {
background-color: var(--color-white);
}
article {
border: 2px solid var(--color-white);
}
h1 {
color: var(--color-white);
}
```
Penggunaan *CSS Variables* akan memudahkan kita dalam mengubah suatu *style* karena hanya perlu mengubah nilainya di `:root` dan perubahannya akan terjadi di seluruh elemen di mana *custom property*-nya digunakan.
## Membuat satuan persen dapat mengatur tinggi elemen
```css
html {
height: 100%;
}
body {
...
height: 100%;
...
}
```
Satuan persen (`%`) sulit mengatur tinggi dari elemen HTML karena secara bawaan tinggi elemen diatur berdasarkan konten di dalamnya. Jika kita ingin suatu elemen memiliki tinggi yang sesuai ukuran layarnya, maka bisa dipastikan tinggi elemen tersebut tetap hanya setinggi konten di dalamnya.
Karena itulah *style* ini penting untuk ditambahkan. Nantinya elemen yang tingginya ingin disesuaikan dengan ukuran layar hanya perlu menerapkan *property* `min-height`, seperti contoh berikut:
``` css
main {
background-color: cyan;
min-height: 100%;
}
```
`min-height` digunakan agar tinggi elemennya tetap adaptif jika konten di dalamnya lebih tinggi dari ukuran layarnya.
![Perbandingan tanpa style, menggunakan style, dan 'height' saja pada ](https://cdn.hashnode.com/res/hashnode/image/upload/v1657077128717/rzo-HRXcc.png align="center")
## Sesuaikan tipografi untuk meningkatkan keterbacaan
``` css
body {
font-family: sans-serif;
...
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
}
```
Menurut artikel berjudul [Picking the right font: Serif vs. sans serif](https://www.adobe.com/creativecloud/design/discover/serif-vs-sans-serif.html), *Sans-serif* adalah tipe fon yang tepat digunakan pada desain aplikasi dan web karena tingkat keterbacaan menjadi perhatian serius, terutama pada perangkat dengan ukuran layar yang kecil dan resolusi yang rendah.
Sementara itu, menurut [WCAG](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) jarak antara baris di dalam paragraf yang ideal setidaknya adalah 1,5 kali ukuran fonnya. Namun, ukuran tersebut juga akan membuat jarak antara baris pada *Headings* menjadi cukup besar sehingga kita perlu mengaturnya kembali ke nilai yang pas.
## Gambar seharusnya juga punya ruangnya sendiri
``` css
img {
display: block;
max-width: 100%;
}
```
Selain teks, media lain yang kemungkinan besar ada dalam sebuah web adalah gambar. Anehnya, *style* bawaan dari elemen `![]()
` membuat gambar seolah harus disisipkan di antara kata di dalam paragraf layaknya elemen `` dan ``.
Oleh karena itu, kita perlu mengubah nilai bawaan dari *property* `display` menjadi `block` agar gambar diperlakukan layaknya elemen `` dan `
` yang ditampilkan dalam baris baru. *Property* `max-width: 100%` juga perlu ditambahkan agar lebar gambar menyesuaikan dengan lebar elemen penampungnya.
## Tipografi pada elemen-elemen Form juga perlu disesuaikan
``` css
button, input, select, textarea {
font: inherit;
}
```
Tipografi pada elemen-elemen yang berkaitan dengan Form ternyata tidak terpengaruh dengan *style* yang sudah ditetapkan pada *selector* `body`. Untuk mengatasinya, kita perlu mengatur *style*-nya secara terpisah dengan menetapkan *shorthand property* `font: inherit` agar elemen-elemen tersebut mengikuti *style* tipografi yang sama seperti pada elemen lain di sekelilingnya.
---
Demikian penjelasan dari CSS Reset yang biasa saya gunakan. Saya sangat menyarankan kamu untuk membaca juga artikel *"My Custom CSS Reset"* yang menjadi sumber inspirasi dari CSS Reset ini.
Semoga bermanfaat.