ما الأساسيات التي أركز عليها في CSS

أولا أفضل شئ أراه مناسبا للتعلم في CSS وأن تكون واثقا من نفسك فيها ومتمكن وصاحب خبرة هي أن تقوم بإنشاء والتدرب على مشاريع كثيرة وأن تقوم مثلا بالبحث عن موقع تراه مناسبا وتقوم بتقليده وإليك الإجابة التالية لمعرفة كيفية التطبيق على CSS والتأكد من فهمك له :

وهذا الشعور الذي لديك هو طبيعي جدا ويمر به أغلب المطورين، حتى ذوي الخبرة. فلغة CSS تبدو سهلة في البداية ولكن عند التعمق تصبح معقدة لأن القواعد تتداخل بطرق غير متوقعة.

وإليك الأساسيات التي يجب عليك فهمها والتركيز عليها :

• فهم الصندوق والتدفق (The Box Model & Flow) :

فأغلب مشاكل التصميم تأتي من عدم فهم كيفية تعامل المتصفح مع العناصر كصناديق.

• Box Model: افهم جيداً الفرق بين margin و border و padding والأهم هو خاصية box-sizing: border-box وكيف تحل لك مشاكل الحجم الزائد.
• Display Types: افهم الفرق الجوهري بين block و inline و inline-block وكيف يؤثر كل منهم على العناصر المجاورة.
• Positioning: متى تستخدم relative و absolute و fixed و sticky وهذا هو مفتاح التحكم في وضع العناصر فوق بعضها أو تثبيتها.

---------------------------------------------------------------------------------------------------------------------------------

• إتقان أدوات التخطيط الحديثة (Layout Systems)

توقف عن استخدام float للتخطيط وركز على:

• Flexbox: هو الأهم حاليا لترتيب العناصر في اتجاه واحد (صف أو عمود). تعلم كيف تظبط المحاذاة (justify-content و align-items).
• CSS Grid: لعمل تخطيطات معقدة ثنائية الأبعاد (صفوف وأعمدة معا).

وإذا أتقنت Flexbox جيداً ستحل 80% من مشاكل التنسيق التي تواجهك.

---------------------------------------------------------------------------------------------------------------------------------

• التخصيص والأولوية (Specificity & Cascade)

يجب عليك فهم كيف يقرر المتصفح أي تنسيق أو يطبقه إذا تعارضت التعليمات وتعلم حساب النقاط مثلا ال ID أقوى من Class وال Class أقوى من Tag.

وتجنب استخدام ال !importan إلا في أضيق الحدود لأنها تدمر تسلسل الكود.

---------------------------------------------------------------------------------------------------------------------------------

• التجاوب ووحدات القياس (Responsive Design & Units)

لكي يعمل تصميمك على الموبايل واللابتوب بنفس الكفاءة:

• Units: قلل من استخدام البكسل px. تعلم استخدام الوحدات النسبية مثل rem للنصوص و % أو vw/vh للأبعاد.
• Media Queries: تعلم كيف تغير التنسيق بناءً على حجم الشاشة (Mobile First approach).

هناك أمور تؤدي إلى ذلك وهي حفظ كل الخصائص بدون استيعاب ما يجب فعله هو استيعاب المفاهيم الأساسية، كذلك نسخ كود بدون فهم بل قم بالتجربة وأخطئ لا مشكلة، كذلك تعلم كل شيء مرة واحدةركز تجنبه تمامًا، ركز أولاً على Flexbox وتعمق به.

ولن تتقن CSS بالحفظ، بل عن طريق الاستيعاب والممارسة، وحتى من لديه خبرة سنوات يبحث في جوجل عن خصائص CSS يوميًا لا مشكلة.

في البداية تحتاج إلى استيعاب مفهوم Box Model  وكيف تؤثر  خواص margin وborder وpadding على حجم الـ content داخل العناصر، وماذا يحدث عند تعيين قيمة border-box إلى خاصية box-sizing.

ثم دراسة أساسيات Flexbox وتعمق به ولا تنتقل إلى Grid إلا بعدما تشعر بأريحية في التعامل مع Flexbox، قم بتنفيذ التحديات التالية:

• https://flexboxfroggy.com/

ثم قم بتطبيق ما تعلمته على تصميم بسيط وزد في درجة التعقيد بعد ذلك.

ثم انتقل لتعلم أساسيات  Positioning من خلال خواص absolute وrelative وخلافه وممارسة الأمر عمليًا لاستيعاب الفرق.

ثم تعلم الفرق بين الوحدات px, %, em, rem, vh, vw ومتى نستخدم كل منهم.

ثم تعلم Grid وتنفيذ التمارين التالية:

• https://cssgridgarden.com/

ولا تشغل بالك بالتجاوبية في الوقت الحالي، وقم بتنفيذ نماذج بسيطة ثم تصاميم كاملة وأنصحك بتنفيذ التحديات على موقع Frontend mentor مع تحديد التمارين الخاصة بالمستوى المبتدئ newbie ثم  junior ثم تستطيع زيادة الصعوبة فيما بعد إلى intermediate، وإليك التمارين مباشرًة:

•  https://www.frontendmentor.io/challenges?difficulty=1&type=free%2Cfree-plus

ثم التمارين التالية:

وبعد ذلك تعلم عن كيفية تصميم الموقع بشكل تجاوبي  Responsive Design عن طريق @media