'Tepat pada waktunya' CSS

Kebangkitan CSS Atom dan Penyusunan "Segera": Cara Baru untuk Menulis CSS

ACSS.IO dianggap sebagai projek pertama untuk mengadopsi konsep "CSS atom", dan terasnya terletak pada penyusunan CSS. Anda hanya perlu menulis CSS seperti ini:

<code><div>
  teks
</div></code>

Ia menghasilkan CSS seperti ini:

 <code>.C\(\#333\) { color: #333; } .P\(20px\) { padding: 20px; }</code>

(atau kod serupa).

Kuncinya ialah ia hanya menghasilkan CSS yang anda perlukan, tidak lebih atau kurang. Jumlah akhir kod CSS yang dihasilkan jauh lebih kecil daripada lembaran gaya biasa.

Proses penyusunan ini dipanggil "Just in Time" CSS.

Rangka kerja Tailwind yang popular juga menyokong pendekatan ini. Bagi saya, minda Tailwind ini. Daripada menyediakan sejumlah besar kelas utiliti CSS dan kemudian "membersihkan" bahagian yang tidak digunakan, ia hanya mewujudkan CSS yang diperlukan dari awal.

Saya fikir konsep "segera" CSS adalah populariti. Saya telah melihat CSS Assembler baru -baru ini dan ia mengambil ini dengan serius. Ia tidak berfungsi seperti menggunakan kelas, tetapi seperti ini:

<code><div x-style="grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3">
  Hantar
</div></code>

Saya agak bertentangan dengan pendekatan ini. Di satu pihak, saya suka dengan cara ia gaya tanpa meninggalkan templat, dan terutama seperti jumlah kod CSS yang sangat kecil yang dihasilkannya, kerana CSS adalah sumber yang menyekat. Tetapi sebaliknya, saya tidak menyukai abstraksi CSS itu sendiri, meninggalkan anda di bawah tahap yang mana alat menyokong ciri -ciri asli CSS. Ia juga menjadikan HTML kelihatan sedikit rumit - walaupun saya terbiasa dengan perkara -perkara seperti pengendali acara dalam talian di JSX.

Atas ialah kandungan terperinci 'Tepat pada waktunya' CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!