إن كنت مصممًا، فلا شك بأنك تعاملت عدة مرات من قبل مع صفحات تنسيق 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)، والمخاليط (mixins) والدوال (functions) لتنظيف ملف CSS الخاص بك بشكل إضافي وتجنب التكرار.
تعدُّ CSS أداةً مهمة جدًا لتطوير طريقة عرض موقعك الإلكتروني. هذه المرئيات هي ما تصنع شعارك الخاص وهويتك، وهي ما يؤثر في تجربة المستخدم UX الخاصة بموقعك.
ولكن، كلما زادت القوة، زادت المسؤولية. تذكر بأن تبقي ملف CSS الخاص بك منظمًا، بالضبط كإبقاء الخزانة مرتبة مهمٌ جدًا لتستطيع إيجاد قميصك المفضل بسهولة، فإن إبقاء ملف CSS منظمًا سوف يساعد على تنفيذ أفكار التصميم الفورية بدون أي تأخير.
ترجمة -بتصرف- للمقال How to avoid chaos in your style sheets لصاحبه Eric An
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.