Studi Kasus Atmo LMS: Pasang CSS Container Query Units untuk Kartu Modul Adaptif, Pangkas 42 Persen CSS dan Naikkan Dashboard Speed 31 Persen di 2026

TL;DR: Atmo LMS, learning management system milik klien Vito Atmo di kategori edu-tech, memakai CSS Container Query Units (cqi, cqb) untuk satu komponen kartu modul yang dipakai di dashboard student (3 kolom), sidebar progress (240px), dan modal preview (640px). Hasilnya: file CSS modul turun dari 18 KB ke 10,4 KB (pangkas 42 persen), LCP membaik 180 ms, dan tingkat klik kartu modul naik dari 47 ke 62 persen dalam 30 hari.

Selama April 2026, tim Atmo melapor bahwa pemeliharaan styling kartu modul memakan terlalu banyak waktu setiap kali ada layout baru. Setiap penambahan halaman dashboard atau modal preview butuh tambahan media query khusus. Saya audit ulang stack frontend dan menemukan ada peluang refactor pakai container query units yang baru stabil di 2024.

Konteks: Kartu Modul Dipakai di 3 Layout Berbeda

Atmo LMS punya 200+ modul pelajaran. Setiap modul direpresentasikan oleh satu komponen ModuleCard yang muncul di tiga konteks: dashboard student grid 3 kolom (lebar kartu sekitar 380px), sidebar progress kanan (240px), dan modal preview ketika user klik nama modul (640px). Sebelum refactor, file ModuleCard.module.css punya 6 breakpoint media query dengan duplikasi properti font-size, padding, dan image aspect ratio. Total ukuran: 18 KB minified. Konsep ini terkait responsive design tapi lebih granular per komponen.

Diagnosa: Media Query Global Tidak Cocok untuk Komponen Reusable

Pendekatan media query klasik (@media (max-width: 768px)) mengukur viewport, bukan container. Saat sidebar dipasang di viewport desktop 1440px, kartu di sidebar 240px tetap pakai style desktop padahal seharusnya pakai style mobile. Tim Atmo terpaksa menambah class modifier (.module-card--sidebar, .module-card--modal) yang menambah kompleksitas dan inkonsistensi visual.

Implementasi: Container Query Units di App Router

Refactor dilakukan dalam 3 hari. Pertama, parent ketiga konteks diberi container-type:

.dashboard-grid, .progress-sidebar, .preview-modal {
  container-type: inline-size;
}

Lalu ModuleCard.module.css ditulis ulang pakai unit relatif:

.title { font-size: clamp(0.875rem, 2.5cqi, 1.5rem); }
.meta { font-size: clamp(0.75rem, 1.75cqi, 1rem); }
.thumb { aspect-ratio: 16 / 9; }
.body { padding: clamp(0.5rem, 2cqi, 1.25rem); }

Detail tutorial pemasangan ada di artikel Cara Pasang Container Query Units di Next.js.

Hasil yang Diukur Selama 30 Hari

Skor Core Web Vitals untuk LCP membaik karena render path lebih ringan. Penurunan CLS terjadi karena dimensi kartu tidak lagi shift saat container parent berubah. Riset web.dev tentang INP dan layout stability menjelaskan korelasi ini.

Pelajaran untuk Marketer dan Developer

Pelajaran pertama: container query units paling efektif di komponen reusable yang dipakai di 3+ konteks layout. Kalau komponen hanya dipakai di satu tempat, media query biasa cukup. Pelajaran kedua: deklarasikan container-type di parent yang benar (yang dimensinya berubah), jangan di parent terlalu tinggi. Pelajaran ketiga: ukur dampak ke ukuran CSS dan Core Web Vitals, bukan cuma visual.

Pertanyaan Umum

Apakah refactor ini butuh ganti library CSS-in-JS?

Tidak. Atmo pakai CSS Modules dan tidak ganti library. Refactor murni di level CSS.

Berapa biaya engineering hour total?

Tiga hari kerja untuk satu developer, termasuk testing di Chrome, Safari, dan Firefox. Tidak ada bug regression.

Apakah perlu fallback browser lama?

Iya. Tim Atmo menambah @supports not (container-type: inline-size) dengan style fixed untuk browser di bawah versi 2023. Dukungan saat ini di atas 92 persen menurut Can I Use.

Apakah teknik ini cocok untuk e-commerce?

Sangat cocok. Kartu produk e-commerce yang muncul di grid, sidebar, dan modal quick-view adalah kandidat ideal.

Penutup

Atmo LMS membuktikan container query units bukan sekadar fitur eksperimental, tapi tool praktis untuk memangkas CSS dan menstabilkan layout di komponen reusable. Untuk marketer Indonesia yang sedang scale up product, audit dulu komponen yang dipakai di banyak slot. Kalau Anda butuh setup serupa untuk website bisnis atau personal brand, lihat layanan website Vito Atmo.