10 قواعد عليك ان تتعلمها في الـ CSS تجعلك محترفا في التنسيق

اوه نعم، الـ CSS، سيخبرك الكثيرون انه سهل، انك ستحترفه في ظرف ساعتين الى 3 ساعات، انه ليس بلغة برمجة إطلاقا، انه مجرد كائن لتزيين بعض الأزرار و الخطوط و إضافة  بعض الألوان و الطلاء على صفحات الويب، ليس بالشيئ الصعب أثناء التعلم، لكن سرعان ما تبدأ في تطوير صفحة ويب، و تقضي وقتا طويلا جدا في جعل الـ Navbar إحترافية و متناسقة  و إحترافية بإستخدام الـ CSS، هذا الكائن الذي إستهنت به في بداية الأمر قد صار صعباً في التطبيق. 

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

و لنعبد لك طريق الوصول، فقد إخترنا لك مجموعة من القواعد في الـ CSS إن تعلمتها و إحترفتها جعلت إستخدامك لهذه اللغة أسهل، و جعلتك أنت أيضا تقضي وقتا أقل في تنسيق أصعب التصميمات، فهلا إطلعنا عليها ؟

- اتقن إستخدام الـ Preproccessors : 

الـ CSS ليست لغة برمجة اليس كذلك؟ هذا ما سيخبرك به الكثيرون و إن سألتهم لماذا، قد تختلف إجاباتهم لكن معظمها ستتضمن : " لا تستطيع استخدام المتغيرات، لا تستطيع انجاز العمليات، لا تستطيع تحديد الشرط، الحلقات التكرارية ..."، فماذا لو ادرجنا كل هذه الخواص في الـ CSS ؟ الن يكون إستخدامها أيسر و أفضل ؟ 

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

يوجد الكثير من الـ Preprocssors مثل SASS, LESS, SCSS, Stylus، و لكل واحد طريقة الكتابة الخاصة به ( شخصيا أستخدم الـ SCSS )، باستخدام احدى هذه الطرق يمكنك اضافة الجديد الى الـ CSS مثل إستخدام المتغيرات ($red : red;) إستخدام الـ Mixins ( اي تصميم ما يشبه دالة تقوم بتهئة ستايل كامل لعنصر محدد و يكفي اعطاء العنصر الدالة ليأخذ نفس الستايل )، إستخدام الـ Nested Rules ( اي يمكنك جعل أكواد الـ CSS تتداخل مع بعضها بدل جعل كل عنصر يأخذ ستايله الخاص، كما تحصر مسار العنصر في الـ Container الخاص به ) يوجد الكثير من الخصائص التي سنستعرضها عليكم قريبا في مقال شامل لكيفية البدئ في إستخدام احد هذه الـ Preprocessors . 

- تعلم الـ Grid: 

بظهور الاجهزة اللوحية  و الموبايل و إستخدامهما الشاسع، إضطر مطوري الويب الى جعل و تطوير مواقعهم من أجل تضمين التجاوب من خلالها، و قد وفرت لنا الـ CSS خصائص الـ Media Queries ( التي سنعود لها لاحقا في هذا المقال ) من أجل مساعدتنا في تحقيق ذلك، لكن ماذا عن هيكلة الصفحة ككل ؟ 

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

تبدأ عمليتك في الـ Grid كذلك بتخصيص الـ Container او الـ Wrapper و هو العنصر الأب الذي سيشمل كل العناصر التي سيتم تقسيمها، ثم توفر له مجموعة من المعلومات مثل عدد التقسيمات سواء row او الـ columns ثم تبدأ في هندسة العناصر الموجودة داخل ذلك العنصر الأب، في الأخير ستحصل على التناسق و إلتئام كل العناصر على كل الشاشات.

إقرأ أيضا : كيف تصمم صفحة خطأ 404 بإحترام قواعد الـ UI/UX

- تعلم الـ Flexbox : 

إن كانت الـ Grid توفر لنا خيار تقسيم الصفحة و تنسيقها من أجل الحصول على التجاوب، فالـ Flexbox تستطيع توفر لنا نفس الخواص لكن بمميزات مختلفة، اولا الـ FlexBox يتم إستخدامه على كل جزء من الصفحة و ليس الصفحة كاملة ( يمكنك إستخدامه على الصفحة كاملة لكن لا يحبذ فعل ذلك، تعتبر Bad Practice ) لذلك عليك إبقاء الـ FlexBox في كل جزء او عنصر او Wrapper / Container من الصفحة، يسمح لنا الـ Flexbox بالتحكم في تموضع كل العناصر داخله، ترتيبها، جعلها افقية او عمودية، و أيضا توسيط اي عنصر الى جانب التحكم في مساحته، و النتيجة النهائية تدعم التجاوب حتما، استخدامك للـ Flexbox سيسهل عليك الكثير من المشاكل أثناء تنسيق صفحة ويب و سيجعل تموضع العناصر أكثر سهولة بالنسبة لك .

- إحترف خواص التموضع (Positions) :

التموضع او الـ Positioning وهو إستخدام عنصر Position في الـ CSS من أجل تموضع العناصر، اثناء تعلمك للـ CSS قد يبدو لك الأمر سهلا او ربما قد لا تفهمه بشكل أقرب، لكنك ستعتمد عليه كثيراً خصوصا في إبتكار تصميمات حديثة، يستطيع عنصر Position ان يحمل عدة قيم مثل : Relative, Absolute, Fixed, Sticky ... ، في Fixed العنصر المطبق عليه هذا الستايل يتموضع في مكانه و يبقى تابثا حتى بعد النزول في الصفحة ( مثال للـ Navbar الخاصة بالموقع حاليا )، خاصية Sticky تقوم بالمثل أيضا مع تغير في الـ Viewport بحيث يستطيع العنصر الخروج عن الـ Viewport على عكس Fixed، لكن الصعوبة هنا تكمن في كل من Relative و Absolute .
العنصر الذي يحمل قيمة Relative يتم الإرتكاز عليه كنقطة مركزية في تموضع عنصر اخر يحمل قيمة Absolute، بحيث في عنصر الـ Absolute ان قمت بإعطائه قيمة : top : 30px، فسيتم تقديم العنصر للأعلى 30px بالإعتماد على المسافة بينه و بين العنصر الآخر الذي يحمل قيمة Relative، يمكن أيضا وضعهما معا فوق بعضهما مع تحديد قيمة z-index من أجل تحديد أي العناصر يجب ان يظهر أولا. تحتاج بعض الوقت من أجل إستيعابها لكن فور ان تقوم بذلك ستعجبك كثيراً و تبدأ في إستخدامها.

إقرأ أيضا : ليس دائما الـ div ... وسوم في الـ HTML ضرورية لا تستخدمها إلا نادراً

- إحترف خواص الكلاسات الوهمية (Pseudo classes) :

الكلاسات الوهمية او الـ Pseudio-classes، الكثيرون كذلك يستهينون بها او لا يستخدمونها كثيراً او ربما لا يستخدمون سوى الـ Hover من بينها، و هي حقا جد مفيدة و تضيف لمسة جد إحترافية خصوصا في إبتكار انيميشن او إبتكار ستايل معين بإستخدام الـ CSS، يتم تعديل او إضافة  كلاس وهمي بإستخدام : selector : psuedo-class{ } ، و يوجد العديد منها مثل after و before اللتان تسمحان لك بإضافة عناصر قبل و بعد عنصر معين مثل إضافة أيقونة قبل عنوان او إضافة ستايل محدد بعده، بالتلاعب قليلا بالـ Positioning كما شرحنا في الفقرة السابقة يمكنك جعل العنصر أسفله أو اعلاه كذلك، يوجد كذلك كلاس :hover الذي يسمح لك بتطبيق ستايل معين اثناء تمرير زر الفأرة على العنصر، يوجد كذلك :active التي تقوم بتغيير الستايل الخاص بالعنصر في الفترة ما بين النقر عليه و إفلات النقر، يوجد كذلك :focus التي يمكنك تحديد ستايل معين عند اختيار احد العناصر مثلا عند اختيار input معين تقوم بتغيير لون الخلفية الخاص به و يعود لحالته عند عدم إختياره ( اشبه بـ focus في الـ jQuery )، أيضا :visited الخاصة بتغيير الستايل الخاص برابط مثلا ان تم النقر عليه مسبقا و يوجد الكثير، قد تبدو بسيطة لكن حقا يمكنك خلق بعض الديكورات و الستايلات في الـ CSS بالإعتماد فقط على هذه الكلاسات الوهمية، عيبها الوحيد انه لا يمكن الوصول إليها بإستخدام الجافاسكربت بطريقة  بسيطة مما يصعب التحكم الكامل فيها أحيانا.

- إحتراف الوصول لهياكل الصفحة :

نستطيع في الـ CSS الوصول لعناصر هيكلة الصفة عن طريق العديد من الطرق أهمها : الوصول إليها من خلال الكلاس بإستخدام .selector ، او الوصول إليها عن طريق الـ id بإستخدام #selector، او الوصول إليها عن طريق عنصر الـ DOM بإستخدام إسمه h1 ،و لا يجب على الوصول أن يكون عشوائيا، ماذا لو كنت تستخدم مثلا <a class='link' href='#'></a>، كيف تصل الى هذا العنصر ؟ بإستخدام الرابط ام الـ DOM؟
الـ DOM ( او Document Object Model ) هو الهيكلة الخاصة بالصفحة التي تتضمن عناصر اب، و عناصر ابن، فمثلا :  <div class='parent'><h1> Hi </h1></div>، هنا الأب هو الـ div الذي يحمل كلاس parent و الإبن هو عنصر h1، في حالة اردت تطبيق ستايل على الـ h1، فهنا يجب ان العب على بعض الأوتار الإحترافية، إن قمت مباشرة في الستايل بتزيين الـ h1 مباشرة دون الوصول إليه عن طريق الـ DOM سيسبب تغيير الستايل لكل عناصر الـ h1 في الصفحة و هذا غير جيد خصوصا ان كنت تستخدم عناصر بنفس الهيكلة و بستايلات مختلفة، يكفي ان اصل إليه عن طريق .parent h1 سيكون أسهل، إن اتبعت نصيحتنا الأولى و إستخدمت احد الـ preprocessors فسيكون الأمر أسهل و سيكون الكود الخاص بك بشكل : .parent { h1 { } } .

إقرأ أيضا : للبرمجة أسرار التعلم، إليك 9 نصائح تجعلك قادرا على إكتساب أي لغة برمجة

- إحترف الـ CSS Presets / CSS Resets :

الـ CSS Resets هي مجموعة من الأكواد الـ CSS التي يجب تطبيقها على أي صفحة ويب او مشروع في البداية من أجل تنسيق الصفحة بهيكلة محددة، لحسن الحظ انك لا تحتاج الى حفظها من أجل كتابتها، يوجد العديد من النسخ الخاصة بالـ CSS Resets ( مثل هذه مثلا ) التي يمكنك إستخدامها، لكن عليك لما إحترافها إذن كانت متوافرة ؟ ذلك عائد لوجود نسخ كثيرة من الـ CSS Resets التي تخدم كل صفحة بطريقة مختلفة لذلك يجب عليك معرفة أي CSS Reset ملائم لصفحتك الخاصة.
الـ CSS Presets تختلف قليلا عن الـ CSS Resets، بحيث في الـ CSS Presets نقوم بتحديد القيم الأولية لعناصر الـ DOM، لنفترض مثلا ان كل عناصر الـ h1 عليها ان تحمل نوع خط محدد، نقوم بتحديدها في الـ CSS Presets بشكل إجمالي بدل تحديدها في كل عنصر h1 في الصفحة، و يكفي حينها تعديل بقية الستايل على كل عنصر حسب ما تريد لاحقا مثل إختيار الألوان، إذ يوجد قياسات CSS يتشاركها الكثير من العناصر و أخرى عكس ذلك، في الـ CSS Presets نقوم بتحديد القيم المشتركة بين كل العناصر لتسهيل تنسيق الصفحة.

- إحترف الـ Media Queries : 

يا رباه، لازالت الـ Queries هذه عائقاً بالنسبة لي لأكون صريحاً معك، و قد لا تكون كذلك بالنسبة للعديدين، في الـ CSS3 يمكننا التحكم في شكل الصفحة من خلال التجاوب عن طريق الـ Media Queries التي نقوم من خلالها بتحديد المقاس الذي يجب على الـ Viewport ( اي الشاشة ) أخذه، في حالة تم التعرف على قياس الشاشة  يتم تعديل الـ CSS الخاص بالصفحة الى ما يعادل الـ CSS الذي قمن بتحديده في قياس الـ Media Query، لذلك نجد العديد من المواقع يختلف شكلها كليا اثناء تصفحها من الموبايل، إن كنت تستخدم إطاراً محددا للتجاوب او الـ Grid أعلاه فهذا جيد، لكن إن اردت حقا صقل التجاوب في صفحة الويب، عليك إحتراف الـ CSS Media Queries .

إقرأ أيضا : َوَدِّع الـ Bootstrap ... إليك إطارات العمل هذه أفضل بكثير من " البوتستراب " بتجربة شخصية

- إحترف الـ File Structuring : 

إنها سنة 2019، لا احد يكتب كود CSS لموقع كامل في ملف CSS واحد، و ذلك لعدة أسباب اهمها تنظيم الستايل و إتاحة تطويره لاحقا، لأن ملفا واحدا CSS لموقع كامل قد يصل الى أزيد من 50.000 سطر، لذلك قبل كل شيئ إحترف الـ File Structuring او هيكلة الملفات.