FCSS 2, utility CSS sınıflarına gerçek CSS özellik adları veriyor ve derleme sırasında bunları temizliyor

Sınıf adları, uyguladıkları gerçek CSS özellikleri ve değerleri olan utility CSS kütüphanesi FCSS 2, Hacker News ana sayfasında öne çıkmasının ardından dikkat çekti. GitHub'daki proje README'sine göre her sınıf tam olarak tek bir bildirime karşılık geliyor — padding--24 yalnızca padding: 24px anlamına geliyor — ve adlar gerçek CSS adları olduğu için (bg-blue değil, background-color--blue) CSS bilen geliştiricilerin ezberlemesi gereken yeni bir şey yok.

Sınıflar nasıl çalışıyor

Sınıf adları property--value desenini izliyor; durumlar ve koşullar da doğrudan adın içine yerleştiriliyor. README, hover stilleri için color--red:hover, bir ARIA özniteliğine tepki vermek için display--block:aria-expanded:true ve duyarlı bir kural için md-display--none örneklerini veriyor. Breakpoint'ler mobile-first; sm, md, lg, xl ve xxl ön ekleri için 576, 768, 992, 1200 ve 1400 px'te min-width media query'leri kullanılıyor ve bunlar md-color--red:hover gibi pseudo varyantlarla birleştirilebiliyor.

Renklar custom property'lerle destekleniyor — örneğin --fcss-color-blue — ve bunlar bir root stylesheet'inde tanımlı olduğundan, sınıf adlarını değiştirmeden sitenin teması yeniden düzenlenebiliyor. Yardımcı bir CLI, verilen herhangi bir sınıfın ne yaptığını açıklayabiliyor veya kullanılabilir olanları listeleyebiliyor.

Runtime yok, ama atlanamayan bir purge adımı var

FCSS, JavaScript runtime'ı olmayan düz CSS olarak dağıtılıyor ve bunun bir boyut bedeli var: çekirdek paket, her durum ve breakpoint'teki tüm sınıfları içeriyor; kabaca 28 MB CSS. Genellikle bir framework entegrasyonu olan purge adımı, projenin kaynak kodunu tarayarak bunu gerçekte kullanılan birkaç kilobayta indiriyor. README, tam dosyayı production'a göndermenin bir seçenek olmadığını açıkça belirtiyor.

Kütüphane Vite 5–8 (React, Preact, Solid ve vanilla JS dahil), Next.js 14–16, Astro 7 ve Angular 17–22'yi destekliyor; ayrıca diğer bundler'lar için resmi entegrasyonların da arka planda kullandığı bir PostCSS plugin'i ve prototipler için düz bir CDN bağlantısı sunuyor. Node.js 20.19 veya daha yeni bir sürüm ya da Bun gerektiriyor; npm, pnpm, yarn veya bun ile çalışıyor.

Bazı entegrasyonlarda tuhaflıklar var. Next.js 16 varsayılan olarak Turbopack ile derlenirken FCSS purge işlemini webpack üzerinden yapıyor; bu yüzden production build'leri için next build --webpack gerekiyor. Angular'da bir schematic, purge işlemini build script'ine bağlıyor ve ng build tek başına çalıştırıldığında bu adım atlanıyor.

Bilinmesi gereken kaba kenarlar

Tarayıcı, kullanılan sınıfları HTML, JavaScript, TypeScript, JSX/TSX, Angular şablonları ve .astro dosyalarını okuyarak buluyor. Vue ve Svelte dosyaları henüz taranmıyor; bu yüzden yalnızca bir .vue veya .svelte dosyasında geçen bir sınıf çıktıdan çıkarılıyor; her ikisi için destek de yol haritasında yer alıyor.

Purge adımı kod çalıştıramıyor, yalnızca okuyabiliyor; bu yüzden sınıf adlarının statik olarak yazılması gerekiyor. Bir ternary içindeki sınıf bulunuyor; runtime'da template-literal interpolation ile oluşturulan bir ad bulunamıyor ve bunun yerine bir safelist'e eklenmesi gerekiyor.

Neden önemli

Utility-first CSS genellikle, CSS'in üzerine bir framework'ün uydurma kısaltmalarını öğrenmek anlamına gelmiştir. FCSS 2 tersine iddia ediyor: söz varlığını dille aynı tutmak, sınıfları framework'lere ya da hiçbir framework'e bağlı olmadan taşınabilir kılmak ve payload'ı küçük tutma işini build'e bırakmak. Utility kısaltmalarını bir engel olarak gören ekipler için bu, bir ezber katmanını ortadan kaldırıyor ve stilleri düz CSS bilgisi olan herkes için okunur tutuyor. Bedelleri de aynı derecede net — bütün bu yaklaşım purge adımının doğru çalışmasına bağlı, birkaç framework build'i özel işlem gerektiriyor ve Vue ile Svelte projeleri, dosya taraması gelene kadar fiilen dışarıda bırakılmış durumda.