Genel Bakış

Bu bölümde EffCSS'in temel kavramlarını inceleyecek, onu benzerleriyle karşılaştıracak ve ne zaman kullanılması gerektiğini ele alacağız.

Yeni bir CSS-in-JS mi?

Kısacası: evet. EffCSS, karmaşık ve öngörülebilir stiller oluşturmak için basit bir araç olmayı hedefleyen bir CSS-in-JS kütüphanesidir. Kütüphane, çeşitli soyutlamalara dayanmaktadır:

• StyleSheet maker, argüman olarak yardımcı araçlar (utilities) içeren bir nesneyi alan ve stil tanımlarını barındıran bir nesne ya da dizge (string) döndüren bir JS fonksiyonudur; bu yardımcı araçlar; sözde seçiciler (pseudo-selectors), at-kuralları (at-rules), BEM seçicileri vb. oluşturan yararlı fonksiyonlar içerir.
• Style provider, istemci tarafında yer alan özel bir HTMLScriptElementtir; bu bileşen, stil sayfası oluşturucularını (stylesheet makers) her ortamda işlemek ve yönetmek amacıyla sunucu tarafında da taklit edilebilir.

Ayrıca şu yaygın tarayıcı API'lerini kullanır:

• CSSStyleSheet API,
• Web Components,
• Document adoptedStyleSheets özelliği.

Sonuç olarak, EffCSS herhangi bir harici bağımlılık gerektirmez. Tüm modern tarayıcılarda ve her türlü framework ile aynı şekilde çalışır.

Temel yerleşik özellikler

• İstemci tarafında CSS oluşturma - Style provider aracılığıyla istemci tarafında dinamik olarak stil sayfaları kullanabilirsiniz,
• Sunucu tarafında CSS oluşturma - Style provider, durumunu SSR/SSG süreçlerinde kullanılabilecek bir HTML dizisine dönüştürebilir (serileştirebilir),
• CSS geçişi - oluşturulan herhangi bir stil sayfası, Style provider üzerindeki açma/kapama metoduyla etkinleştirilebilir veya devre dışı bırakılabilir,
• Tema desteği - Style provider nesnesinin theme özelliği üzerinden erişilebilen tema denetleyici nesnesi kullanılarak temalar oluşturulabilir, güncellenebilir veya silinebilir,
• TypeScript destekli stil sayfaları - stil sayfası oluşturucu TypeScript türlerini kullanıyorsa, Style provider seçicileri otomatik tamamlama özelliğiyle çözümleyebilir,
• İzole edilmiş ve küçültülmüş (minified) seçiciler - her stil sayfası oluşturucu, benzersiz bir önek (prefix) içeren seçiciler döndüren select yardımcı fonksiyonunu kullanabilir; ayrıca Style provider üzerindeki min özniteliği aracılığıyla bu seçiciler küçültülebilir.

Karşılaştırma

Sass / Less

Ön işlemciler (preprocessors), kendilerine özgü sözdizimi ve buna bağlı kısıtlamalar sunar. EffCSS ise modern JavaScript ve TypeScript'i dilediğiniz şekilde kullanmanıza olanak tanır.

Tailwind

Tailwind yardımcı sınıflar (utility) mantığıyla çalışır ve sözdizimi renklendirmesi ile otomatik tamamlama özellikleri için düzenleyici (editor) yapılandırması gerektirir. EffCSS ise stil sayfalarıyla çalışır ve TypeScript generics yapısı sayesinde seçici (selector) otomatik tamamlama imkanı sunar.

Emotion

@emotion/css bağımlılıklara sahiptir ve çoğu durumda ilgili ekosistemden başka paketlerin (örneğin @emotion/react, @emotion/styled) kullanılmasını gerektirir. EffCSS ise bağımsızdır; herhangi bir dış pakete ihtiyaç duymaz ve her durumda aynı şekilde çalışır.

Styled Components

Styled Components, React bileşenlerini stillendirmek için tasarlanmıştır. EffCSS ise belirli bir framework'e bağlı değildir (framework-agnostic).

Linaria

Linaria, çalışma zamanı (runtime) maliyeti olmayan (zero-runtime) bir kütüphanedir. EffCSS ise CSS'i her ortamda oluşturabilir.

Ne zaman kullanılmalı?

Aslında kütüphane seçimi bir zevk meselesidir. Yine de, tercih etmeniz için başka sebepler de olabilir:

Şunları istiyorsanız:

• herhangi bir framework'e bağlı olmayan bir araç kullanmak 😍,
• stilleri TypeScript ipuçları (hints) desteğiyle tekrar tekrar kullanmak 😎,
• ekstra ayarlara gerek kalmadan stilleri sunucu tarafında kullanmak 😃.

Şunları istemiyorsanız:

• projeye ek derleme (build) eklentileri kurmak 😦,
• düzenleyicinize özel eklentiler yüklemek 😨,
• yeni bir sözdizimi öğrenmek 😠.

Bunlardan en az biri ilginizi çekti mi? O halde haydi başlayalım!