مذكرات سعيد
اتقرأ🔖
الصفحات · فصل ٦

الستايل من غير ما يتسرّب

scoped CSS · is:global · CSS modules · Sass · Tailwind
🎯 الهدف: تكتب CSS محبوس في مكوّنه، وتعرف امتى تفتحه، وإزاي تدخل Sass أو Tailwind.

افتراضيًا الستايل محبوس

وسم <style> جوّه .astro بيطلع CSS scoped: Astro بيزود خاصية زي data-astro-cid-... على عناصر المكوّن وعلى السيلكتور. ستايل h1 في Dish.astro مش هيغيّر h1 في الصفحة الأم.

src/components/Price.astro
---const { value } = Astro.props;---<span class="price">{value}</span><style>  .price {    color: #b45309;    font-weight: 700;  }</style>
متكتبش ستايل عام وأنت فاكر إنه محبوس، ومتكتبش ستايل محبوس وأنت عايزه يوصل للأطفال.

الأطفال اللي الأم حاطاهم في slot مش عليهم نفس الـ cid. السيلكتور .card :global(p) يوصل لفقرة جاية من بره. <style is:global> يفتح الملف كله، فاستخدمه نادرًا (reset أو خطوط).

استيراد ملف عادي يطبقه على الصفحة كـ CSS عالمي بعد ما Vite يجمعه:

src/layouts/Base.astro
---import "../styles/global.css";---

class:list

بدل ما تلزق نصوص، ادي مصفوفة. القيم الفاضية و false بتتشال.

src/components/Tag.astro
---const { hot } = Astro.props;---<span class:list={["tag", { hot }]}>طبق</span><style>  .tag { padding: 0.2rem 0.5rem; }  .hot { background: #fee2e2; }</style>

لو الأم بعته class، استقبله باسم تاني لأن class كلمة محجوزة، وحطه في class:list زي ما فصل المكوّنات قال.

Sass و CSS modules

Sass و SCSS و Less بيشتغلوا لو الحزمة متسطّبة (sass مثلًا) وكتبت <style lang="scss">. Vite هو اللي بيمرّرهم.

ملف Price.module.css جنب المكوّن، واستورده ككائن. الكلاسات تتسمّى بأسماء فريدة. ده بديل للـ scoped لو الستايل مش جوّه ملف .astro (مكوّن React مثلًا).

style جوّه .astro

الأبسط. محبوس لوحده. مناسب لمعظم مكوّنات Astro.

CSS module

ملف لوحده، أسماء متولدة. مناسب لمكوّن إطار أو ستايل مشترك بشكل صريح.

Tailwind

المسار الحالي Tailwind الإصدار ٤ عن طريق إضافة Vite، مش التكامل القديم @astrojs/tailwind اللي كان على الإصدارات الأقدم. التثبيت بيتغير، فراجع دليل Astro للستايل قبل ما تنسخ أمر.

الفكرة ثابتة: Tailwind كلاسات على العناصر، والبناء يشيل اللي متستخدمش. متحطّش ملف CSS ضخم في public وأنت فاكر إن Tailwind هيشوفه. لازم يعدّي على Vite.

تمرير ستايل للطفل

:global() للحفرة اللي فيها slot. أو ادي الأم كلاس على غلاف، والطفل يورّث اللون بمتغير CSS:

src/components/Plate.astro
<div class="plate">  <slot /></div><style>  .plate { --sauce: #b91c1c; }  .plate :global(em) { color: var(--sauce); }</style>

متغيرات CSS على اللاياوت (--font و --bg) أحسن من إن كل مكوّن يخترع لونه. الثيم يتبدل من مكان واحد.

خلّصت الفصل لما

🧠 اختبر نفسك
١) ستايل p جوّه مكوّن Astro هيأثر على p في مكوّن تاني؟
لأ، طالما الـ style مش is:global.
٢) ليه ستايل المكوّن مش واصل لفقرة جاية من slot؟
لأن عناصر الـ slot متعلّمة بـ cid المكوّن الأم، مش المكوّن اللي فيه الـ style.
٣) Sass يشتغل إزاي؟
تسطّب حزمة sass وتكتب lang=scss على وسم style.