بغض النظر عن عدد الأشخاص الذين يعملون في نفس المشروع، تأكد من أن كل سطر من التعليمات البرمجية يبدو وكأنه مكتوب بواسطة نفس الشخص.
1. استخدم مسافتين بدلاً من علامات التبويب - هذه هي الطريقة الوحيدة لضمان العرض المتسق في جميع البيئات.
2. يجب وضع مسافة بادئة للعناصر المتداخلة مرة واحدة (أي مسافتين).
3. لتعريف السمات، تأكد من استخدام علامات الاقتباس المزدوجة وعدم استخدام علامات الاقتباس المفردة مطلقًا.
4. لا تضف شرطة مائلة لاحقة إلى عنصر الإغلاق الذاتي - تشير مواصفات HTML5 بوضوح إلى أن هذا أمر اختياري.
5. لا تحذف علامة الإغلاق الاختيارية
<!DOCTYPE html> <أتش تي أم أل> <الرأس> <title>عنوان الصفحة</title> </الرأس> <الجسم> <img src="images/company-logo.png" alt="الشركة"> <h1 class="hello-world">مرحبًا بالعالم!</h1> </الجسم> </html>
أضف إعلان الوضع القياسي إلى السطر الأول من كل صفحة HTML لضمان العرض التقديمي المتسق في كل متصفح.
<!DOCTYPE html> <أتش تي أم أل> <الرأس> </الرأس> </html>
وفقًا لمواصفات HTML5:
يوصى بشدة بتحديد سمة lang لعنصر جذر html لتعيين اللغة الصحيحة للمستند. سيساعد ذلك أدوات تركيب الكلام على تحديد النطق الذي يجب أن تستخدمه، ويساعد أدوات الترجمة على تحديد القواعد التي يجب عليها اتباعها عند الترجمة، وما إلى ذلك.
<html lang="en-us"> <!--... --> </html>
يدعم IE علامات محددة لتحديد إصدار IE الذي يجب استخدامه لرسم الصفحة الحالية. ما لم تكن هناك احتياجات خاصة قوية، فمن الأفضل ضبطه على وضع الحافة لإخطار IE باعتماد أحدث وضع يدعمه.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
من خلال الإعلان بوضوح عن ترميز الأحرف، يمكنك التأكد من أن المتصفح يحدد بسرعة وسهولة كيفية عرض محتوى الصفحة. وتتمثل ميزة ذلك في أنه يمكنك تجنب استخدام علامات كيان الأحرف في HTML، بحيث يكون كل شيء متوافقًا مع ترميز المستند (عادةً ترميز UTF-8).
<الرأس> <ميتا محارف = "UTF-8"> </الرأس>
وفقًا لمواصفات HTML5، ليست هناك حاجة عمومًا إلى تحديد سمة النوع عند تقديم ملفات CSS وJavaScript، لأن النص/css والنص/javascript هما القيمتان الافتراضيتان على التوالي.
<!--CSS خارجي --> <link rel="stylesheet" href="code-guide.css"> <!-- CSS داخل المستند --> <نمط> /* ... */ </نمط> <!--جافا سكريبت --> <script src="code-guide.js"></script>
حاول اتباع معايير HTML ودلالاتها، ولكن لا تضحي بالتطبيق العملي. حاول استخدام أقل عدد من العلامات وحافظ على الحد الأدنى من التعقيد في جميع الأوقات.
يجب ترتيب سمات HTML بالترتيب الموضح أدناه لضمان سهولة قراءة التعليمات البرمجية.
فصل
معرف، اسم
بيانات-*
src، اكتب، href، القيمة
العنوان، البديل
الدور، الأغنية-*
يتم استخدام الفئة لتحديد المكونات القابلة لإعادة الاستخدام بشكل كبير، لذا يجب إدراجها أولاً. يتم استخدام المعرف لتحديد مكون معين ويجب استخدامه بحذر (على سبيل المثال، الإشارات المرجعية داخل الصفحة)، لذلك يأتي في المرتبة الثانية.
يمكن الإعلان عن الخصائص المنطقية بدون قيمة. تتطلب مواصفات XHTML تعيين قيمة لها، لكن مواصفات HTML5 لا تتطلب ذلك.
لمزيد من المعلومات، يرجى الرجوع إلى قسم WhatWG حول السمات المنطقية:
إذا كانت السمة المنطقية لعنصر ما لها قيمة، فهي صحيحة؛ وإذا لم يكن لها قيمة، فهي خاطئة.
إذا كان يجب عليك تعيين قيمة لها، فيرجى الرجوع إلى مواصفات WhatWG:
إذا كانت السمة موجودة، فيجب أن تكون قيمتها عبارة عن سلسلة فارغة أو […] الاسم المتعارف عليه للسمة، بدون مسافة بيضاء بادئة أو لاحقة.
وبعبارة بسيطة، ليست هناك حاجة لتعيين قيمة.
عند كتابة كود HTML، حاول تجنب العناصر الأصلية الزائدة عن الحاجة. في كثير من الأحيان، يتطلب هذا التكرار وإعادة البناء لتحقيقه. يرجى الاطلاع على الحالة التالية:
<!-- ليس رائعًا --> <span class="avatar"> <img src="..."> </span> <!--أفضل --> <img class="avatar" src="...">
العلامات التي تم إنشاؤها من خلال JavaScript تجعل من الصعب العثور على المحتوى وتحريره وإبطاء الأداء. تجنب ذلك عندما تستطيع.
1. استخدم مسافتين بدلاً من علامات التبويب - هذه هي الطريقة الوحيدة لضمان العرض المتسق في جميع البيئات.
2. عند تجميع المحددات، ضع المحددات الفردية على السطر الخاص بها.
3. لتسهيل قراءة التعليمات البرمجية، أضف مسافة قبل القوس الافتتاحي لكل كتلة إعلان.
4. يجب أن يكون قوس الإغلاق المتعرج لكتلة الإعلان على سطر منفصل.
5. يجب إدخال مسافة بعد: في كل بيان إقرار.
6. للحصول على تقرير أكثر دقة عن الأخطاء، يجب أن يكون كل بيان في سطر خاص به.
7. يجب أن تنتهي جميع بيانات الإقرار بفاصلة منقوطة. تعد الفاصلة المنقوطة بعد بيان الإقرار الأخير اختيارية، ولكن إذا قمت بحذفها، فقد يكون الكود الخاص بك أكثر عرضة للخطأ.
8. بالنسبة لقيم السمات المفصولة بفواصل، يجب إدراج مسافة بعد كل فاصلة (على سبيل المثال، ظل المربع).
9. لا تقم بإدخال مسافات بعد الفواصل داخل قيم rgb() أو rgba() أو hsl() أو hsla() أو rect(). يساعد هذا في تمييز قيم الألوان المتعددة (الفواصل فقط، بدون مسافات) عن قيم السمات المتعددة (الفواصل والمسافات).
10. بالنسبة لقيم السمات أو معلمات الألوان، احذف المسافة البادئة 0 للكسور العشرية الأقل من 1 (على سبيل المثال، 0.5 بدلاً من 0.5؛ -.5px بدلاً من -0.5px).
11/يجب أن تكون القيم السداسية كلها بأحرف صغيرة، على سبيل المثال، #fff. تكون الأحرف الصغيرة أسهل في القراءة عند مسح مستند ضوئيًا لأن شكلها يسهل تمييزه.
12. حاول استخدام القيم السداسية العشرية المختصرة، على سبيل المثال، استخدم #ffff بدلاً من #ffffff.
13. قم بإضافة علامات الاقتباس المزدوجة للسمات الموجودة في المحدد، على سبيل المثال، input[type="text"]. إنه اختياري فقط في بعض الحالات، ولكن من أجل تناسق التعليمات البرمجية، يوصى باستخدام علامات الاقتباس المزدوجة.
14. تجنب تحديد وحدات للقيم 0، على سبيل المثال، استخدم هامش: 0 بدلاً من هامش: 0px;.
/* CSS غير صالح */
.selector، .selector ثانوي، .selector[type=text] {
الحشو: 15 بكسل؛
الهامش: 0px 0px 15px؛
لون الخلفية:rgba(0, 0, 0, 0.5);
مربع الظل: 0px 1px 2px #CCC، داخلي 0 1px 0 #FFFFFF
}
/* CSS جيد */
.محدد،
.محدد ثانوي،
.selector[نوع = "نص"] {
الحشو: 15 بكسل؛
الهامش السفلي: 15 بكسل؛
لون الخلفية: rgba(0,0,0,.5);
مربع الظل: 0 1px 2px #ccc، داخلي 0 1px 0 #fff؛
}ينبغي تجميع إعلانات الممتلكات ذات الصلة معًا وترتيبها بالترتيب التالي:
تحديد المواقع
نموذج الصندوق
مطبعي
مرئي
يأتي تحديد الموضع أولاً لأنه يزيل العناصر من تدفق المستند العادي ويمكنه تجاوز الأنماط المرتبطة بنموذج الصندوق. يأتي نموذج الصندوق في المرتبة الثانية لأنه يحدد حجم المكونات وموضعها.
تؤثر الخصائص الأخرى فقط على الجزء الداخلي للمكون أو لا تؤثر على أول مجموعتين من الخصائص، لذلك يتم تصنيفها في المرتبة التالية.
.إعلان النظام {
/* تحديد المواقع */
الموقف: مطلق؛
أعلى: 0؛
الحق: 0؛
أسفل: 0؛
اليسار: 0؛
مؤشر z: 100؛
/* نموذج الصندوق */
عرض: كتلة؛
تعويم: حق؛
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
/* الطباعة */
الخط: عادي 13 بكسل "Helvetica Neue"، sans-serif؛
ارتفاع الخط: 1.5؛
اللون: #333؛
محاذاة النص: مركز؛
/* مرئي */
لون الخلفية: #f5f5f5؛
الحدود: 1 بكسل صلب #e5e5e5؛
نصف قطر الحدود: 3px؛
/*متفرقات*/
العتامة: 1؛
}بالمقارنة مع العلامات، فإن توجيه @import أبطأ بكثير، مما لا يزيد من عدد الطلبات الإضافية فحسب، بل يسبب أيضًا مشاكل غير متوقعة. تشمل البدائل ما يلي:
قم بتجميع ملفات CSS متعددة في ملف واحد من خلال معالج CSS المسبق المشابه لوظائف دمج ملفات CSS التي يتم توفيرها من خلال Rails أو Jekyll أو أنظمة أخرى.
<!-- استخدم عناصر الارتباط -->
<link rel="stylesheet" href="core.css">
<!-- تجنب @imports -->
<نمط>
@import url("more.css");
</نمط>ضع استعلامات الوسائط بالقرب من القواعد ذات الصلة قدر الإمكان. لا تقم بتجميعها في ملف نمط واحد أو وضعها في أسفل المستند. إذا قمت بفصلهم، فلن ينساهم الجميع في المستقبل. ويرد أدناه مثال نموذجي.
.عنصر { ... }
.العنصر الصورة الرمزية { ... }
.العنصر المحدد { ... }
@media (الحد الأدنى للعرض: 480 بكسل) {
.عنصر { ...}
.العنصر الصورة الرمزية { ... }
.العنصر المحدد { ... }
}بالنسبة للأنماط التي تحتوي على عبارة واحدة فقط، فمن المستحسن وضع العبارة على نفس السطر لسهولة القراءة والتحرير السريع. بالنسبة للأنماط التي تحتوي على إعلانات متعددة، يجب تقسيم الإعلانات إلى أسطر متعددة.
العامل الرئيسي في القيام بذلك هو اكتشاف الأخطاء - على سبيل المثال، يشير مدقق CSS إلى وجود خطأ في بناء الجملة في السطر 183. إذا كانت عبارة واحدة في سطر واحد، فلن تتجاهل الخطأ؛ وإذا كانت عبارة متعددة في سطر واحد، فستحتاج إلى تحليلها بعناية لتجنب فقدان الخطأ.
/* تصريحات فردية في سطر واحد */
.span1 { العرض: 60 بكسل }
.span2 { العرض: 140 بكسل }
.span3 { العرض: 220 بكسل }
/* إعلانات متعددة، واحد في كل سطر */
.سبرايت {
العرض: كتلة مضمنة؛
العرض: 16 بكسل؛
الارتفاع: 15 بكسل؛
صورة الخلفية: url(../img/sprite.png);
}
.icon { موقف الخلفية: 0 0 }
.icon-home { موقف الخلفية: 0 -20px }
.icon-account { موقف الخلفية: 0 -40 بكسل }في الحالات التي تحتاج فيها إلى تعيين كافة القيم بشكل صريح، يجب أن تحاول الحد من استخدام إعلانات الخصائص المختصرة. تشمل الانتهاكات الشائعة لإعلانات الملكية المختصرة ما يلي:
حشوة
هامِش
الخط
خلفية
حدود
نصف قطر الحدود
في معظم الحالات، لا نحتاج إلى تحديد كافة القيم لإعلان خاصية مختصرة. على سبيل المثال، يحتاج عنصر عنوان HTML فقط إلى تعيين قيم الهامش العلوي والسفلي، لذلك تحتاج فقط إلى تجاوز هاتين القيمتين عند الضرورة. يمكن أن يؤدي الاستخدام المفرط لإعلانات الخصائص المختصرة إلى تعليمات برمجية غير منظمة ويمكن أن يسبب آثارًا جانبية غير مقصودة عن طريق التسبب في تجاوزات غير ضرورية لقيم الخصائص.
/* مثال سيء */
.عنصر {
الهامش: 0 0 10 بكسل؛
الخلفية: أحمر؛
الخلفية: URL("image.jpg");
نصف قطر الحدود: 3px 3px 0 0;
}
/* مثال جيد */
.عنصر {
الهامش السفلي: 10 بكسل؛
لون الخلفية: أحمر؛
صورة الخلفية: url("image.jpg");
نصف قطر الحدود من أعلى اليسار: 3px؛
نصف قطر الحدود من أعلى اليمين: 3 بكسل؛
}تجنب التداخل غير الضروري. هذا لأنه على الرغم من أنه يمكنك استخدام التداخل، إلا أن هذا لا يعني أنه يجب عليك ذلك. استخدم التداخل فقط عندما يجب أن تقتصر الأنماط على العنصر الأصلي (أي المحددات التابعة) وهناك عناصر متعددة تحتاج إلى التداخل.
// بدون تداخل
.table > thead > tr > th { …
.table > thead > tr > td { …
// مع التعشيش
.table > ثياد > آر {
> ث { &هليب }
> تد { &هليب }
}لتحسين إمكانية القراءة، قم بإضافة مسافة بين القيم والمتغيرات وعوامل التشغيل الخاصة بالتعبيرات الرياضية الموجودة بين قوسين.
// مثال سيء
.عنصر {
الهامش: 10px 0 @variable*2 10px;
}
// مثال جيد
.عنصر {
الهامش: 10 بكسل 0 (@variable * 2) 10 بكسل؛
}يتم كتابة التعليمات البرمجية والحفاظ عليها من قبل الناس. تأكد من أن الكود الخاص بك يصف نفسه بنفسه، ويتم التعليق عليه جيدًا، ويسهل على الآخرين فهمه. تنقل تعليقات التعليمات البرمجية الجيدة سياق التعليمات البرمجية والغرض منها. لا تقم ببساطة بإعادة ذكر أسماء المكونات أو الفئات.
للتعليقات الأطول، تأكد من كتابة جمل كاملة؛ للتعليقات العامة، يمكنك كتابة عبارات موجزة.
/* مثال سيء */
/* رأس مشروط */
رأس مشروط {
...
}
/* مثال جيد */
/* عنصر التغليف لـ .modal-title و .modal- Close */
رأس مشروط {
...
} 1. يمكن فقط ظهور الأحرف الصغيرة والشرطات (وليس الشرطات السفلية أو حالة الجمل) في أسماء الفئات. يجب استخدام الشرطات في تسمية الفئات ذات الصلة (المشابهة لمساحات الأسماء) (على سبيل المثال، .btn و .btn-danger).
2. تجنب الاختصارات التعسفية بشكل مفرط. يمثل .btn الزر، لكن .s لا يمكنه التعبير عن أي معنى.
3. يجب أن تكون أسماء الفئات قصيرة قدر الإمكان ولها معنى واضح.
4. استخدم أسماء ذات معنى. استخدم أسماء منظمة أو هادفة، بدلاً من الأسماء التقديمية.
5. بناءً على أقرب فئة أصل أو فئة أساسية كبادئة للفئة الجديدة.
6. استخدم فئات .js-* لتحديد السلوكيات (بدلاً من الأنماط)، ولا تقم بتضمين هذه الفئات في ملفات CSS.
/* مثال سيء */
.ت { ... }
.أحمر { ... }
.الرأس { ... }
/* مثال جيد */
.تغريد { ... }
.مهم { ... }
.تغريدة الرأس { ... } استخدم الفئات للعناصر المشتركة، مما سيساعد في تحسين أداء العرض.
بالنسبة للمكونات التي تحدث بشكل متكرر، تجنب استخدام محددات السمات (على سبيل المثال، [class^=”…”]). يمكن أن يتأثر أداء المتصفح بهذه العوامل.
يجب أن يكون المحدد قصيرًا قدر الإمكان، ويحاول الحد من عدد العناصر التي يتكون منها المحدد، ويوصى بعدم تجاوز 3.
قم بتقييد الفئات على أقرب عنصر أصل (أي المحدد السليل) فقط عند الضرورة (على سبيل المثال، عند عدم استخدام الفئات البادئة - البادئات تشبه مساحات الأسماء).
/* مثال سيء */
فترة { ... }
.page-container #stream .stream-item .tweet .tweet-header .اسم المستخدم { ... }
الصورة الرمزية { ... }
/* مثال جيد */
الصورة الرمزية { ... }
.tweet-header .اسم المستخدم { ... }
.تغريد .الصورة الرمزية { ... }قم بإعداد المحرر الخاص بك على النحو التالي لتجنب التناقضات والاختلافات الشائعة في التعليمات البرمجية:
استخدم مسافتين لاستبدال أحرف الجدولة (تعني علامة التبويب الناعمة استخدام المسافات لتمثيل أحرف الجدولة). عند حفظ الملف، قم بإزالة أحرف المسافة البيضاء الزائدة. اضبط ترميز الملف على UTF-8. يضيف سطرًا فارغًا إلى نهاية الملف.
ارجع إلى الوثائق وأضف معلومات التكوين هذه إلى ملف .editorconfig الخاص بمشروعك. على سبيل المثال: مثيل .editorconfig في Bootstrap. لمزيد من المعلومات، راجع حول EditorConfig.