ال Styling في المشاريع الكبيرة وال Design systems

ليه المرحلة دي مهمة

في الفريق، ال CSS بيبقى نظام مشترك مش ملف واحد. محتاج طريقة Styling تكبر مع المشروع، و Components شكلها ثابت، وتعرف تتكلم مع الديزاينرز على Figma.

تتعلم إيه

1. لازم تعرفه

   Tailwind CSS

   علّم إنه خلص

   Utility-first styling، وال Theming ب CSS variables في Tailwind v4، وال Responsive وال State variants، وإزاي تخلي ال Classes مقروءة.

   تبقى خلصته لما

   • تقدر تعرّف Design token في ال Theme بتاع Tailwind وتستخدمه في كل حتة.
   • بتطلّع الحاجات المتكررة في Components، مش تكوّم @apply.

   المصادر

   • Tailwind CSS DocsDocs
2. لازم تعرفه

   ال Component libraries وال Headless UI

   علّم إنه خلص

   shadcn/ui و Radix و React Aria و Angular Material و Angular CDK أو Vuetify: إمتى تستخدم واحدة، وليه ال Headless libraries بتتعامل مع ال Accessibility بدالك.

   تبقى خلصته لما

   • تقدر تشرح الفرق بين Library جاهزة بشكلها و Library headless.

   المصادر

   • shadcn/uiDocs
   • Angular CDKDocs
3. اتعلمه بعدين

   ال Design systems و Figma handoff

   علّم إنه خلص

   Tokens للألوان والمسافات والخطوط، و Component APIs وال Variants، والتوثيق ب Storybook، وإزاي تقرا Auto layout وال Variables في Figma.

   تبقى خلصته لما

   • تقدر تحوّل Design من Figma ل Tokens و Components، مش Styles لمرة واحدة.
   • وثّقت Components في Storybook.

   المصادر

   • StorybookDocs

أخطاء شائعة

• إنك تخلط 3 طرق Styling في نفس المشروع.
• إنك تنسخ Component library ومتتعلمش ال CSS اللي تحتها.