Modern CSS

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

ال CSS في 2026 لغة مختلفة عن اللي أغلب الكورسات بتشرحه. Container queries و :has() و Nesting و Cascade layers و View transitions و Anchor positioning بقوا موجودين في كل ال Browsers الكبيرة. اللي عارف Modern CSS بيكتب JavaScript أقل و bugs أقل.

تتعلم إيه

1. لازم تعرفه

   ال Cascade وال Specificity وال Box model

   علّم إنه خلص

   ليه ال Style بيتطبق أو مش بيتطبق، وال Boxes حجمها بيتحسب إزاي، والوحدات زي rem و em و % و vh و dvh.

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

   • تقدر تتوقع أنهي rule هتكسب من غير ما تفتح ال DevTools.
   • عارف ليه box-sizing: border-box موجود في كل reset.

   المصادر

   • Learn CSS In Arabic (2021, before container queries and :has())Elzero Web School · كورس · عربي
   • web.dev — Learn CSSكورس
2. لازم تعرفه

   Flexbox و Grid

   علّم إنه خلص

   نظامين ال Layout اللي هتستخدمهم كل يوم. Flexbox لاتجاه واحد، و Grid لاتجاهين.

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

   • تقدر تعمل أي layout مشهور (navbar أو card grid أو holy-grail page) من غير ما تدور.
   • عارف إمتى تختار Grid بدل Flexbox وتقدر تشرح ليه.

   المصادر

   • CSS-Tricks — A Complete Guide to Flexboxمقالة
   • CSS-Tricks — A Complete Guide to CSS Gridمقالة
   • Flexbox Froggyتمرين
   • Grid Gardenتمرين
3. لازم تعرفه

   ال Responsive design وال Container queries

   علّم إنه خلص

   Media queries ب Mobile-first، وأحجام مرنة ب clamp()، وصور responsive، و Container queries للكومبوننتس اللي بتتغير حسب المكان اللي هي فيه.

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

   • ال Layouts بتاعتك شغالة من 320px لحد الشاشات العريضة من غير horizontal scroll.
   • تقدر تعمل card بيغير شكله على حسب ال Container مش ال Viewport.

   المصادر

   • MDN — Container queriesDocs
4. لازم تعرفه

   ال Logical properties و RTL

   علّم إنه خلص

   margin-inline-start بدل margin-left. ضرورية لو بتبني لمستخدمين عرب، وممارسة كويسة في أي مشروع.

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

   • لما تحط dir="rtl" على الصفحة ال Layout ميبوظش.
   • بتقلب الأيقونات اللي ليها اتجاه (زي الأسهم) في ال RTL وتسيب الباقي زي ما هو.

   المصادر

   • MDN — Logical properties and valuesDocs
   • RTL Styling 101مقالة
5. لازم تعرفه

   فيتشرز CSS الحديثة

   علّم إنه خلص

   Custom properties و Nesting و :has() و :is()/:where() و Cascade layers و color-mix(). كلهم آمنين في ال Production النهارده.

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

   • تقدر تعمل Theme للصفحة (light/dark) ب Custom properties بس.
   • تقدر تشيل class toggle بال JavaScript وتحط مكانه :has() selector.
   • بتشوف ال Baseline status قبل ما تستخدم أي feature جديدة.

   المصادر

   • CSS Useful FeaturesElzero Web School · كورس · عربي
   • web.dev — BaselineDocs
   • Josh W. Comeau — CSS articlesمقالة
6. اتعلمه بعدين

   ال Animations وال View transitions وال Anchor positioning

   علّم إنه خلص

   Transitions و Keyframes، وانتقالات بين الصفحات والحالات ب View Transitions API، و Scroll-driven animations، وإنك تربط tooltip بعنصر من غير JavaScript. ودايماً احترم prefers-reduced-motion.

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

   • بتعمل animate ل transform و opacity بس لما تقدر، وعارف ليه.
   • ال Animations بتاعتك بتقف أو بتقل مع prefers-reduced-motion.

   المصادر

   • MDN — View Transition APIDocs
   • MDN — CSS anchor positioningDocs

أخطاء شائعة

• إنك تروح ل Tailwind قبل ما تفهم ال Cascade. Tailwind هو CSS، ولو مش فاهم CSS مش هتعرف تعمل debug.
• إنك تستخدم عرض ثابت بال pixels وأرقام عشوائية بدل ما تسيب Flexbox و Grid يشتغلوا.
• إنك تتعلم من كورسات 2015 اللي مليانة floats و clearfix hacks.