Bootstrap
إطار عمل CSS جاهز (CSS Component Framework)
Bootstrap هو إطار عمل CSS الأكثر شعبية لبناء مواقع متجاوبة وسريعة. يوفر مكونات جاهزة مثل الأزرار، الجداول، النماذج، والقوائم. يتضمن نظام Grid قوي، JavaScript plugins، وتصميم موحد. Bootstrap 5 أحدث …
CSS Modules
نهج scoped CSS (Scoped CSS Methodology)
CSS Modules هي طريقة لتنظيم CSS بحيث تكون كل class محلياً scoped للمكون. يتم تحويل `.button` إلى `.Button__button___1xZ3b` تلقائياً لمنع التعارض. يعمل مع Vite, Webpack, Create React App، ومعظم frameworks. …
CSS-in-JS
نهج CSS في JavaScript (CSS-in-JS Concept)
CSS-in-JS هو نهج عام لكتابة CSS داخل JavaScript/TypeScript بدلاً من ملفات CSS منفصلة. يوفر scoped styles، dynamic styles بسهولة، theming، وcode splitting تلقائي. يشمل مكتبات مثل Styled-Components، Emotion، و Linaria. …
Emotion
مكتبة CSS-in-JS مرنة (Flexible CSS-in-JS Library)
Emotion هي مكتبة CSS-in-JS عالية الأداء تُقدم طريقتين للكتابة: css prop (مثل JSX inline styles) و styled API (مثل Styled-Components). تتميز بمرونة أكثر من Styled-Components وأداء أفضل. Emotion تدعم both …
Less
معالج CSS (CSS Preprocessor)
Less هو معالج CSS مثل Sass لكن بصيغة أبسط. يستخدم JavaScript للترجمة ويمكن تشغيله في المتصفح أو Node.js. يوفر المتغيرات، الـ nesting، والـ mixins مثل Sass لكن بميزات أقل. Less …
Linaria
مكتبة CSS-in-JS بدون runtime (Zero-Runtime CSS-in-JS)
Linaria هي مكتبة CSS-in-JS بدون runtime overhead. تُحوّل CSS داخل JavaScript إلى ملفات CSS عادية في وقت البناء (build time). هذا يوفر فوائد CSS-in-JS (scoped styles، dynamic) بدون runtime cost. …
Panda CSS
مكتبة CSS-in-JS حديثة (Modern CSS-in-JS Framework)
Panda CSS هي CSS engine حديثة من Chakra UI team تجمع بين أفضل ميزات Tailwind CSS و CSS-in-JS. توفر type-safe CSS مع zero runtime و JSX support. تعمل في build …
Sass
معالج CSS (CSS Preprocessor)
Sass (Syntactically Awesome Style Sheets) هو معالج مسبق لـ CSS يُضيف ميزات لا توجد في CSS العادي. مثل المتغيرات (variables)، الـ nesting، الـ mixins، الـ functions، والـ inheritance. يُجمع إلى …
Styled-Components
مكتبة CSS-in-JS (CSS-in-JS Library)
Styled-Components هي مكتبة CSS-in-JS تسمح بكتابة CSS مباشرة داخل ملفات JavaScript/TypeScript. تستخدم tagged template literals لإنشاء مكونات React مع scoped styles. كل مُكوّن يحمل الـ styles الخاصة به فقط. تُستخدم …
Stylex
مكتبة CSS-in-JS من Meta (Zero-Runtime CSS-in-JS from Meta)
StyleX هي مكتبة CSS-in-JS من Facebook (Meta) تُقدم zero-runtime styling مع TypeScript safety. تستخدم approach مختلف – static styles في compile time مع dynamic عبر CSS variables. تُستخدم داخلياً في …
Tailwind CSS
إطار عمل CSS utility-first (Utility-First CSS Framework)
Tailwind CSS هو إطار عمل CSS يعمل على نهج "utility-first" بدلاً من كتابة CSS مخصص. بدلاً من كتابة فئات مثل `.card`، تستخدم فئات جاهزة مثل `bg-white rounded-lg shadow p-4`. يوفر …
Vanilla Extract
مكتبة CSS-in-TS بدون runtime (Zero-Runtime TypeScript CSS-in-JS)
Vanilla Extract هي مكتبة CSS-in-JS مكتوبة بـ TypeScript وتعمل في build time (ليس runtime). تُحوّل TypeScript styles إلى ملفات CSS عادية. تقدم type safety كامل لـ CSS بدون runtime overhead. …