التمهيد معايير CSS الترميز

قواعد

• مع مسافتين بدلا من علامات (علامة التبويب) - وهذا هو السبيل الوحيد لضمان اتباع نهج ثابت لإظهارها في جميع البيئات.
• عندما يتم تجميع محدد بشكل منفصل على خط محدد.
• من أجل قراءة الرمز، أمام كتلة كل هدفين بيان لإضافة مسافة.
• بيان كتلة هدفين وحده يجب أن تجعل من الرحلة.
• كل البيان هو البيان : بعد أن إدراج مسافة.
• من أجل الحصول على التقرير عن الخطأ أكثر دقة، يجب أن يكون كل بيان سطر منفصل.
• يجب أن تنتهي كل بيان إعلان بفاصلة منقوطة. منقوطة وراء بيان إعلان الأخير هو اختياري، ولكن إذا قمت بحذف منقوطة، قد تكون التعليمات البرمجية الخاصة بك أكثر خطأ.
• لقيمة العقارات مفصولة بفواصل، يجب أن يتم إدراج كل فاصلة في الفضاء (على سبيل المثال، box-shadow ).
• لا rgb() ، rgba() ، hsl() ، hsla() أو rect() وراء القيم الداخلية فاصلة إدراج مسافة. هذه الفوائد من عدد وافر من قيم السمة (أيضا كلا فاصلة والفضاء) للتمييز بين عدد وافر من قيم الألوان (فقط فاصلة، بدون مسافات).
• لقيمة سمة اللون أو المعلمة حذف أقل من 1 أمام عشري 0 (على سبيل المثال، .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
}

/* Good 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;
}

أجل إعلان

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

1. وضع
2. نموذج الصندوق
3. مطبعي
4. بصري

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

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

قائمة كاملة من الخصائص وترتيبها الرجوع إلى عطلة .

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

لا تستخدم @import

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

• الاستخدام المتعدد <link> العنصر
• بواسطة ساس أو أقل مثل CSS المعالج ملفات CSS متعددة وجمعها في ملف واحد
• من خلال القضبان، شريطة جيكل أو نظام آخر المغلق ملف ميزة دمج

الرجوع إلى المادة ستيف Souders لمعرفة المزيد من المعرفة.

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

استفسارات وسائل الإعلام (الاستعلام وسائل الإعلام) موقف

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

.element { ... }
.element-avatar { ... }
.element-selected { ... }

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

مع سمات البادئة

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

في تيكست مايت، وذلك باستخدام نص → تحرير كل سطر في الاختيار ( ^ ⌘A). في نص سامية 2، استخدم اختيار → أضف السطر السابق (^ ⇧ ↑ ) واختيار → إضافة سطر التالي (^ ⇧ ↓ ).

/* Prefixed properties */
.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 متجهة العناصر فقط على رأس مجموعة والهوامش السفلية (هامش) قيمة، لذلك، عند الضرورة، وتغطي فقط هاتين القيمتين يمكن أن يكون. الاستخدام المفرط شكل قصير من إعلان الملكية يمكن أن يؤدي إلى رمز مربكة، وقيمة الممتلكات وسيجلب التداخل غير الضروري التسبب في آثار جانبية غير متوقعة.

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

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

أقل وساس متداخلة

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

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

مذكرة

يتم كتابة رمز والحفاظ عليها من قبل الناس. الرجاء التأكد من أن التعليمات البرمجية الخاصة بك يمكن أن يكون تصف ذاتيا، وعلق جيدا وسهلة لفهم الآخرين. يمكن تعليقات التعليمات البرمجية جيدة ينقل السياق والغرض من التعليمات البرمجية. ببساطة لا نكرر مكون أو اسم الفئة.

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

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

اسم الفئة

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

ساس وأقل لتسمية متغير أيضا قراءة جميع المواصفات المذكورة أعلاه.

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

منتخب

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

مزيد من القراءة:

• الطبقات نطاق المغلق مع البادئات
• وقف شلال

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

منظمة كود

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

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

محرر تكوين

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

• مسافتين بدلا من علامات التبويب (لينة علامة التبويب التي هو ممثل أحرف الجدولة مع المسافات).
• عند حفظ الملف إلى إزالة المسافات الزائدة.
• تعيين ترميز الملف إلى UTF-8.
• في نهاية الملف إضافة سطر فارغ.

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