Jujur, saya minder posting kayak gini, seolah udah expert aja, padahal masih level beginner. Biar ga salah sangka sama para Master ni ye, ane bikin artikel kayak gini sebagai dokumentasi pembelajaran bagi saya sendiri. Jadi saya ga perlu cari situs sana sini, cukup baca di blog saya ini aja.
Pengalaman saya selama mengedit CSS template, saya suka bingung sekaligus kagum dengan susunan tag demi tag di CSS. Kode div dan id tersusun bertumpuk, tapi hasilnya wow, mengagumkan, indah dipandang mata. Gimana ya cara kerjanya?
Hari ini kita akan coba bikin tulisan tentang gimana cara kerja Class dan ID saat ditumpuk untuk menghasilkan tampilan yang keren.
Struktur Dasar (The Skeleton)
Kita coba bikin contoh tampilan kotak, dengan konten didalamnya. Bayangkan kita mau buat sebuah box menu. Kita nggak cuma butuh satu lapis, tapi empat lapis agar kita punya kontrol penuh atas jarak dan desainnya. Strukturnya seperti ini:<div id='difan96'>
<div id='xwapper-box'>
<div class='difan-container'>
<div class='menu'>
XWAPPER.BLOGSPOT.COM
<span>Acakadul</span>
</div>
</div>
</div>
</div>Berikut penjelasannya.
Memahami Peran Masing-Masing Lapis
Lapis 1 (#difan96): Ini adalah Pondasi. Tugasnya cuma mengatur posisi. Mau ditaruh di tengah? Mau lebar berapa? Atur di sini.Lapis 2 (#xwapper-box): Ini adalah Kulit Luar. Di sini tempat kita mainkan seni. Kasih warna background, lengkungan pojok (border-radius), dan bayangan (box-shadow).
Lapis 3 (.difan-container): Ini adalah Ruang Napas. Fokus utamanya adalah padding. Lapisan ini memastikan konten di dalamnya nggak sesak atau nempel ke pinggir bingkai.
Lapis 4 (.menu): Ini adalah Isi Konten. Di sini kita atur gaya teks, warna font, dan ukuran hurufnya.
Memahami "Hierarchy of Style" (Kekuatan Hirarki)
Dalam teknik tumpukan ini, kita menggunakan hukum Kekuatan Spesifikasi. Kenapa kita mencampur ID dan Class?ID (#) sebagai Anchor (Jangkar): ID memiliki bobot paling berat. Kita menggunakannya di lapisan luar (#difan96 dan #xwapper-box) karena kita ingin memastikan bahwa aturan posisi dan bingkai utama tidak bisa diganggu gugat oleh kode CSS lain yang mungkin ada di template blogmu.
Class (.) sebagai Utility (Kegunaan): Class lebih ringan dan fleksibel. Kita memakainya di lapisan dalam (.difan-container dan .menu) agar jika suatu saat kamu ingin membuat widget serupa di bagian lain, kamu tinggal memanggil Class yang sama tanpa perlu menulis ulang kodenya dari nol.
Mengapa Harus Berlapis? (The Power of Isolation)
Salah satu alasan teknis terpenting dalam penggunaan banyak div adalah Isolasi Properti. Dalam CSS, ada beberapa properti yang jika digabung dalam satu kotak seringkali berantem.- Isolasi Border vs Padding
- Jika kamu menyatukan `border` tebal dan `padding` besar dalam satu elemen, kalkulasi lebar kotak seringkali meleset. Dengan membaginya (Lapis 2 untuk Border, Lapis 3 untuk Padding), kamu memberikan "ruang kosong" yang murni. Ini menjamin isi konten tidak akan pernah menabrak garis tepi.
- Isolasi Background vs Content: Dengan adanya .difan-container, kamu bisa memberikan warna latar belakang atau gradasi yang berbeda di setiap lapis. Ini menciptakan efek kedalaman (3D). Misalnya, Lapis 2 berwarna gelap, tapi Lapis 3 diberi warna sedikit lebih terang. Hasilnya? Widget kamu terlihat menonjol dan premium.
- Efek "Overflow Hidden" yang Sempurna. Inilah rahasia sudut melengkung yang rapi. Ketika kamu memberikan `border-radius` di #xwapper-box dan menambah perintah overflow: hidden, maka lapisan-lapisan di dalamnya (.difan-container dan .menu) akan terpotong secara otomatis mengikuti lengkungan tersebut. Tanpa tumpukan ini, seringkali warna background dari konten terdalam akan bocor keluar di sudut-sudut kotak yang melengkung.
Tips Mengatur Tumpukan (Workflow)
Untuk menghasilkan tampilan yang konsisten, selalu gunakan urutan kerja "Outside-In" (Dari Luar ke Dalam):- Gunakan ID terluar untuk menentukan seberapa luas widget ini akan tampil di halaman.
- Gunakan ID kedua untuk menentukan warna, garis, dan bayangan.
- Beri Jarak Aman. Gunakan Class kontainer untuk memastikan kenyamanan mata pembaca.
- Sentuhan Akhir. Gunakan Class terdalam untuk mempercantik tulisan atau link di dalamnya.
Posting Komentar