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 ثم تبدأ في هندسة المكونات المتواجدة داخل هذا العنصر الأب، في الأخير ستحصل على التناسق و إلتئام كل العناصر على كل الشاشات.

- تعلم الـ 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 من أجل تحديد أي العناصر يجب ان يتضح أولا. تفتقر بعض الوقت من أجل إستيعابها لكن فور ان تقوم بهذا ستعجبك كثيراً و تبدأ في إستخدامها.
- إحترف خواص الكلاسات الوهمية (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 ،و لا يجب على الوصول أن يكون عشوائيا، ماذا لو كنت تستخدم مثلا ، كيف تصل الى ذلك العنصر ؟ بإستعمال الرابط ام الـ DOM؟
الـ DOM ( او Document Object Model ) هو الهيكلة الخاصة بالصفحة التي تحتوي مكونات اب، و عناصر ابن، فمثلا :   Hi ، هنا الأب هو الـ div الذي يحمل كلاس parent و الإبن هو عنصر h1، في حالة اردت تنفيذ ستايل على الـ h1، فهنا يجب ان العب على بعض الأوتار الإحترافية، إن قمت على الفور في الستايل بتزيين الـ h1 مباشرة دون الوصول إليه بواسطة الـ DOM سيسبب تغيير الستايل لكل عناصر الـ h1 في الصفحة و هذا غير جيد خصوصا ان كنت تستخدم مكونات بنفس البناء والتركيب و بستايلات مختلفة، يكفي ان اصل إليه عن طريق .Parent h1سيكون أسهل، إن اتبعت نصيحتنا الأولى و إستخدمت احد الـ preprocessors فسيكون الأمر أكثر سهولة و سيكون الكود الخاص بك على نحو : .Parent  h1    .

- إحترف الـ 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 .

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

إنها سنة 2019، لا احد يكتب كود CSS لموقع كامل في ملف CSS واحد، و هذا لعدة أسباب اهمها مركز الستايل و إتاحة تطويره لاحقا، لأن ملفا واحدا CSS لمقر كامل قد يصل الى أزيد من 50.000 سطر، لذلك قبل كل شيئ إحترف الـ File Structuring او تشييد وتركيب الملفات.
اي مشروع برمجي يجب تقسيم ملفاته الى أقسام، في الـ CSS ينصح بتقسيم الملفات على شكل مجلدين، المجلد الأول يحمل إسم configs و هو الذي يحمل الـ CSS Resets و الـ Presets للمشروع، بينما مجلد اخر يحمل إسم Parts يضم الـ CSS الخاص بكل قسم section من أقسام الصفحة ( مثلا ملف navbar.Css و section-news.Css ... )، ملف رئيسي يحمل إسم main.Css او style.Css يقوم بتجميع كل هذه الملفات بواسطة الـ @import، إن كنت تستخدم احد مدراء الحزم تهيئة الويب مثل NPM فالأمر يسير، و سيزداد يسراً إن كنت تستخدم احد الـ Preprocessors .

- تعلم تحديد الخواص لكل عنصر :

و نختم معك بنصيحتنا الأخيرة لك، تذكر ان كل عنصر يملك خواص محددة به توجب تحديدها مثل الـ width و الـ height لتحديد أبعاده، و أيضاً الـ padding و الـ margin لتحديد مسافته داخليا و خارجيا عن المكونات الأخرى، تذكر ان تجمع الـ Selectors التي يجب تحديدها دائما لكل عنصر و إبدأ بها ستايل عنصرك المخصص، قد تعتقد ان الشأن ليست له ضرورة احيانا حين يتخد العنصر مكانه السليم، إلا أن حين يتم إضافة عناصر اخرى او تحويل احجام الشاشة فذلك العنصر سيقفز من مكانه الى مكان اخر او يزداد حجمه و ما الى ذلك، فتذكر دائما ان تقوم بتحديد كل خصائصه قبل المرور لستايل عنصر آخر.