Amalan Terbaik Saya – CSS

1. Prakata

CSS hari ini kurang dimanfaatkan. Ada jurang antara pembangun Angular/React/Vue/... dengan pereka UI.

Pereka UI menyarangkan tiga puluh <div> yang dilekatkan empat puluh kelas CSS, manakala pembangun Angular pula tergila-gilakan pustaka terbaharu setiap dua minggu, sedangkan “dependency hell” miliknya sudah lama tidak dapat dibina tanpa npm i --force kerana peer dependency saling bercanggah. CSS dan HTML tidak begitu menarik minat si fanatik TypeScript. Untuk input yang paling ringkas pun dia mesti menggunakan Material, kerana dia takut tidak mampu menguruskan pengesahan sendiri. Dan sudah tentu tiada siapa mahu membuang masa mencipta semula roda. Bahawa semua masa yang dijimatkan itu akan hilang semula sebaik sahaja muncul keperluan pertama yang tidak diliputi pustaka tersebut – lalu dia mendapati dirinya membaca isu-isu GitHub pustaka itu – tidak pernah terlintas di fikirannya.

Sebagai pembangun dalam projek fullstack, jarang sekali kita berpeluang menyerlahkan kemahiran sebagai pereka frontend. Kita menerima mockup skrin dalam Figma dan mesti melaksanakannya tepat seperti itu. Kebanyakan pembangun frontend jenis ini langsung tidak sedar bahawa susun atur responsif boleh dicapai dengan hanya satu baris CSS. CSS lebih berkuasa berbanding sebelum ini. Sudah berlalu zaman godam gaya dengan JS, media query yang berlambak dan penyelesaian khas untuk IE 8. Hore!

2. Tepat di tengah

Tidak selalu diterima baik semasa temu duga, tetapi saya sangat menyukainya: apabila ditanya sama ada saya mahir dalam frontend, saya gemar menjawab “Oh, ya. Saya boleh memusatkan sebuah <div> secara menegak.”

Memusatkan sebuah div memang terkenal sukar.

Kini tidak lagi:

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

3. Grid responsif

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

4. Flex responsif

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

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

5. Susun atur halaman

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

6. Bar sisi

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

7. Kredit

1-Line Layouts