SvelteKit menyediakan cara styling yang sederhana tetapi fleksibel. Untuk kebutuhan sehari-hari, Anda biasanya akan memakai tiga pola utama: CSS lokal di dalam komponen, CSS global untuk aturan bersama, dan folder static untuk aset seperti gambar, ikon, atau favicon. Jika dipahami sejak awal, tiga hal ini sudah cukup untuk membangun UI sederhana yang rapi tanpa konfigurasi tambahan yang rumit.
Di artikel ini, kita akan membuat halaman sederhana yang menampilkan judul, deskripsi, kartu konten, dan gambar dari folder static. Kita juga akan melihat kapan style sebaiknya dibuat lokal, kapan dipindahkan ke global, dan kapan perlu menyentuh file app.html.
Struktur styling di SvelteKit secara ringkas
Dalam proyek SvelteKit, pendekatan styling yang paling umum adalah:
- Scoped style di komponen: ditulis langsung dalam file
.sveltelewat tag<style>. Style ini hanya berlaku untuk komponen tersebut. - Global style: dipakai untuk reset CSS, font, warna dasar, aturan body, link, heading, dan utility bersama.
- File static: aset yang perlu diakses langsung melalui URL, misalnya
/favicon.pngatau/images/hero.jpg.
Secara praktik, gunakan style lokal untuk tampilan yang spesifik pada satu komponen, dan gunakan style global untuk aturan yang memang harus konsisten di seluruh aplikasi.
Membuat halaman sederhana dengan style lokal
Misalkan kita punya halaman utama di src/routes/+page.svelte. Di file ini, kita akan menulis markup dan style lokal sekaligus.
<script>
const features = [
'CSS lokal untuk komponen',
'Global style untuk tampilan dasar',
'Gambar dari folder static'
];
</script>
<svelte:head>
<title>Demo Styling SvelteKit</title>
<meta name="description" content="Contoh styling dasar di SvelteKit" />
</svelte:head>
<section class="hero">
<img src="/images/sveltekit-cover.png" alt="Cover SvelteKit" class="hero-image" />
<div class="content">
<span class="badge">SvelteKit Styling</span>
<h1>Belajar CSS Lokal dan Global</h1>
<p>
Halaman ini menampilkan contoh style yang langsung terlihat di browser
tanpa setup tambahan.
</p>
<ul class="feature-list">
{#each features as feature}
<li>{feature}</li>
{/each}
</ul>
</div>
</section>
<style>
.hero {
max-width: 960px;
margin: 2rem auto;
padding: 1.5rem;
display: grid;
grid-template-columns: 320px 1fr;
gap: 1.5rem;
align-items: center;
background: white;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.hero-image {
width: 100%;
display: block;
border-radius: 12px;
object-fit: cover;
}
.badge {
display: inline-block;
padding: 0.4rem 0.75rem;
border-radius: 999px;
background: #eef2ff;
color: #3730a3;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
h1 {
font-size: 2rem;
line-height: 1.2;
margin: 0 0 0.75rem;
}
p {
color: #475569;
margin-bottom: 1rem;
}
.feature-list {
padding-left: 1.25rem;
color: #0f172a;
}
.feature-list li {
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
}
}
</style>Hal penting dari contoh di atas adalah tag <style> di dalam file .svelte bersifat scoped. Artinya, selector seperti .hero, h1, atau p hanya menarget elemen di komponen ini, bukan seluruh aplikasi.
Kenapa ini berguna? Karena Anda bisa menulis CSS yang lebih aman dari konflik nama selector. Misalnya, menulis h1 di komponen ini tidak akan otomatis mengubah h1 di halaman lain. Svelte akan menambahkan mekanisme scoping saat proses build.
Kapan style lokal lebih tepat?
- Saat style hanya dipakai satu komponen.
- Saat Anda ingin menghindari konflik selector.
- Saat komponen ingin mudah dipindah atau dipakai ulang tanpa bergantung pada file CSS global.
Untuk komponen kecil hingga menengah, style lokal biasanya adalah pilihan paling praktis.
Mengatur global style untuk tampilan dasar aplikasi
Meskipun scoped style sangat nyaman, hampir semua aplikasi tetap membutuhkan global stylesheet. Contohnya untuk:
- Reset margin/padding bawaan browser.
- Font keluarga utama.
- Warna latar halaman.
- Gaya dasar untuk
body,a,button, dan heading. - CSS variables seperti palet warna dan spacing.
Buat file misalnya di src/app.css:
:root {
--bg: #f8fafc;
--surface: #ffffff;
--text: #0f172a;
--muted: #475569;
--primary: #7c3aed;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Inter, Arial, sans-serif;
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
color: var(--text);
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
}
main {
padding: 1rem;
}Lalu impor file ini pada layout utama, biasanya di src/routes/+layout.svelte:
<script>
import '../app.css';
</script>
<slot />Dengan pendekatan ini, semua halaman akan menerima style dasar yang sama. Ini lebih baik daripada menyalin aturan CSS umum ke setiap komponen.
Pembagian tanggung jawab yang disarankan
Agar styling mudah dirawat, gunakan pembagian seperti ini:
- Global CSS: reset, typography dasar, warna tema, utility umum, aturan layout global.
- Local CSS: tampilan komponen, state visual komponen, variasi card, section, banner, dan elemen spesifik halaman.
Kesalahan yang cukup sering terjadi adalah memasukkan terlalu banyak selector global, misalnya menulis aturan untuk semua div, section, atau p tanpa alasan kuat. Akibatnya, komponen sulit diprediksi dan style mudah saling menimpa.
Menggunakan folder static untuk gambar, ikon, dan favicon
SvelteKit memiliki folder static untuk file yang perlu disajikan apa adanya. Semua file di dalam folder ini akan tersedia dari root URL aplikasi.
Contoh struktur:
static/
├── favicon.png
└── images/
└── sveltekit-cover.pngJika file berada di static/images/sveltekit-cover.png, maka Anda bisa memanggilnya dari HTML atau komponen dengan URL:
<img src="/images/sveltekit-cover.png" alt="Cover SvelteKit" />Jika favicon berada di static/favicon.png, Anda bisa memasangnya melalui app.html atau lewat head pada halaman/layout.
Kapan memakai folder static?
- Untuk favicon, logo, gambar umum, file manifest, robots.txt, atau aset publik lain.
- Untuk file yang ingin diakses langsung lewat path URL yang stabil.
- Untuk aset yang tidak perlu diproses khusus oleh bundler.
Keuntungan utamanya adalah sederhana dan mudah dipahami. Anda tahu persis bahwa file static/foo.png akan tersedia di /foo.png.
Peran app.html dan kapan perlu menggunakannya
File app.html adalah template HTML dasar yang dipakai SvelteKit untuk me-render aplikasi. Dalam banyak kasus, Anda tidak perlu sering mengubah file ini. Namun, file ini tetap berguna untuk hal-hal yang memang bersifat global pada level dokumen HTML.
Contohnya menambahkan favicon default:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>Anda juga bisa mengatur atribut global seperti lang pada tag <html>. Jika aplikasi Anda berbahasa Indonesia, lebih tepat menggunakan lang="id".
Gunakan
app.htmluntuk kebutuhan level dokumen, bukan untuk layout visual halaman. Untuk layout aplikasi, tetap lebih tepat memakai+layout.svelte.
Contoh gabungan: halaman sederhana dengan local dan global style
Berikut contoh minimal yang hasilnya langsung terlihat di browser. Misalnya kita ingin latar halaman diatur global, lalu card utama diatur lokal.
File global: src/app.css
:root {
--bg: #f1f5f9;
--card: #ffffff;
--text: #0f172a;
--muted: #64748b;
--accent: #2563eb;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: var(--bg);
color: var(--text);
}
main {
padding: 24px;
}File layout: src/routes/+layout.svelte
<script>
import '../app.css';
</script>
<main>
<slot />
</main>File halaman: src/routes/+page.svelte
<section class="card">
<img src="/images/sveltekit-cover.png" alt="SvelteKit" />
<h1>Styling Dasar di SvelteKit</h1>
<p>
Contoh ini memakai background global dari app.css dan card lokal dari
komponen halaman.
</p>
<a href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
Buka dokumentasi
</a>
</section>
<style>
.card {
max-width: 720px;
margin: 40px auto;
padding: 24px;
background: var(--card);
border-radius: 16px;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
text-align: center;
}
img {
width: 100%;
max-height: 280px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 16px;
}
h1 {
margin-bottom: 12px;
}
p {
color: var(--muted);
margin-bottom: 20px;
}
a {
display: inline-block;
padding: 10px 16px;
background: var(--accent);
color: white;
border-radius: 10px;
font-weight: 600;
}
</style>Pola ini mudah dipahami: halaman tetap konsisten karena warna dasar, spacing utama, dan font datang dari CSS global, sementara tampilan card tetap terisolasi di komponen halaman.
Kesalahan umum dan tips debugging
1. Salah menaruh file aset
Jika gambar tidak muncul, pastikan file benar-benar ada di folder static dan URL-nya diawali slash, misalnya /images/sveltekit-cover.png. Jangan menulis path filesystem seperti static/images/... di atribut src.
2. Mengira semua CSS otomatis global
CSS dalam tag <style> pada komponen Svelte bersifat scoped. Jika Anda berharap aturan tersebut memengaruhi seluruh aplikasi, pindahkan ke file CSS global.
3. Terlalu banyak selector global
Kalau style terasa sulit dikendalikan, cek file global Anda. Selector yang terlalu luas sering menjadi sumber bug visual. Lebih aman memakai class yang jelas daripada menarget semua elemen HTML tanpa konteks.
4. Favicon tidak berubah
Browser sering menyimpan favicon di cache. Jika file baru tidak terlihat, lakukan hard refresh atau ubah nama file favicon sementara, misalnya dari favicon.png menjadi favicon-v2.png.
5. Variabel CSS tidak terbaca
Kalau Anda memakai var(--accent) di komponen tetapi warnanya tidak muncul, pastikan variabel itu memang didefinisikan di global CSS atau di parent yang relevan.
Kapan memilih lokal, global, atau app.html?
- Pilih local style jika style hanya milik satu komponen atau satu halaman.
- Pilih global CSS jika aturan harus konsisten di banyak halaman, seperti font, warna dasar, dan reset.
- Gunakan app.html untuk kebutuhan level dokumen HTML, seperti favicon default,
lang, atau metadata dasar yang tidak bergantung pada komponen. - Gunakan static untuk file publik yang harus diakses langsung lewat URL.
Penutup
Untuk styling dasar di SvelteKit, Anda tidak perlu memulai dari setup yang rumit. Cukup pahami tiga fondasi ini: scoped CSS di komponen untuk isolasi style, global CSS untuk aturan bersama, dan folder static untuk aset publik seperti gambar dan favicon. Bila perlu, app.html bisa dipakai untuk pengaturan pada level dokumen.
Jika Anda baru memulai, pola yang paling aman adalah: simpan style tampilan komponen di file .svelte, buat satu file global untuk aturan dasar aplikasi, lalu letakkan aset publik di static. Dengan pola sederhana ini, hasilnya cepat terlihat di browser dan struktur proyek tetap mudah dirawat saat aplikasi mulai bertambah besar.
Komentar
0 komentar
Masuk ke akun kamu untuk ikut berkomentar.
Belum ada komentar
Jadilah yang pertama ikut berdiskusi!