معايير الترميز CSS في Bootstrap

النحو

• استخدم مسافات بسيطة بدلاً من الرمز tab -- هذا هو الطريقة الوحيدة التي تضمن الحصول على عرض متسق في جميع البيئات.
• عند تجميع المحددات، ضع المحددات الفردية على سطر منفرد.
• لتحسين قراءة الكود، أضف مسافة بعد المفتاح المفتوح للبيانة.
• المغلق للبيانة يجب أن يكون على سطر منفرد.
• كل بيانة من بيانات الاعلان : بعد
• للحصول على تقارير أخطاء أكثر دقة، يجب أن تكون كل بيانة على سطر منفرد.
• يجب أن تنتهي كل بيانة بالكومياس. الكومياس في بيانة الاعلان الأخيرة ليست ضرورية، ولكن إذا تم تجاهلها، قد يصبح الكود أكثر عرضة للخطأ.
• للخصائص المفصولة بالكومياس، يجب إضافة مسافة بعد كل كومياس (مثل،box-shadow).
• لا تضيف rgb()،rgba()،hsl()،hsla() أو rect() القيمداخلأضف مسافة بعد علامة الاستفهام في قائمة الخصائص. هذا يساعد في التمييز بين قيم الخصائص المتعددة (تتضمن علامات الاستفهام والفضاءات) وقيم الألوان المتعددة (تتضمن علامات الاستفهام فقط، دون فضاءات).
• للخصائص القيم أو المعلمات اللونية، يمكن تجاهل الصفر قبل الأعداد الصغيرة 1 (مثل،.5 بديلاً عن 0.5;-.5px بديلاً عن -0.5px).
• يجب أن تكون القيم البايت عشري كاملة صغيرة، مثل،#fff، لأن الحروف الصغيرة سهلة التمييز أثناء مراجعة المستند، لأن شكلها أكثر تمييزًا.
• استخدم قيم البايت عشري المختصرة قدر الإمكان، مثل، باستخدام #fff بديلاً عن #ffffff.
• أضف قوالب مزدوجة للخصائص في المحدد، مثل،input[type="text"].هي اختيارية في بعض الحالات فقط، ولكن، من أجل توحيد الكود، يُنصح بوضعها في قوالب مزدوجة.
• تجنب تحديد وحدة للقيم 0، مثل، باستخدام margin: 0; بديلاً عن margin: 0px;.

لديك أي استفسارات حول المصطلحات المستخدمة هنا؟ يرجى الرجوع إلى كيفية كتابة الجداول - بنية الجملة.

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* CSS جيد */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

ترتيب التصريح

يجب أن تكون التصريحات ذات الصلة مجمعة وترتبها وفقًا للترتيب التالي:

تحديد الموقع

نموذج الصندوق

خط النص

مرئي

بسبب تحديد الموقع (positioning) يمكن إزالة العنصر من تدفق الوثيقة العادي ويمكنه أيضًا تغطية النمذجة (box model) للنمط، لذا ت排名 في المقدمة. النمذجة ت排名 ثانيًا لأنها تحدد حجم المكون وموقعه.

خصائص أخرى تؤثر فقط على المكونداخلية (داخلية)أو لا تؤثر على مجموعة الخصائص الأولى، لذا ت排名 في النهاية.

قائمة الخصائص الكاملة وترتيبها يمكن العثور عليها في التقديم.

.declaration-order {
  /* تحديد الموقع */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* نموذج الصندوق */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* خط النص */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* مرئي */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* غير متناسق */
  opacity: 1;
}

لا تستخدم @import

مع <link> العلامة المميزة مقارنة بـ@import التعليمات أبطأ بكثير، ليس فقط أنها تزيد من عدد الطلبات الإضافية، بل قد تؤدي إلى مشاكل غير متوقعة. طرق بديلة تتضمن ما يلي:

• استخدام متعدد <link> العنصر
• من خلال Sass أو Less مثل معالج CSS المسبق
• من خلال تقديم CSS ملفات الجمع من خلال Rails، Jekyll أو نظام آخر

يرجى الرجوع إلى مقالة Steve Soudersللإطلاع على المزيد من المعلومات.

<!-- استخدم عناصر الرابط -->
<link rel="stylesheet" href="core.css">
<!-- تجنب @imports -->
<style>
  @import url("more.css");
</style>

موقع استعلام وسائل الإعلام (Media query)

ضع استعلامات وسائل الإعلام قرب القواعد ذات الصلة قدر الإمكان. لا تجمعهم في ملف نمط واحد أو في نهاية المستند. إذا قمت بفصلهم، سيتم نسيانهم في المستقبل. يُقدم هنا مثال نموذجي.

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

الخصائص المسبقة

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

في Textmate، استخدم نص → تعديل كل سطر في التحديد (⌃⌘A). في Sublime Text 2، استخدم تحديد → إضافة سطر سابق (⌃⇧↑) و تحديد → إضافة سطر جديد (⌃⇧↓).

/* خصائص مسبقة */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

بيانات النص الأحادي

بالنسبة لـيحتوي فقط على بيانة واحدةالنمط، من أجل سهولة القراءة والتعديل السريع، يُنصح بوضع الجمل في نفس السطر. بالنسبة للنمط الذي يحتوي على بيانات متعددة، يجب أن يتم تقسيم البيانات إلى سطور متعددة.

العناصر الرئيسية لفعل ذلك هي لتحديد الأخطاء -- على سبيل المثال، مسبح CSS يشير إلى أن هناك خطأ في الصيغة في السطر 183. إذا كان هناك بيانات واحدة على سطر واحد، لن تتجاهل هذا الخطأ؛ إذا كان هناك بيانات متعددة على سطر واحد، يجب عليك تحليله بعناية لتجنب فقدان الأخطاء.

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

خصائص اختصار

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

• padding
• margin
• font
• background
• border
• border-radius

في معظم الحالات، لا نحتاج إلى تحديد جميع القيم للخصائص المختصرة. على سبيل المثال، عناصر التهيئة في HTML تحتاج فقط إلى تعيين قيم الهوامش العلوية والسفلية (margin)، لذا، في الحاجة، يمكن تغطية هاتين القيمتين فقط. الاستخدام المفرط للخصائص المختصرة يمكن أن يؤدي إلى فوضى في الكود، ويمكن أن يؤدي إلى تغطية القيم بشكل غير ضروري مما يؤدي إلى تأثيرات غير متوقعة.

هناك مقال رائع في MDN (مجتمع مطوري موزيلا) عنخصائص اختصار للأشخاص الذين لا يعرفون جيدًا خصائص البيان الصغير و سلوكياتها، مفيد جدًا.

/* مثال سيء */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}
/* مثال جيد */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

التغليف في Sass وLess

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

// بدون التغليف
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// مع التغليف
.table > thead > tr {
  > th { … }
  > td { … }
}

التعليقات

الشيفرة مكتوبة ومحافظة من قبل البشر. تأكد من أن شيفرةك قابلة للشرح والتعليق الجيد والفهم من قبل الآخرين. يمكن للتعليقات الجيدة للـ code توضيح العلاقات الـ contextية وأهداف الشيفرة. لا تعيد تكرار أسماء المكونات أو class.

بالنسبة للتعليقات الطويلة، تأكد من كتابة جملة كاملة؛ بالنسبة للتعليقات العامة، يمكنك كتابة عبارات مختصرة.

/* مثال سيء */
/* رأس النموذج */
.modal-header {
  ...
}
/* مثال جيد */
/* عناصر التغليف لـ .modal-title و .modal-close */
.modal-header {
  ...
}

تسمية class

• يمكن أن تحتوي أسماء class فقط على الأحرف الصغيرة والشرطة (dashe) (ليست النقاط السفلية، ولا النمط الكوبي). يجب استخدام الشرطة في تسمية class المتعلقة (مثل المساحة الاسمية) (على سبيل المثال،.btn و .btn-danger).
• تجنب التعميم الزائد في التخريفات..btn يعني button، ولكن .s لا يمكن أن تعبر عن أي معنى.
• يجب أن تكون أسماء class قصيرة قدر الإمكان ومفهومة.
• استخدم الأسماء المفهومة. استخدم الأسماء المنظمة أو واضحة الأهداف، لا تستخدم الأسماء التعبيرية (presentational).
• استخدم الـ parent class أو class الأساسية (base) كـ prefix للـ class الجديدة.
• استخدام .js-* استخدم class لتحديد السلوك (مقابل النمط) ولا تدخل هذه class في ملفات CSS.

في تسمية المتغيرات في Sass وLess يمكن الاستعانة بالنماذج المذكورة أعلاه.

/* مثال سيء */
.t { ... }
.red { ... }
.header { ... }
/* مثال جيد */
.tweet { ... }
.important { ... }
.tweet-header { ... }

قواعد الاختيار

• استخدم class للعناصر العامة لتحسين أداء التجميع.
• تجنب استخدام قواعد الخصائص للعناصر التي تظهر بشكل متكرر (على سبيل المثال،[class^="..."]()). أداء المتصفح سيؤثر هذه العوامل.
• يجب أن تكون القاعدة مختصرة قدر الإمكان، وتقيد عدد العناصر التي تشكل القاعدة، وتفضل عدم تجاوز 3.
• فقطفي الحاجة إلى ذلك فقط قم بتحديد class داخل العنصر الأمامي الأقرب (بمعنى اختيار القاعدة الوراثية) (على سبيل المثال، عدم استخدام class مسبقة بالأحرف - Präfixes تشبه المساحة الاسمية).

قراءة متعمقة:

• حدد كلاسات CSS باستخدام Präfixes
• توقف عن التدرج

/* مثال سيء */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* مثال جيد */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

تنظيم الكود

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

/*
 * عنوان قسم العنصر
 */
.element { ... }
/*
 * عنوان قسم العنصر
 *
 * في بعض الأحيان قد تحتاج إلى تضمين سياق اختياري للعنصر كله. قم بذلك هنا إذا كان مهمًا بما يكفي.
 */
.element { ... }
/* مكون فرعي سياقي أو محدث */
.element-heading { ... }

إعدادات المحرر

ضبط محرر الخاص بك وفقًا للإعدادات التالية لتجنب التباينات الشائعة في الكود

• استخدام مسافاتين فارغتين بدلاً من علامة التبويب (soft-tab، أي استبدال علامة التبويب بالمسافات).
• أثناء حفظ الملف، قم بإزالة الرموز الفارغة في نهاية الملف.
• إعداد ترميز الملف على UTF-8.
• أضف سطرًا فارغًا في نهاية الملف.

يرجى مراجعة المستندات وأضف هذه معلومات التكوين إلى .editorconfig في ملف. على سبيل المثال:مثال .editorconfig في Bootstrap. لمزيد من المعلومات، يرجى الرجوع إلى عن EditorConfig.