ملي كاتبدا تتعلم برمجة المواقع أول حاجة خاصك تبدا بها هي html و css, و خاصك تركز بزاف على css و تعلمو مزيان باش تقدر تبني أي style بغيتي. و من المعروف ان css صعيب لأنه في بعض الأحيان داكشي اللي باغي ماشي هو النتيجة و مكاتعرفش علاش, و أيضا كل متصفح و كيفاش كايقرا css, هادشي كايعني أنه الموقع ديالك ربما إبان مختالف في بعض المتصفحات.
عند بناء مشاريع حقيقية, المبرمجين مكايستخدموش css العادي, و خصوصا ملي كايكون الموقع أو التطبيق كبير بزاف. و خاصك تعرف أنه و أنت كاتبني خاصك تأكد أن عملية الصيانة أو إضافة أشياء جديدة في المستقبل إلى الموقع ستكون سهلة و سلسة, و بطبيعة الحال صعيب تحقق هادشي بإستعمال css العادي.
فهاد المقال غانتعرفو على 4 طرق لكتابة css لتستطيع بناء المواقع و التطبيقات بإحترافية.
1- PREPROCESSOR :
كاينين العديد من preprocessors , كمثال Sass , Less او Stylus. الطريقة ديال الكتابة كاتكون مختالفة على css, لكن كايعطيوك أشياء مكايناش في css كمثال functions ...
كما أنه بإمكانك تفرق style لعدة ملفات بحيت أن كل ملف كايكون مهتم بجزء صغير من الصفحة, هاكا كاتقدر تبدل أو تضيف أشياء جديدة في المستقبل بكل بساطة. المتصفحات كايعرفو غير css لذلك كاتستعمل مترجم compiler باش تحول sass أو less ... ل css.
2- CSS IN JAVASCRIPT :
هاد الطريقة كاتمكنك من أنك تكتب css وسط javascript هادشي كايعطيك القدرة أنك تستعمل القوة ديال javascript باش تكتب css. من بين أشهر libraries اللي كايقدمولك هادشي, كاين :
Styled-Components , Emotion و JSS.
هاد الطريقة كاتستعمل بزاف مع React لأن في react كاين html في javascript او ما يسمى ب jsx لذلك المبرمجين كايفضلو إضيفو حتى css باش يكمل الثلاثي.
3- UTILITY CLASSES :
فهاد الجانب كانلقاو Tailwindcss و WindiCss. الإستعمال كايكون عن طريق كتابة إسم class كاتحمل style اللي بغيتي, مثلا نفتارضو عندنا هاد h1.
<h1>هذا عنوان كبير</h1>
بغينا نعطيوه font-size : 1.5rem و font-weight : 600 و color : blue . إلى ستخدمنا tailwindcss, غانكتبوه بهاد الطريقة:
<h1 class="text-2xl font-semibold text-blue-400">هذا عنوان كبير</h1>
كل class كاتعطي style معين:
-
text-2xl=font-size : 1.5rem
-
font-semibold=font-weight : 600
-
text-blue-400=color : blue
4- PREBUILT COMPONENTS
كاين Bootstrap, Bulma و العديد من ل frameworks الأخرين اللي كايعطيوك أجزاء واجدين بإمكانك تضيفهم للموقع ديالك. بدون الحاجة إلى تحديد كل شيئ بنفسك.
كمثال هذا الزر :
إذا إستعملنا bootstrap يمكننا كتابتها بهذه الطريقة:
<input class="btn btn-primary" type="submit" value="Submit">
النهاية :
في darija.dev إستعملت tailwindcss باش نقاد style. المرحلة الصعيبة كاتكون فالأول ملي كاتكون عاد كاتحفض أسماء ل classes , أما من بعد كايولي ساهل بل أسهل من css. هاكذا الحال مع أي حاجة جديدة , كاتبغي الوقت باش تعلمها لكن من بعد ما كاتعلمها كاتلقا المنفعة ديالها كبيرة.