Sacha Greif bertanya-tanya secara terbuka apakah CSS telah menjadi, Anda tahu, terlalu besar. Dengan semua barang yang telah dikirimkan di browser beberapa tahun terakhir — pertanyaan kontainer! sintaks warna relatif! lapisan kaskade! sifat logis! rentang dalam kueri media! transformasi individu! :has() pemilih! — dan semua yang ada di cakrawala yang mungkin — Beralih CSS! bersarang! pencampuran warna! animasi yang ditautkan dengan gulir! gaya tercakup! — pasti ada kurva pembelajaran yang berbeda untuk CSS hari ini untuk front-ender baru dan berpengalaman.
Mungkin ada saatnya untuk mengetahui sebagian besar properti CSS dan cara kerjanya. Hari-hari itu sudah lama berlalu, setidaknya untuk orang tua seperti saya. Tapi hal semacam itu menimbulkan pertanyaan: CSS apa yang benar-benar harus Anda ketahui?
Vincas Stonys baru-baru ini mencoba daftar. Kris satukan berdasarkan fitur yang dirilis sejak CSS3. Anda mungkin memiliki gagasan tentang apa yang akan Anda sertakan dalam daftar. Jika saya harus menggabungkan 5 Teratas dan membatasi diri saya hanya pada properti dan penyeleksi, mungkin akan terlihat seperti ini…
writing-mode
Saya tidak bisa mengatakan cukup tentang writing-mode Properti. Apa yang membuatnya penting — terutama dari perspektif pembelajaran — adalah bahwa ia menyiapkan Anda untuk prinsip-prinsip inklusif yang memperhitungkan pembuatan tata letak, terlepas dari bahasa pengguna. Pemahaman yang baik tentang writing-mode akan mengarah pada pemahaman tentang sifat dan nilai logika, dan mereka, pada gilirannya, mengatur panggung untuk memahami aliran dokumen dan pemikiran dalam hal block, inline, start, dan end daripada arahan fisik.
display
Saya sulit percaya bahwa siapa pun dapat menulis CSS yang bagus tanpa memiliki pemahaman yang kuat tentang display Properti. Ini adalah properti dan kerangka kerja untuk membuat tata letak. Tidak ada Flexbox atau CSS Grid tanpanya, membuatnya seperti penjaga gerbang untuk memahami fitur-fitur penting tersebut.
Plus, itu display properti melengkapi dengan sempurna writing-mode. Ini persis apa yang Anda perlukan sekali writing-mode telah memaparkan Anda pada aliran dokumen dan arah logis. Anda akan memerlukan properti untuk mengubah aliran normal elemen (seperti mengubah elemen blok menjadi elemen sebaris) atau mulai meletakkan sesuatu (seperti membuat konteks tata letak yang fleksibel) dan di situlah display ikut bermain.
margin / padding / border
Ugh, saya benar-benar curang di sini tetapi berpikir belajar margin, padding, dan border bersama adalah hal yang tidak bisa dihindari. Mereka semua adalah bagian dari Model Kotak, semua bantuan dengan jarak dan gaya, dan semua perlu berkenalan dengan Satuan panjang CSS. Mengetahui apa yang dirancang untuk dilakukan oleh properti ini dan bagaimana mereka berkontribusi pada ukuran elemen yang dihitung tentu saja memberi Anda lebih banyak kontrol gaya, dan menghilangkan kebingungan tentang mengapa suatu elemen berukuran seperti itu — sakit kepala CSS yang umum!
::before dan ::after
Satu lagi di mana saya curang sedikit. Ya, ::before dan ::after adalah dua elemen pseudo individu, tetapi sekali lagi, saya tidak dapat membayangkan belajar tentang yang satu tanpa yang lain. Ini adalah dua-fer!
Saya ingat betapa menakjubkannya bagi saya untuk mengetahui bahwa ini ada dan dapat digunakan untuk membuat semuanya dari efek UI keren untuk menyelesaikan ilustrasi div tunggal. Ini membuka kemungkinan baru dan memberikan pandangan pertama tentang seberapa kuat CSS sebenarnya.
@media
Oof, saya sudah berada di item kelima dan terakhir saya dalam daftar dan merasa masih ada begitu banyak kebaikan CSS yang termasuk di sini. Tetapi jika saya harus memilih satu hal terakhir, itu adalah pertanyaan media. Mengapa? Karena ini adalah bahan utama untuk membuat tata letak yang lancar, fleksibel, dan konteks tampilan yang berbeda. Kueri kontainer mungkin akhirnya menjatuhkan ini dari daftar saya saat jatuh tempo, tetapi untuk saat ini, @media adalah primer yang bagus untuk desain responsif.
Lebih dari itu, @media adalah langkah pertama yang bagus ke dalam kualitas bersyarat CSS. Apakah kita sedang menulis kueri berdasarkan jenis perangkat yang digunakan (mis. screen or print) atau saat area pandang browser memenuhi kriteria tertentu (mis. width >= 768px), Yang @media sintaks sangat berguna untuk membuat tata letak yang dioptimalkan untuk kondisi yang berbeda.
Oh, dan kita bahkan belum menyentuh caranya @media berkaitan dengan aksesibilitas, berkat kemampuannya untuk menerapkan gaya berdasarkan preferensi pengguna (misalnya, prefers-reduced-motion). Jadi, selain membuat tata letak bersyarat, kueri media adalah langkah bagus berikutnya untuk memahami desain inklusif.
Sebutan yang terhormat
Menyatukan CSS ke dalam daftar lima properti dan penyeleksi yang harus diketahui sangatlah sulit, terutama sekarang karena CSS sekarang lebih kuat daripada, katakanlah, bahkan lima tahun yang lalu. Ada sejumlah item lain yang sangat ingin saya sertakan, seperti (tanpa urutan tertentu):
calc()has()colorfontoverflowposition(terutama ini)z-index
Tapi saya tetap pada pilihan saya. Mempelajari CSS lebih penting daripada menghafal daftar properti. Ini adalah perjalanan dan saya pikir lima yang saya pilih mengukir jalur pembelajaran kecil yang bagus yang menetapkan panggung untuk menulis aturan gaya yang baik dan langkah selanjutnya untuk menyelam lebih dalam ke CSS.
Baiklah, katakan milikmu!
Tidak setuju dengan daftar saya? Anda harus! Saya berani bertaruh Anda memiliki beberapa pendapat cerdas dan saya ingin melihat bagaimana Anda akan melengkapi daftar 5 Teratas.
