Jadi, pertama-tama - ini bukan pertempuran biasa. Ini bukan tentang CSS versus CSS-in-JS , bukan atomic CSS versus BEM , bukan LESS vs SASS . Pertempuran ini adalah tentang THE ORDER.
Pertempuran ini antara ORDER dan CHAOS. Dan antara ORDER dan, ... ORDER lain . Singkatnya - tentang cara yang lebih baik untuk mengurutkan properti CSS. Tidak lebih, tidak kurang.
Singkatnya - ada 3 cara untuk melakukannya:
- jangan lakukan itu. Tulis CSS apa pun yang Anda bisa. Ini adalah cara yang paling populer
- properti kelompok berdasarkan akal. Taruh beberapa barang bersama. Ini cara yang cukup populer.
- memesan semua properti secara alfabet. Cara termudah, tapi kurang populer.
Mulai sekarang mari kita lupakan cara pertama. Bukan itu caranya.
2012
Ada jajak pendapat yang baik dari trik-css , dan inilah hasilnya:
Sudah 2019, apa yang diubah?
Perbedaan antara alpha sort , ABCSS seperti yang diketahui, dan grouping cukup suara, tetapi lebih baik untuk membuatnya jelas
Keadaan awal
Mari kita mulai dengan CHAOS yang ideal dari masalah yang lebih cantik ini
.wrapper { top: 20px; margin-left: 20px; display: flex; position: absolute; height: 100%; margin-bottom: 20px; border-radius: 5px; color: red; justify-content: center; margin-left: 2px; left: 0px; width: 100%; border: 1px solid red; }
Cantik Seperti itulah tampilan CSS yang umum setelah beberapa tahun tanpa kendali.
ABCSS
Sortir menurut abjad
.wrapper { border: 1px solid red; border-radius: 5px; color: red; display: flex; height: 100%; justify-content: center; left: 0px; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; position: absolute; top: 20px; width: 100%; }
Itu hanya membantu memperhatikan bahwa kami memiliki dua margin-lefts . Akan lebih mudah untuk menambahkan properti baru di waktu berikutnya, terutama jika semua penyortiran dilakukan secara otomatis pada tingkat stylelint .
Keuntungan utama penyortiran alfabet - lokasi properti mudah. Anda hanya memindai tabel, seperti glosarium, dan ya, di sini adalah properti yang saya cari.
Kerugian utama - height berjalan sebelum width , left pergi sebelum top dan ada jarak di antara mereka Penyortiran alfabetis adalah pencampuran konteks .
Saya telah menggunakan beberapa alat online untuk membuatnya. Sejumlah besar alat online, plugin untuk IDE dan alat CLI mendukung penyortiran alfa di luar kotak. - mudah digunakan.
Grup
Sortir dalam kelompok
.wrapper{ position: absolute; top: 20px; left: 0; display: flex; justify-content: center; width: 100%; height: 100%; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; color: red; border: 1px solid red; border-radius: 5px; }
Kali ini lebih tentang separation of concerns - semua properti dikelompokkan (dikelompokkan) ke dalam ember menurut suatu perasaan. Prinsip pemesanan dikenal sebagai "Luar-dalam"
- Properti Layout (posisi, float, clear, display)
- Properti Model Kotak (lebar, tinggi, margin, bantalan)
- Properti Visual (warna, latar belakang, batas, bayangan kotak)
- Properti Tipografi (ukuran font, font-family, perataan teks, transformasi teks)
- Properti Lain-lain (kursor, overflow, z-index)
Dan masalahnya - ada lebih dari satu standar di sekitarnya. Untuk lebih konkret - lebih dari lima. Dan itu masalah. Atau tidak?
Dan, sekali lagi - penyortiran dilakukan oleh alat, CSSCOMB kali ini.
Keuntungan utama - semua properti dikelompokkan berdasarkan akal sehat. Semua sifat fleksibel - bersama-sama. Semua posisi, kiri, kanan, atas, bawah - bersama.
- Jika Anda perlu menambahkan sesuatu - tambahkan suatu tempat dan biarkan alat melakukan pekerjaan.
- Jika Anda perlu menemukan sesuatu - cari grup, lalu cari di dalam grup. By the way - ini WAY lebih cepat dari pencarian linear dalam kasus sebelumnya.
Ini membutuhkan beberapa klarifikasi:
- dengan alpha sort - Anda mencari awal baris, menunjuk awal dan akhir huruf pertama "Anda". Maka Anda akan memikirkan subblock ini dan itu selesai. Itu pada dasarnya O (n). Setelah beberapa pelatihan - O (n / 2), selama Anda akan tahu "di mana" mencari prop.
- dengan semacam grup - Anda tahu "di mana" untuk mencari prop - kelompok memiliki posisi konstan, dan kemudian pergi melalui subset kecil, dan itu selesai. Itu pada dasarnya - O (3), bukan "n".
Kerugian utama - Anda harus belajar cara memisahkan masalah. 99% responden mengatakan bahwa ini adalah masalah besar - untuk menulis CSS yang dikelompokkan , tetapi ini adalah pekerjaan alat, bukan milik Anda. Dan, ya, ada lebih dari satu standar, tetapi itu tidak masalah dengan kemudian pemesanan dilakukan oleh alat.
Jajak pendapat
Jadi, saya melakukan riset tentang masalah ini.
- 2012y, css-trik melaporkan 45% pengembang menggunakan grup, 14 - alpha, 39 tidak menggunakan apa pun
- polling dibuat hari ini (dan belum selesai) - 50% untuk grup, 25% untuk alpha, 25% tidak menggunakan apa pun
Alasan terbaik untuk menggunakan grup:
- Grup adalah cara paling alami untuk menyatukan segala sesuatu: itulah cara Anda menulisnya. Bayangkan jika Anda harus menulis kata dalam kalimat sesuai urutan abjad. Atas, kanan, bawah, kiri secara alami menjadi satu, tepat setelah posisi: absolut ( twitter ).
- Alasan yang baik untuk kelompok bisa berupa CSS atom - atom / utilitas biasanya terikat pada satu "grup", itu adalah cara alami untuk kerangka kerja fungsional. Jadi "normal" CSS mungkin terlihat seperti atom gabungan - yaitu dikelompokkan ( twitter ).
- Tim yang lebih kecil mungkin lebih suka mengelompokkan properti terkait (misalnya penentuan posisi dan model kotak) bersama - sama idiomatik-css .
- Ada pro dan kontra untuk kedua cara. Di satu sisi, urutan alfabet bersifat universal (setidaknya untuk bahasa yang menggunakan alfabet latin) sehingga tidak ada argumen tentang pengurutan satu properti sebelum yang lain. Namun, tampaknya sangat aneh bagi saya untuk melihat properti seperti bawah dan atas tidak bersebelahan. Mengapa animasi harus muncul sebelum jenis tampilan? Ada banyak keanehan dengan pemesanan alfabet. Di sisi lain, memesan properti berdasarkan tipe sangat masuk akal. Setiap deklarasi terkait font dikumpulkan, bagian atas dan bawah disatukan kembali dan membaca semacam aturan terasa seperti membaca sebuah cerita pendek. Panduan SASS .
- file grup yang diurutkan lebih kecil 2% setelah gzip. Ajaib Artikel ini memperkenalkan 5 cara berbeda untuk memesan alat peraga css. belajar
Beberapa alasan tidak digunakan
- "Grup" bagus jika itu berarti hal yang sama untuk semua orang. Biasanya tidak. Anda mungkin bisa mengotomatiskan penegakan pengelompokan dan kemudian Anda jujur. twitter
- Tim yang lebih besar mungkin lebih suka kesederhanaan dan kemudahan perawatan yang datang dengan pemesanan alfabet. lagi idiomatik-css
Alasan menggunakan alfabet:
- Saya biasa melakukannya dengan "grup" tetapi terlalu subjektif. Plus ada banyak tambahan untuk mengurutkan alfa satu set garis. Juga gaya perhitungan alat Chrome Dev adalah alpha.
- menurut abjad. apa pun artinya siapa pun yang datang ke proyek juga perlu mempelajari pola Anda.
- perusahaan saya sendiri menggunakan jenis alpha (itu kejutan bagi saya).
- google css guide merekomendasikan ABCSS, tanpa penjelasan.
Jadi, TLDR
- kebanyakan dari kita (dan saya biasanya termasuk) tidak peduli tentang pemesanan alat peraga CSS. Sebagian besar dari kita juga tidak peduli tentang CSS itu sendiri.
- CSS-in-JS juga tidak cukup mendorong praktik terbaik.
- Praktik terbaik seperti CSS atom adalah besties with groups (by design), sementara BEM, sayangnya, tidak memiliki apa-apa tentang pemesanan properti :(
Ini sebenarnya agak tidak terduga, bahwa hal-hal seperti itu tidak mapan dan terdefinisi, dan saya harus menulis artikel ini.
Fakta menyenangkan - grup dan urutan alfabet bisa jadi besties, misalnya untuk membasahi impor modul Anda, seperti eslint-plugin-import
Ada grup terlebih dahulu, dan pemesanan alfabet hanya digunakan di dalam satu grup.
Sejauh ini saya mendengar argumen grouping pro yang cukup masuk akal, tetapi tidak satu pun (masuk akal bagi saya) semacam pro alpha.
Lihat juga:
PILIH SISI ANDA, dan jelaskan posisi Anda. Saya punya beberapa popcorn untuk dibagikan.