مجلة كلية الهندسة المعلوماتية

< بيشمركه مراد >

إنه حقاً من السهل أن تجد نفسك مستغرباً من الطبيعة الفوضوية لشيفرة الـCSS التي تكتبها، غالباً يكون ذلك نتيجة لكتابة الشيفرة بشكل غير متقن من البداية, أو أن الشيفرة تكون عبارة عن هاكات أو شيفرات مجموعة من هنا وهناك.” مهما يكن السبب , لا يجب أن يكون كذلك !!!”.

الكتابة بوضوح وبشكل منظم هو أحد أسباب الحصول على شيفرة بسيطة ومتينة وقابلة للصيانة بشكل سهل فيما بعد، في هذه المقالة سوف نستعرض 10 ملاحظات أو تنبيهات من أجل تسريع عملية كتابة الشيفرة وجعلها ذات هيئة مقبولة واحترافية.

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

Resets and overrides
Links and type
Main layout
Secondary layout structures
Form elements
Miscellaneous

2- العنوان , التاريخ  والتوقيع:
اجعل الأخرين يعرفون من كتب هذه الشيفرة وكيف يستطيعون التواصل مع الكاتب في حال وجود أسئلة حول الشيفرة، هذه مفيدة بشكل خاص عند تصميم القوالب أو الثيمات.

انتظر دقيقة …….ما هو المقصود بـ “Swatch Color” ؟
خلال السنوات الماضية وجدت انه يتم إضافة قائمة بسيطة  بالألوان الشائع استخدامها في الملف الخاص بالشيفرة ,وهذا مفيد بشدة أثناء ابتداء عملية التطوير ومن ثم التحرير لاحقاً، هذه الطريقة تغنيك عن إضاعة وقتك في فتح برنامج الفوتوشوب من أجل تعرف الرمز الخاص باللون المطلوب, أو الذهاب إلى إحدى المواقع الخاصة بإعطاء رموز الألوان استناداً لشكلها أو هيئتها .

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

4- استخدم طرق مفيدة من أجل التسمية :
من الملاحظ أنك عندما تقوم بالتصريح عن زوج من معرفات الأعمدة Columns ID’S  فإنك تسميهم col-alpha and col-beta ، لما ذلك!؟ تستطيع أن تسميهم تسميات مثل col-right and col-left،  لو فرضنا أنك عملت بذلك , وفي السنة القادمة احتجت أن تعدل التصميم وأن تنقل البلوكات الموجودة بالجهة اليسرى للجهة اليمنى مع الحفاظ على الأسماء السابقة , تصور ما سيحدث ؟!!!!!، مع العلم أنك غير مضطر لتغيير أسماء المعرفات في صفحات الـHTML  الخاصة بالتصميم، لذا ففي هذه الحالة فأنت ستواجه مشاكل جمّة من حيث أن اسم المعرف سوف يدل على الجهة اليسرى فرضاً وهو موضوع في الجهة اليمنى .

من أهم مميزات الـ CSS هو أنه بإمكانك أن تفصل التصميم عن المحتوى ,حيث أنه يمكنك أن تقوم بإعادة تصميمك بالكامل من خلال تحرير شيفرة الـ CSS فقط من دون اللجوء إلى تحرير وفتح ملفات الـ HTML . وهذا يدخلنا في أروقة عالم الـ Usability and Accessibility   والتي هي سمة أساسية من سمات عالم Web2.0 and Web3.0.
لذا ” لاتقم أبداً بالقضاء على مميزات الـ CSS من خلال تسمية العناصر بأسماء محدودة وغير مدروسة “.

نصيحة: قم بتسمية العناصر الموجودة لديك استناداً لكون العناصر ليس استناداً لأشكالهم أو مظهرهم .
مثال:
comment-blue أقل طلاقة من.comment-beta
و  post-largefontأكثر تحديداً من .post-title

5- استخدم الواصلات  بدلاً عن الخط السفلي :
المتصفحات القديمة تملك نوع من العداء مع الخطوط السفلية في لغة الـ CSS أو أنها لا تقوم بدعمها في أسوأ الأحوال، من أجل الحصول على دعم كامل وراحة من اجل البرمجة قم باستخدام الواصلات(-) بدلاً من الخط السفلي ( _ ) كما في المثال :  #col-alpha عوضاً  #col_alpha.

6-لا تقم بتكرار نفسك :
قم بإعادة استخدام الخصائص في حال الإمكانية من خلال تجميعها في مكان واحد عوضاً عن إعادة تعريفها مرة أخرى.

إذا كانت العناصر H1 و H2, تملك نفس حجم الخط واللون والهوامش، فعليك أن تجمعهم كلهم باستخدام الفاصلة كما في الصورة:

يجب عليك أيضاً استخدام الاختصارات. دائماً قم بالبحث عن فرص من أجل تجميع العناصر مع بعضها واستخدم قدر الإمكان اختصارات للتصريح ,حيث أنك تستطيع تنفيذ التالي :

من خلال هذه الصيغة فقط :

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

في الصورة السابقة تم إسناد القيمة 1em إلى الهامش العلوي والسفلي والقيمة 0  إلى الهامش الأيمن والأيسر.

7- اعمل على الحصول على ملف صغير الحجم:
باستخدام القواعد الآنفة الذكر ,تستطيع بشكل حقيقي التقليل من حجم الملف الخاص بالتصميم، ملف أصغر من حيث الحجم,يعني ملف أسرع من حيث التنفيذ, يعني أسهل من حيث الصيانة والتحديث. دائماً استغن ِ عن الأمور الزائدة التي لا تحتاجها و قم بتعزيز شيفرتك بعملية التجميع للعناصر المتشابهة .

ملاحظة أخرى من أجل الحصول على ملف CSS خفيف لا تقم بتحديد وحدة مساحة من أجل القيمة صفر ,لأنه إذا كان لديك قيمة الهامش تساوي الصفر مثلاً فأنت لست مضطر لأن تكتب مايلي :0px  أو 0em , لأن الصفر هو صفر بغض النظر عن وحدة القياس .

8- اكتب شيفرتك بشكل أساسي من أجل Gecko ومن ثم قم بتعديله من أجل Webkit  و Internet Explorer :
احفظ نفسك من المتاعب والمشاكل من خلال كتابة شيفرتك بشكل أساسي من أجلGecko(Firefox,Netscape,Flock,Camino)  إذا كانت شيفرة الـ CSS تعمل بشكل جيد مع حزمة الـ Gecko  سوف تكون مشاكله أقل مع الـ Internet Explorer والـ Webkit(Safari,Chrome).

9- التحقق من صحة الشيفرة :
استخدم الأداة المجانية المقدمة من منظمة W3C والتي تسمى W3C’s free validator . إذا وصلت لنقطة اللارجعة في الشيفرة الموجودة لديك وواجهتك مشاكل عديدة من حيث أن الشيفرة لا تؤدي العمل المطلوب منها، ما عليك إلا أن تستخدم أداة التحقق من شيفرة الـ CSS المقدمة من المنظمة العالمية للمعايير القياسية من أجل تصميم صفحات الوييب التي سوف تساعدك جداً في عملية البحث عن الأخطاء وتصحيحها .

10- احفظ البيت نظيفاً:
أي بمعنى آخر قم بفصل كل شيفرة عن بعضها البعض حسب المتصفح الذي سوف يتم عرض الصفحات أو التصميم من خلالها حيث تعبتر هذه الطريقة مفيدة جداً من أجل تجنب التضاربات بين المتصفحات ,حيث تستطيع بناء شيفرة CSS  عامة من أجل متصفح Firefox والقيام بتعديلات في شيفرتك من أجل متصفح الـInternet Explorer  ووضعها في ملف منفصل تستطيع تسميته باسم يدل عليه مثال على ذلك : ie6-style , مع الأخذ بعين الاعتبار مسألة تضمين شيفرات Java Script  خاصة بها أو Server-Side code  أو تعليقات شرطية .

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

مترجم عن:  Jeff Couturier