Prioritas dan Spesifikasi CSS Biar Gaya Kamu Gak Berantakan
Halo, sobat ngoding! Pernah nggak sih, kamu udah kasih style di CSS tapi elemen di website tetap nggak berubah? Atau malah styling kamu bentrok gara-gara ada beberapa aturan yang saling tabrakan? Nah, itu semua ada hubungannya sama prioritas dan spesifikasi CSS.
Artikel ini bakal ngebahas rahasia di balik prioritas dan spesifikasi di CSS supaya gaya kamu nggak berantakan lagi. Yuk, kita kupas tuntas dengan gaya santai, tapi tetap mendalam!
1. Apa Itu Prioritas CSS?
Prioritas CSS itu kayak urutan siapa yang “lebih berhak” ketika ada dua atau lebih aturan CSS yang berlaku pada elemen yang sama. Semakin tinggi prioritasnya, semakin besar kemungkinan aturan itu dipakai.
Misalnya:
p {
color: red;
}
p {
color: blue;
}
Dalam kasus ini, teks <p>
bakal berwarna biru karena aturan terakhir yang ditulis akan menimpa aturan sebelumnya. Ini dikenal sebagai rule order, alias aturan urutan.
2. Apa Itu Spesifikasi CSS?
Spesifikasi CSS itu kayak "level otoritas" dari selector yang kamu pakai. Semakin spesifik selector-nya, semakin besar kekuatannya untuk mengalahkan aturan lain.
CSS punya sistem skor spesifikasi buat menentukan siapa yang menang. Skor ini dihitung berdasarkan jenis selector yang kamu gunakan:
- Inline style: Skor tertinggi (1000 poin).
- ID selector (
#
): 100 poin per ID. - Class selector (
.
), attribute selector ([attr]
), dan pseudo-classes (:hover
): 10 poin per elemen. - Type selector (tag name) dan pseudo-elements (
::before
,::after
): 1 poin per elemen.
Semakin tinggi total poinnya, semakin besar kemungkinan aturan itu dipakai.
Contoh perbandingan:
/* Skor: 1 */
p {
color: red;
}
/* Skor: 10 */
.class {
color: blue;
}
/* Skor: 100 */
#id {
color: green;
}
Dalam kasus ini, elemen dengan ID bakal selalu menang karena punya skor spesifikasi tertinggi.
3. Bagaimana Cara Prioritas dan Spesifikasi Bekerja?
a. Urutan Aturan CSS
Urutan penulisan CSS mempengaruhi prioritas. Aturan yang ditulis terakhir bakal menang kalau spesifikasinya sama.
Contoh:
h1 {
color: red;
}
h1 {
color: blue;
}
Teks <h1>
akan berwarna biru karena aturan kedua ditulis setelah aturan pertama.
b. Spesifikasi Lebih Kuat Daripada Urutan
Kalau spesifikasi berbeda, aturan dengan spesifikasi lebih tinggi bakal menang, meskipun ditulis lebih awal.
Contoh:
p {
color: red;
}
.class {
color: blue;
}
#id {
color: green;
}
Kalau ada elemen <p>
dengan class dan ID, aturan ID akan menang, meskipun ditulis paling awal.
HTML:
<p id="id" class="class">Teks ini hijau</p>
c. Inline Style Paling Tinggi
Aturan CSS yang ditulis langsung di elemen HTML (inline style) bakal selalu menang, bahkan melawan ID.
Contoh:
<p id="id" style="color: orange;">Teks ini oranye</p>
4. Cara Menghindari Bentrok CSS
a. Gunakan Selector yang Spesifik
Kalau ada banyak elemen di halaman, pakai selector yang lebih spesifik supaya styling kamu nggak ketimpa aturan lain.
Contoh:
div p {
color: blue;
}
Hanya <p>
di dalam <div>
yang bakal biru, jadi lebih aman.
b. Hindari Penggunaan ID untuk Styling
ID punya spesifikasi yang sangat tinggi. Kalau kamu sering pakai ID buat styling, kode CSS kamu bisa sulit dikelola. Sebaiknya gunakan class untuk styling.
c. Manfaatkan !important
dengan Bijak
!important
adalah kartu truf di CSS. Kalau kamu tambahin ini, aturannya bakal menang dari semua prioritas.
Contoh:
p {
color: red !important;
}
.class {
color: blue;
}
Teks <p>
bakal merah meskipun ada aturan lain. Tapi hati-hati, terlalu banyak pakai !important
bisa bikin kode kamu susah di-debug.
5. Studi Kasus: Styling Button dengan Spesifikasi
HTML:
<button class="btn primary" id="submit">Submit</button>
CSS:
button {
background-color: gray; /* Skor: 1 */
}
.btn {
background-color: blue; /* Skor: 10 */
}
.primary {
background-color: green; /* Skor: 10 */
}
#submit {
background-color: red; /* Skor: 100 */
}
button.primary {
background-color: yellow; /* Skor: 11 */
}
Hasilnya:
- Background button akan kuning, karena kombinasi
button.primary
(skor 11) mengalahkan aturan lainnya.
6. Tips Biar CSS Kamu Tetap Rapi
- Atur Urutan dengan Bijak
Pastikan aturan yang umum ditulis di awal, dan yang spesifik di akhir. - Gunakan Konvensi Penamaan
Pakai class dengan nama yang jelas, sepertibtn-primary
, bukanbiru
. - Cek dengan Developer Tools
Gunakan inspect element di browser untuk melihat aturan mana yang berlaku.
7. Kesimpulan
Prioritas dan spesifikasi CSS itu penting banget buat bikin styling kamu nggak kacau. Dengan memahami cara kerja skor spesifikasi, kamu bisa bikin kode yang lebih efisien dan bebas konflik. Ingat, jangan terlalu sering pakai !important
, dan gunakan ID dengan bijak.
Sekarang, kamu udah punya senjata buat bikin CSS yang rapi dan kece! Kalau masih bingung, tulis aja pertanyaanmu di kolom komentar. Semangat ngoding, ya!