Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS
Derleme sırasında statik CSS dosyaları oluşturan Vanilla Extract ile tür güvenli CSS yazın.
Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Vanilla Extract nedir
Vanilla Extract, sıfır çalışma zamanı ek yükü oluşturan bir CSS-in-JS kitaplığıdır. CSS, TypeScript içinde tanımlanır ve derleme zamanında statik CSS dosyalarına dönüştürülür; böylece çalışma zamanında stil eklemesi olmadan tür güvenliği elde edilir.
Temel ilke
styled-components veya Emotion'ın aksine Vanilla Extract tamamen derleme zamanında çalışır. JavaScript içe aktarması, yazım API'sidir; çıktı ise düz CSS dosyalarıdır. İstemcide stilleri uygulamak için hiçbir JavaScript çalışmaz.
Dosya kuralı
Vanilla Extract dosyaları .css.ts uzantısını kullanır:
// button.css.ts
import { style } from '@vanilla-extract/css';
export const button = style({
background: 'royalblue',
color: 'white',
padding: '10px 20px',
borderRadius: '4px',
cursor: 'pointer',
':hover': {
background: '#2563eb'
}
});Bileşenlerde kullanma
Dışa aktarılan sınıf adını içe aktarın ve uygulayın:
import { button } from './button.css.ts';
function Button({ children }) {
return <button className={button}>{children}</button>;
}Tema contract'ları
Vanilla Extract'in en güçlü özelliği: bir tema contract'ı (belirteç şekli) tanımlayın ve bunu uygulayan birden fazla tema oluşturun:
import { createTheme, createThemeContract } from '@vanilla-extract/css';
const contract = createThemeContract({
color: { primary: null, bg: null }
});
export const lightTheme = createTheme(contract, {
color: { primary: '#3b82f6', bg: '#ffffff' }
});
export const darkTheme = createTheme(contract, {
color: { primary: '#60a5fa', bg: '#111827' }
});styleVariants
Tekrara düşmeden bir stilin birden fazla varyantını oluşturun:
import { styleVariants } from '@vanilla-extract/css';
export const variants = styleVariants({
primary: { background: 'royalblue' },
danger: { background: 'crimson' },
ghost: { background: 'transparent', border: '1px solid royalblue' }
});
// <Button className={variants[variant]}>@vanilla-extract/recipes ile tarifler
Tarifler paketindeki recipe işlevi, temel stilleri ve varyantları zarif bir şekilde birleştirir:
import { recipe } from '@vanilla-extract/recipes';
export const button = recipe({
base: { padding: '10px 20px', borderRadius: '4px' },
variants: {
color: {
primary: { background: 'royalblue', color: 'white' },
danger: { background: 'crimson', color: 'white' }
},
size: {
sm: { fontSize: '0.875rem' },
lg: { fontSize: '1.25rem' }
}
}
});Yardımcı sınıflar için Sprinkles
@vanilla-extract/sprinkles, bir belirteç kümesinden tür güvenli ve sıfır çalışma zamanlı bir Tailwind gibi yardımcı sınıflar oluşturur:
Tür güvenliği
Stiller TypeScript nesneleri olduğundan CSS özellik adları ve değerleri için tam IDE otomatik tamamlama ve tür denetimi elde edersiniz. Özellik adlarındaki yazım hataları çalışma zamanında değil, derleme zamanında yakalanır.
Derleme aracı bütünleşmesi
Vanilla Extract, özel bağdaştırıcılar aracılığıyla Vite, webpack, esbuild ve Next.js ile bütünleşir. Çıkarılan CSS, statik bir dosya olarak sunulur.
Vanilla Extract ne zaman seçilmeli
Şunları istiyorsanız Vanilla Extract'i seçin:
- Stilleriniz için tam TypeScript tür güvenliği
- Sıfır çalışma zamanlı CSS-in-JS ek yükü
- En yüksek performans için statik CSS çıktısı
- Tür denetimli belirteç contract'larına sahip güçlü bir temalandırma sistemi
Hızlı kontrol
Vanilla Extract'in styled-components gibi çalışma zamanlı CSS-in-JS çözümlerine göre temel performans avantajı nedir?
Özet
Vanilla Extract, TypeScript öncelikli ve sıfır çalışma zamanlı bir CSS-in-JS kitaplığıdır. Tür güvenli JavaScript nesnelerini kullanarak stilleri .css.ts dosyalarında tanımlayın. Derleme zamanı statik CSS dosyaları oluşturur. Tema contract'ları, tür denetimli çoklu tema desteği sağlar. styleVariants ve recipe, bileşen varyantlarını zarif bir şekilde yönetir. Sıfır çalışma zamanı maliyeti, onu performans açısından kritik uygulamalar için ideal hâle getirir.
Sıkça Sorulan Sorular
“Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS” dersi ücretsiz mi?
Evet — “Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS” dersinde ne öğreneceğim?
Derleme sırasında statik CSS dosyaları oluşturan Vanilla Extract ile tür güvenli CSS yazın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Styled-components: Etiketli Şablon Değişmezleri
- Emotion: css() ve styled()
- CSS Modules: Kapsamlandırılmış Stiller
- Vanilla Extract: Sıfır Çalışma Zamanlı CSS-in-JS