📋 محتويات الصفحة
📖 الوصف
Linaria هي مكتبة CSS-in-JS بدون runtime overhead. تُحوّل CSS داخل JavaScript إلى ملفات CSS عادية في وقت البناء (build time). هذا يوفر فوائد CSS-in-JS (scoped styles، dynamic) بدون runtime cost. Linaria تستخدم Babel plugin لاستخراج الـ CSS من الـ JavaScript. تدعم both styled API و css tagged templat...
🎯 يستخدم في
مجالات استخدام هذه الأداة
React applications تحتاج لأداء عالي
CSS-in-JS بدون runtime overhead
Applications with large bundles
Projects تحتاج zero-runtime CSS
SSR applications
✨ المميزات
أبرز مميزات هذه الأداة
Zero runtime (CSS يُجمع في build time)
Styled API مثل Styled-Components
TypeScript support
Dynamic styles محسّنة
Tree shaking يعمل
Small bundle size
Automatic critical CSS
Server-side rendering
⚠️ العيوب
نقاط يجب مراعاتها
يحتاج Babel plugin
أقل ديناميكية من runtime CSS-in-JS
أقل شهرة من Styled-Components/Emotion
بعض الميزات المتقدمة محدودة
Build time overhead
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
import { styled, css } from '@linaria/react';
// Styled components (zero-runtime)
const Button = styled.button`
background: #3498db;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
&:hover {
background: #2980b9;
}
`;
// Dynamic with props (via CSS variables)
const Card = styled.div<{ $highlighted: boolean }>`
padding: 16px;
background: ${(props) => props.$highlighted ? '#3498db' : 'white'};
border-radius: 8px;
color: ${(props) => props.$highlighted ? 'white' : 'black'};
`;
// Usage
function Example() {
return (
<>
<Button>زر عادي</Button>
<Button $highlighted>زر مميز</Button>
<Card>بطاقة عادية</Card>
<Card $highlighted>بطاقة مميزة</Card>
</>
);
}
// CSS files are generated at build time
// Button.css: .Button_button__abc123 { ... }📚 أدوات أخرى في 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)
Panda CSS
مكتبة CSS-in-JS حديثة (Modern CSS-in-JS Framework)