Best Practices Saya – CSS

1. Kata pengantar

Saat ini CSS kurang dimanfaatkan. Ada jurang antara developer Angular/React/Vue/... dan UI designer.

UI designer menumpuk tiga puluh <div> dan memasang empat puluh class CSS di atasnya, sementara dev Angular tiap 2 minggu kegirangan dengan library terbaru, padahal dependency hell-nya sudah lama tidak bisa di-build tanpa npm i --force karena peer dependency saling bentrok. Fanatik TypeScript tidak terlalu peduli pada CSS dan HTML. Untuk input yang paling sederhana pun ia harus memakai Material, karena takut tidak sanggup membuat validasinya sendiri. Dan tentu saja ia tidak mau membuang waktu untuk menciptakan ulang roda. Ia tidak sadar bahwa begitu muncul kebutuhan pertama yang tidak tercakup library itu, seluruh waktu yang dihemat hilang lagi, dan ia pun berakhir membaca GitHub issue library tersebut.

Sebagai developer di proyek fullstack, jarang ada kesempatan untuk menyalurkan kemampuan sebagai desainer frontend. Anda menerima screen mock di Figma dan harus mengimplementasikannya persis seperti itu. Sebagian besar developer frontend jenis ini bahkan tidak sadar bahwa dengan satu baris CSS saja sudah bisa membuat layout responsif. CSS lebih kuat daripada sebelumnya. Lewat sudah masa hack gaya lewat JS, media query yang tak terhitung, dan workaround untuk IE 8. Hore!

2. Super Centered

Tidak selalu diterima dengan baik saat wawancara kerja, tapi saya menyukainya: Pertanyaan apakah saya jago frontend sering saya jawab dengan “Oh ya. Saya bisa menengahkan <div> secara vertikal.”

Menengahkan sebuah div terkenal sangat sulit.

Sekarang tidak lagi:

.parent {
    display: grid;
    place-items: center
}

3. Responsive Grid

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Responsive Flex

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. Tata letak halaman

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. Sidebar

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. Kredit

1-Line Layouts