Pada CSS atom yang dihasilkan secara automatik

Eksplorasi Robin Weser mengenai dilema Shorthand-Longhand dalam CSS atom menyoroti cabaran-cabaran menukarkan HTML dan CSS secara automatik ke dalam gaya yang dioptimumkan. Isu teras terletak pada kes -kes kelebihan pengendalian yang timbul daripada interaksi sifat -sifat CSS shorthand dan longhe, yang membawa kepada kesilapan yang berpotensi apabila menggunakan kerangka seperti Fela yang menghasilkan kelas atom.

Konsep CSS Atom- Satu kelas, satu pekerjaan -adalah menarik. Pertimbangkan contoh ini:

 <code>.mb-8 { margin-bottom: 2rem; }</code>

Bayangkan beribu -ribu kelas tersebut, yang meliputi hampir setiap kemungkinan CSS.

Mengapa menggunakan CSS Atom? Beberapa sebab yang menarik wujud:

• Mengurangkan CSS: Menghapuskan pasangan harta/nilai yang berulang dan nama kelas khusus pengarang dengan ketara mengecilkan saiz fail CSS akhir. Ini penting kerana CSS adalah sumber penyekatan.
• Penamaan yang dipermudahkan: Tidak ada lagi nama kelas yang memakan masa.
• Konsistensi Reka Bentuk: Mengehadkan kelas yang tersedia menguatkuasakan tahap keseragaman reka bentuk.
• Peningkatan kelajuan pemaju: Sesetengah pemaju mendapati pendekatan ini lebih cepat dan lebih cekap.

Menjana CSS atom boleh dilakukan secara manual (seperti GitHub dan Facebook telah dilakukan dengan primer dan FB5 masing-masing, walaupun ini tidak semestinya disyorkan), atau dengan menggunakan rangka kerja pra-dibina. Tachyons adalah contoh awal koleksi kelas atom yang besar.

Walau bagaimanapun, CSS Tailwind adalah pemain dominan. Kekuatannya terletak di:

• Konfigurasi: Sesuaikan kelas agar sesuai dengan keperluan projek anda.
• Kelas Purge yang tidak digunakan: Langkah penting ini menghilangkan kelas yang tidak digunakan, menyedari manfaat prestasi penuh CSS atom.
• Perpustakaan UI terbina dalam: Mempercepat pembangunan dengan komponen yang tersedia.

Tetapi bagaimana pula dengan menghasilkan CSS atom secara automatik ?

Pendekatan Yahoo, menggunakan fungsi sebagai nama kelas yang diproses semasa langkah membina, meramalkan kaedah semasa. Ini serupa dengan kombinasi Purgecss Tailwind.

Hari ini, anda tidak perlu menulis CSS atom secara manual. Seperti yang ditunjukkan oleh Weser, perpustakaan seperti Fela, Styletron, React Web Native, otion, dan Stylesheet membolehkan anda menulis gaya dengan cara yang biasa sambil menghasilkan CSS atom semasa proses membina. Pendekatan ini memaksimumkan kebolehgunaan semula dan meminimumkan saiz bundle CSS akhir. Setiap pasangan bernilai harta diberikan hanya sekali, meningkatkan kecekapan.

Kaedah ini, sering berakar dalam CSS-in-JS, memproses kedua-dua markup dan CSS untuk hasil yang optimum. Ia adalah alternatif yang menarik untuk menulis CSS atom secara manual, yang banyak pemaju, termasuk penulis, mendapati kurang menarik. Manfaat utama adalah pengoptimuman automatik untuk prestasi web yang lebih baik.

Persoalannya tetap: Apakah pendapat anda mengenai pendekatan ini?

Atas ialah kandungan terperinci Pada CSS atom yang dihasilkan secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!