كيف نهتم بجودة كود CSS؟

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

في هذه المقالة سنقوم بوصف الأدوات والممارسات الجيدة التي نستخدمها في Codest، بحيث تأتي المشاريع التي نقدمها لعملائنا دائماً بأعلى جودة.

المعالج المسبق ل scss

كتابة أكواد CSS كافية للتطبيقات الصغيرة. عند التعامل مع المشروعفمن المهم ألا تتكرر الشيفرة البرمجية لكائنات HTML المتشابهة لمرات عديدة في أماكن مختلفة. يساعدنا المعالج المسبق لـ SCSS على استخدام المتغيرات والدوال وما يسمى بـ mixins، مما يجعل شفرتنا أكثر تنظيماً ونظافة.

تحتوي القائمة التالية على مثال لمزيج يتيح لك تحقيق مبدأ "لا تكرر نفسك":

@ ميكسين فليكسن-سنتر {
  العرض: مرن;
  محاذاة العناصر: المركز;
  تبرير المحتوى: المركز;
}

باستخدام هذا المزيج يمكننا كتابة الشيفرة البرمجية:

.البند أ-أ {
  العرض: مرن;
  محاذاة العناصر: في المنتصف;
  تبرير المحتوى: في المنتصف;
  ...
}

.العنصر-ب {
  العرض: مرن;
  محاذاة العناصر: المركز;
  تبرير المحتوى: في المنتصف;
  ...
}

بطريقة أكثر إيجازاً ونظافة:

.البند أ-أ {
  @ تضمين المركز المرن;
}

.البند-ب {
  تضمين المركز المرن;
}

بيم المنهجية

منهجية BEM عبارة عن اصطلاح تسمية بسيط يسمح لك بإنشاء كود CSS معياري وقابل لإعادة الاستخدام وقابل للتطوير. كجزء من Codest، نستخدمها لتصميم مكونات VueJS. نحاول تنظيم شيفرتنا بطريقة تجعل ملف .scss واحد، يحتوي على كتلة واحدة، يتم تعيينه لمكون واحد .vue. يمكن تعيين تصميم مكوّن v-page-header.vue كمثال على ذلك.

.رأس الصفحة {
  &___العنوان {
    حجم الخط: 2.0ريم;
    اللون: $color-black;
    الخلفية: $color-أبيض;
  }

  &___الشعار {
    الخلفية: url('/images/background.png') بدون تكرار 0 0 0;

    &---رأسي {
      الخلفية: url('/images/background-2.png') بدون تكرار 0 0 0;
    }
  }
}

فئات المرافق

أثناء العمل بمنهجية BEM، لاحظنا أنه من أجل إجراء عملية بسيطة جدًا - على سبيل المثال، جعل جزء من النص غامقًا - علينا اختراع أسماء فئات CSS مصطنعة:

.رأس الصفحة {
  &__-عنصر مكرر {
    وزن الخط: غامق;
  }
}

وللقضاء على هذه المشكلة، استلهمنا من فئات "الأدوات المساعدة" المستخدمة في الشيفرة المصدرية لإطار عمل Bootstrap. وبفضل ذلك، يمكننا استخدام النوع التالي في شيفرة قوالب Vue/HTML في شيفرة قوالب Vue/HTML:

<div>
  <span class="text-bold">المحتوى</span>
</div>

تحليل ثابت للرمز

لست بحاجة إلى إقناع أي شخص بأن العمل على كود شفاف ويحتوي أيضًا على هياكل متسقة يسمح لك بتعديل وإضافة وظائف جديدة بسهولة. من المهم أن يتمكن أي شخص يبدأ العمل على جزء موجود من التعليمات البرمجية من العثور عليه بسرعة كبيرة. ومع ذلك، في كثير من الأحيان يكون للمبرمجين عاداتهم الخاصة التي قد لا يفهمها الآخرون الفريق الأعضاء. لهذا السبب من المهم جداً استخدام الأدوات التي تسمح لك بأتمتة فحص الشيفرة البرمجية. كجزء من Codest، نستخدم أداة SCSS-LINT لتحليل شيفرة SCSS تلقائيًا، والتي تحتوي على مجموعة من القواعد المحددة مسبقًا. قد تكون إحدى القواعد الأكثر إثارة للاهتمام والأكثر تقييدًا التي نستخدمها في مشاريعنا هي قاعدة PropertySortOrder، والتي تضمن الترتيب المناسب للسمات داخل فئة SCSS واحدة.

تخيل الجزأين التاليين من كود SCSS:

.item-a {
    حجم الخط: 14 بكسل;
    اللون: #FF00FF;
    الهامش الأعلى: 10 بكسل;
    وزن الخط: غامق;
    لون الخلفية: #00FFFF;
    الحشو: 5 بكسل;
    الهامش السفلي: 10 بكسل;
}

.item-b {
    حجم الخط: 18 بكسل;
    الحشو: 3 بكسل;
    لون الخلفية: #00FFFF;
    الهامش السفلي: 4 بكسل;
}

و:

.item-a {
  الهامش: 10 بكسل 0;
  الحشو: 5 بكسل;
  لون الخلفية: #00FFFF;
  اللون: #FF00FF;
    حجم الخط: 14 بكسل;
    وزن الخط: غامق;
}

.البند-ب {
  الهامش السفلي: 4 بكسل;
  الحشو: 3 بكسل;
  لون الخلفية: #00FFFF;
    حجم الخط: 18 بكسل;
}

كلا المقطعين صحيحان، لكن المقطع الثاني أكثر قابلية للقراءة. يتم تجميع السمات ذات الصلة مثل الهوامش والبطانات معًا.

الملخص

من الصعب في جمل قليلة تقديم جميع المعلومات حول تنظيم كود CSS في تطبيقات الويب الواسعة التي ننشئها باستخدام إطار عمل Codest. نشجع جميع قرائنا على ترك تعليقات حول الأدوات والممارسات الجيدة التي تستخدمها في مشاريعك الخاصة.