📋 محتويات الصفحة
📖 الوصف
Vanilla Extract هي مكتبة CSS-in-JS مكتوبة بـ TypeScript وتعمل في build time (ليس runtime). تُحوّل TypeScript styles إلى ملفات CSS عادية. تقدم type safety كامل لـ CSS بدون runtime overhead. Vanilla Extract توفر API آمن من ناحية الأنواع مع support لـ CSS variables، dynamic values، وtheming. تُعتبر من...
🎯 يستخدم في
مجالات استخدام هذه الأداة
Applications تحتاج لأداء عالي
TypeScript-heavy projects
Zero-runtime CSS
Design systems مع type safety
SSR و static sites
✨ المميزات
أبرز مميزات هذه الأداة
TypeScript support ممتاز
Zero runtime overhead
CSS variables مدمج
Theming system قوي
Framework-agnostic
Works مع React
Vue
Svelte
Type-safe styles
Small output
⚠️ العيوب
نقاط يجب مراعاتها
منحنى تعليمي
لا styled components pattern
Build setup قد يكون معقد
أقل شهرة من Styled-Components
TypeScript مطلوب
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// styles.css.ts
import { style, globalStyle, createTheme } from '@vanilla-extract/css';
// Theme
export const lightTheme = createTheme({
color: {
primary: '#3498db',
background: 'white',
text: 'black',
},
spacing: {
small: '8px',
medium: '16px',
large: '24px',
},
});
// Styles (type-safe)
export const button = style({
background: '#3498db',
color: 'white',
padding: '12px 24px',
border: 'none',
borderRadius: '4px',
':hover': {
background: '#2980b9',
},
});
export const primary = style({
background: '#e74c3c',
});
// Global styles
globalStyle('body', {
margin: 0,
padding: 0,
fontFamily: 'system-ui, sans-serif',
});📚 أدوات أخرى في Styling
قد يعجبك أيضاً
Bootstrap
⭐إطار عمل CSS جاهز (CSS Component Framework)
CSS Modules
⭐نهج scoped CSS (Scoped CSS Methodology)
CSS-in-JS
⭐نهج CSS في JavaScript (CSS-in-JS Concept)
Emotion
⭐مكتبة CSS-in-JS مرنة (Flexible CSS-in-JS Library)
Less
معالج CSS (CSS Preprocessor)
Linaria
مكتبة CSS-in-JS بدون runtime (Zero-Runtime CSS-in-JS)