كيفية تجنب الفوضى في صفحات تنسيق CSS الخاصة بك

إن كنت مصممًا فلا شك بأنك تعاملت عدة مرات من قبل مع صفحات تنسيق CSS، وربما قد سمعت زملاءك يتحدثون عن مدى أهميتها في تنسيق المواقع، أو تقليل وقت تحميل الصفحة، أو توفير الوقت على المطورين. (فهي بالتأكيد أقل تعقيدًا من تنسيق كل صفحة على حدة في شيفرة HTML).

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

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

1. واكب الصيحة- استخدم إطارات العمل (Frameworks)

تمامًا كما توضح رموز الموضة انطباعًا عن ما سيتوفر من صيحات هذا الموسم، فإن الصيحات التقنية تؤثر على تنسيق آلاف المواقع، كيف ذلك؟

ينشئ وينشر مطورو الويب "إطارات العمل"، وهي مجموعة من القوانين للعناصر المشتركة في الموقع؛ حيث أن هذا يعطي المطورين نقطة انطلاق لتصميم الموقع.

بإمكان إطارات العمل"Frameworks" أن تساعد على الحصول على موقع بشكل لائق قابل للاستخدام بسرعة، تخيل مثلًا أن تكون واثقًا من أنك ستبدو رائعًا بارتدائك لأي شيء على الرف في متجر للملابس الأنيقة، لذلك لا ترغب لموقعك بأن يكون غريبًا كارتدائك لقميصٍ أخضر فاقع مع حذاء أرجواني.

إطار العمل هو قاعدة جديرة بالثقة، ولكن لا يزال عليك الاختبار، قم بتعديل الألوان قليلًا والخطوط... إلخ وما يدريك؟ ربما ستصبح صفحات النسق الخاصة بك الإطار الأكثر شهرة.

في النهاية، من كان يظن بأن سراويل الجينز قد تعود مجددًا؟ أو أن تصبح صيحة؟ أليس كذلك؟

2. اسعَ في سبيل البساطة

ستجد بأنه كلما كبر الموقع سوف تحتاج لتطوير قائمة طويلة جدًا من العناصر المختلفة وقواعد CSS، وبعض هذه القواعد قد تتداخل أو تتقاطع في بعض الأحيان (في هذه الحالة سوف تتفوق القاعدة الأكثر تفصيلًا)، وقد تضطر لعمل شيفرة أكثر مما كنت تتوقع خصوصًا باعتبار التغيرات المتعددة التي تحتاجها لقاعدةٍ ما لمتصفحات وأحجام شاشة مختلفة.

سرعان ما ستشعر كأنك تسبح في برك من شيفرات CSS، وتصارع من أجل إيجاد القاعدة المطلوبة للقسم المطلوب الذي تريد تعديله، ومن الجيد أن تتأكد قبل إضافتك لقاعدة تنسيق جديدة؛ فقد تُغنيك قاعدةٌ موجودة مسبقًا ولا تحتاج لأي إضافة.

3. قم ببناء حياتك

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

• حافظ على المسافات: حفاظك على التباعد بين القواعد بداخل البيانات في ملفك يجعلها أسهل في القراءة.
• استخدم الدلالات أو أسماء المعرفات أو الأصناف (class/id names) المألوفة: بدلًا من استخدام اسم صنف مثل: bottom_menu، حاول أن تستخدم أسماء الوسوم الدلالية مثل: footer، أما عندما يكون لديك صورة في قسم الاتصال "contact"، تأكد من استخدامك للصنف في الصورة مثل: contact_image.
• طبِّق مبدأ DRY (ابتعد عن التكرار): أنت ترغب عادةً في تكرار الشيفرة الخاصة بك ولو قليلًا. هل ترى بأن التنسيق "background-color: #000" متكررًا في ملف CSS الخاص بك؟ فكر بكتابة هذا التنسيق مرة واحدة بدلًا من التكرار، واستخدم عدة محددات (selectors) على التنسيق الواحد.
• اختر ترتيبك باستخدام هذه الأدوات: شغل ملف CSS الخاص بك من خلال CSS Lint أو W3C، سوف يساعدك هذا في تحليل ملف CSS الخاص بك بشكل صحيح وتحديد مناطق الخطأ، وتعتبر أدوات المطور (developer tools) الموجودة في متصفح الويب مفيدة جدًا في تحديد عناصر معينة في موقعك الإلكتروني واستخدام المنطقة كحقل تجارب لاختبار تنسيقات وأوضاع مختلفة.

4. تخطى مرحلة الأساسيات

إن كنت تملك بعض مهارات البرمجة فبإمكانك استخدام خيارات CSS متقدمة أكثر مثل (SASS) أو (LESS)، فمع هذه الخيارات التي تسبق المعالجات (pre-processors) بإمكانك الاستفادة من خيارات برمجة أكثر تعقيدًا كالمتغيرات (variables)، والتشعبات (nesting)، والمخاليط (mixings) والدوال (functions) لتنظيف ملف CSS الخاص بك بشكل إضافي وتجنب التكرار.

تعدُّ CSS أداةً مهمة جدًا لتطوير طريقة عرض موقعك الإلكتروني، وهذه المرئيات هي ما تصنع شعارك الخاص وهويتك، وهي ما يؤثر في تجربة المستخدم UX الخاصة بموقعك.

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

المصدر