معرف وتسمية الطبقة
استخدم دائمًا أسماء المعرفات والفئات التي تعكس غرض العنصر واستخدامه، أو الأسماء الشائعة الأخرى. بدل المظاهر والأسماء الغامضة.
يجب تفضيل الأسماء المحددة والتي تعكس الغرض من العنصر، لأنها الأكثر قابلية للفهم والأقل احتمالية للتغيير.
الأسماء الشائعة هي مجرد أسماء بديلة لعناصر متعددة وهي نفسها بين العناصر الشقيقة وليس لها معنى خاص.
قم بتمييزهم بحيث يكون لديهم معنى خاص وغالبًا ما تكون هناك حاجة إليهم كـ "مساعدين".
على الرغم من أن دلالات أسماء الفئات والمعرفات ليس لها أي معنى عملي لتحليل الكمبيوتر،
عادةً ما تكون الأسماء الدلالية هي الاختيار الصحيح لأنها تمثل معلومات لا تفرض قيودًا تعبيرية.
غير مستحسن
.fw-800 {
وزن الخط: 800؛
}
.أحمر {
اللون: أحمر؛
}يوصي
.ثقيل {
وزن الخط: 800؛
}
.مهم {
اللون: أحمر؛
} تجنب معقول للهويات
عادةً لا ينبغي تطبيق المعرفات على الأنماط.
لا يمكن إعادة استخدام أنماط المعرفات ويمكنك استخدام المعرف مرة واحدة فقط في كل صفحة.
الاستخدام الفعال الوحيد للمعرفات هو تحديد الموضع داخل صفحة ويب أو الموقع بأكمله.
ومع ذلك، يجب عليك دائمًا التفكير في استخدام الفئة بدلاً من المعرف إلا إذا كنت تستخدمه مرة واحدة فقط.
غير مستحسن
#المحتوى .العنوان {
حجم الخط: 2em؛
}يوصي
.المحتوى .العنوان {
حجم الخط: 2em؛
} هناك حجة أخرى ضد استخدام المعرفات وهي أن المحددات التي تحتوي على معرفات ذات وزن كبير.
يكون للمحدد الذي يحتوي على معرف واحد فقط وزن أعلى من المحدد الذي يحتوي على 1000 اسم فئة، مما يجعله غريبًا.
// هذا المحدد له وزن أعلى من المحدد التالي #content .title {
اللون: أحمر؛
}
// من هذا المحدد!
html body div.content.news-content .title.content-title.important {
اللون: أزرق؛
} تجنب أسماء العلامات في محددات CSS
عند إنشاء المحددات، يجب عليك استخدام أسماء فئات واضحة ودقيقة ودلالية. لا تستخدم محددات العلامات. من الأسهل الحفاظ عليه إذا كنت تهتم فقط بأسماء فصولك، وليس بعناصر التعليمات البرمجية الخاصة بك.
بالتفكير من منظور الانفصال، لا ينبغي تخصيص علامات/دلالات html في طبقة العرض التقديمي.
يمكن أن تكون قائمة مرتبة تحتاج إلى تغييرها إلى قائمة غير مرتبة، أو div تحتاج إلى تحويلها إلى مقال.
إذا كنت تستخدم فقط أسماء فئات ذات معنى،
وبدون استخدام محددات العناصر، فإنك تحتاج فقط إلى تغيير ترميز html الخاص بك دون تغيير CSS الخاص بك.
غير مستحسن
div.content > header.content-header > h2.title {
حجم الخط: 2em؛
}يوصي
.content > .content-header > .title {
حجم الخط: 2em؛
} دقيقة قدر الإمكان
لا يستخدم العديد من مطوري الواجهة الأمامية المحددات الفرعية المباشرة عند كتابة سلاسل المحددات (ملاحظة: الفرق بين المحددات الفرعية المباشرة والمحددات التابعة).
في بعض الأحيان، قد يؤدي ذلك إلى مشكلات مؤلمة في التصميم، وفي بعض الأحيان قد يستهلك الأداء.
ومع ذلك، في أي حال، هذه ممارسة سيئة للغاية.
إذا كنت لا تكتب محددًا عامًا جدًا يجب أن يتطابق مع نهاية DOM، فيجب عليك دائمًا التفكير في المحددات الفرعية المباشرة.
خذ بعين الاعتبار DOM التالي:
<article class="content news-content"> <span class="title">حدث إخباري</span> <div class="content-body"> <div class="title content-title"> تحقق من هذا </div> <p>هذا محتوى مقال إخباري</p> <div class="teaser"> <div class="title">اشتري هذا</div> <div class="teaser-content">نعم!</div> </div> </div> </المادة>
سيتم تطبيق CSS التالي على العناصر الثلاثة ذات فئة العنوان.
بعد ذلك، لحل الأنماط المختلفة ضمن فئة العنوان ضمن فئة المحتوى وفئة العنوان ضمن فئة الجملة المحفزة، سيتطلب ذلك محددات أكثر دقة لإعادة كتابة أنماطها مرة أخرى.
غير مستحسن
.المحتوى .العنوان {
حجم الخط: 2rem؛
}يوصي
.المحتوى > .العنوان {
حجم الخط: 2rem؛
}
.content > .content-body > .title {
حجم الخط: 1.5ريم؛
}
.content > .content-body > .teaser > .title {
حجم الخط: 1.2rem؛
} سمة الاختصار
يوفر CSS العديد من الخصائص المختصرة (مثل الخط) التي يجب استخدامها كلما أمكن ذلك، حتى عند تعيين قيمة واحدة فقط.
يعد استخدام السمات المختصرة مفيدًا لكفاءة التعليمات البرمجية وسهولة القراءة.
غير مستحسن
رمز المغلق:
نمط الحدود الأعلى: لا شيء؛ عائلة الخط: palatino، Georgia، serif؛ حجم الخط: 100%؛ ارتفاع الخط: 1.6؛ الحشو السفلي: 2em؛ الحشو الأيسر: 1em؛ الحشو الأيمن: 1em؛ الحشو العلوي: 0؛
يوصي
رمز المغلق:
أعلى الحدود: 0؛ الخط: 100%/1.6 بالاتينو، جورجيا، سيريف؛ الحشو: 0 1em 2em؛
0 والوحدات
حذف الوحدات التي تلي القيمة "0". لا تستخدم الوحدات بعد القيمة 0 ما لم تكن هناك قيمة.
غير مستحسن
رمز المغلق:
الحشو السفلي: 0px؛ الهامش: 0م؛
يوصي
رمز المغلق:
الحشو السفلي: 0؛ الهامش: 0;
تدوين سداسي عشري
حيثما أمكن، استخدم تدوينًا سداسيًا عشريًا مكونًا من 3 أحرف.
تسمح قيم الألوان بالتمثيل بهذا الشكل،
التمثيل الست عشري المكون من 3 أحرف أقصر.
استخدم دائمًا الأرقام السداسية العشرية الصغيرة.
غير مستحسن
اللون: #FF33AA؛
يوصي
اللون: #f3a؛
فاصل بين المعرف واسم الفئة
استخدم واصلة (شرطة) للفصل بين الكلمات في المعرف واسم الفئة. لتحسين فهم الدرس، لا تستخدم أي أحرف (بما في ذلك لا شيء) بخلاف الواصلات (الشرطات) لربط الكلمات والاختصارات في أداة التحديد.
بالإضافة إلى ذلك، كمعيار قياسي، يتعرف محدد السمة الافتراضي على الواصلات (الشرطات) كفواصل كلمات لـ [السمة|=القيمة]،
لذا فمن الأفضل الالتزام بالواصلات كفواصل.
غير مستحسن
الصورة التجريبية {}
حالة_الخطأ {} يوصي
#معرف الفيديو {}
.نموذج الإعلانات {}المأجورون
تجنب اكتشاف وكيل المستخدم و"اختراقات" CSS - جرب أسلوبًا مختلفًا أولاً. يمكن حل اختلافات الأنماط بسهولة من خلال اكتشاف وكيل المستخدم أو مرشحات CSS الخاصة والحلول البديلة والاختراقات. يجب اعتبار كلتا الطريقتين بمثابة الملاذ الأخير لتحقيق قاعدة تعليمات برمجية فعالة وقابلة للإدارة والحفاظ عليها. بمعنى آخر، اكتشاف وكيل المستخدم والاختراقات على المدى الطويل
سيضر المشروع، حيث يجب أن تسلك المشاريع دائمًا المسار الأقل مقاومة. ومع ذلك، من السهل السماح باستخدام اكتشاف وكيل المستخدم والاختراقات كثيرًا في المستقبل.
أمر الإعلان
هذا مخطط تقريبي للترتيب الذي تتم به كتابة خصائص CSS داخل المحدد. وهذا أمر مهم لضمان إمكانية القراءة والمسح بشكل أفضل.
كأفضل ممارسة، يجب أن نتبع التسلسل التالي (والذي يجب أن يكون حسب ترتيب الجدول أدناه):
الخصائص الهيكلية:
عرض
الموضع، اليسار، الأعلى، اليمين، إلخ.
تجاوز، تعويم، واضح الخ.
الهامش، الحشو
الخصائص التعبيرية:
الخلفية والحدود وما إلى ذلك.
الخط والنص
غير مستحسن
.صندوق {
عائلة الخط: "Arial"، بلا رقيق؛
الحدود: 3px الصلبة #ddd؛
اليسار: 30%؛
الموقف: مطلق؛
تحويل النص: أحرف كبيرة؛
لون الخلفية: #eee؛
اليمين: 30%؛
عرض: كتلة؛
حجم الخط: 1.5ريم؛
الفائض: مخفي؛
الحشو: 1em؛
الهامش: 1em؛
}يوصي
.صندوق {
عرض: كتلة؛
الموقف: مطلق؛
اليسار: 30%؛
اليمين: 30%؛
الفائض: مخفي؛
الهامش: 1em؛
الحشو: 1em؛
لون الخلفية: #eee؛
الحدود: 3px الصلبة #ddd؛
عائلة الخط: "Arial"، بلا رقيق؛
حجم الخط: 1.5ريم؛
تحويل النص: أحرف كبيرة؛
}نهاية البيان
لضمان الاتساق والتوسيع، يجب أن تنتهي كل عبارة بفاصلة منقوطة وتغليف كل عبارة في سطر جديد.
غير مستحسن
رمز المغلق:
.امتحان {
العرض: ارتفاع الكتلة: 100 بكسل
}يوصي
رمز المغلق:
.امتحان {
عرض: كتلة؛
الارتفاع: 100 بكسل؛
}نهاية اسم السمة
استخدم مسافة بعد النقطتين في اسم الخاصية. لأسباب تتعلق بالاتساق،
استخدم دائمًا مسافة بين السمة والقيمة (ولكن لا تستخدم مسافة بين السمة والنقطتين).
غير مستحسن
رمز المغلق:
ح3 {
وزن الخط: غامق؛
}يوصي
رمز المغلق:
ح3 {
وزن الخط: غامق؛
}فصل المحددات والإعلانات
استخدم دائمًا سطرًا جديدًا لكل محدد وإعلان خاصية.
غير مستحسن
رمز المغلق:
أ:التركيز، أ:نشط {
الموضع: أعلى: 1 بكسل؛
}يوصي
رمز المغلق:
ح1,
ح2,
ح3 {
وزن الخط: عادي؛
ارتفاع الخط: 1.2؛
}فصل القاعدة
يتم دائمًا فصل القواعد بسطر فارغ (سطر جديد مزدوج).
يوصي
رمز المغلق:
أتش تي أم أل {
الخلفية: #ففف؛
}
جسم {
الهامش: تلقائي؛
العرض: 50%؛
}اقتباسات CSS
قم بإحاطة محددات السمات أو قيم السمات بعلامات اقتباس مزدوجة ("") بدلاً من علامات الاقتباس المفردة (").
لا تستخدم علامات الاقتباس لقيم URI (url()).
غير مستحسن
رمز المغلق:
@import url('//cdn.com/foundation.css');
أتش تي أم أل {
عائلة الخطوط: 'open sans'، arial، sans-serif؛
}
الجسم: بعد {
المحتوى: "إيقاف مؤقت"؛
}يوصي
رمز المغلق:
@import url(//cdn.com/foundation.css);
أتش تي أم أل {
عائلة الخطوط: "open sans"، arial، sans-serif؛
}
الجسم: بعد {
المحتوى: "وقفة"؛
}تداخل المحدد (SCSS)
في Sass، يمكنك تداخل المحددات، مما يجعل التعليمات البرمجية أكثر وضوحًا وقابلية للقراءة. قم بتداخل جميع المحددات، لكن حاول تجنب تداخل المحددات دون أي محتوى.
إذا كنت بحاجة إلى تحديد بعض سمات النمط للعناصر الفرعية، ولن يحتوي العنصر الأصلي على سمات النمط،
يمكن استخدام سلاسل محددات CSS العادية.
سيمنع هذا البرنامج النصي الخاص بك من أن يبدو معقدًا للغاية.
غير مستحسن
رمز المغلق:
// ليس مثالًا جيدًا لعدم الاستفادة من التداخل على الإطلاق
.محتوى {
عرض: كتلة؛
}
.content > .news-article > .title {
حجم الخط: 1.2em؛
}غير مستحسن
رمز المغلق:
// استخدام التداخل أفضل ولكن ليس في جميع الحالات
// تجنب التداخل في حالة عدم وجود سمات واستخدم سلاسل المحدد بدلاً من ذلك
.محتوى {
عرض: كتلة؛
> .مقالة إخبارية {
> .العنوان {
حجم الخط: 1.2em؛
}
}
}يوصي
رمز المغلق:
// يتبع هذا المثال أفضل نهج أثناء التداخل ولكن استخدم سلاسل المحدد حيثما أمكن ذلك
.محتوى {
عرض: كتلة؛
> .أخبار المقالة > .العنوان {
حجم الخط: 1.2em؛
}
}تقديم الأسطر الفارغة في التداخل (SCSS)
اترك سطرًا فارغًا بين المحددات المتداخلة وخصائص CSS.
غير مستحسن
رمز المغلق:
.محتوى {
عرض: كتلة؛
> .مقالة إخبارية {
لون الخلفية: #eee؛
> .العنوان {
حجم الخط: 1.2em؛
}
> .الحاشية المقالة {
حجم الخط: 0.8em؛
}
}
}يوصي
رمز المغلق:
.محتوى {
عرض: كتلة؛
> .مقالة إخبارية {
لون الخلفية: #eee؛
> .العنوان {
حجم الخط: 1.2em؛
}
> .الحاشية المقالة {
حجم الخط: 0.8em؛
}
}
}استعلام الوسائط السياقية (SCSS)
في Sass، يمكنك أيضًا استخدام استعلامات الوسائط السياقية عندما تقوم بتداخل محدداتك.
في Sass، يمكنك استخدام استعلامات الوسائط عند أي مستوى معين من التداخل.
سيتم تحويل CSS الناتج بحيث يتم عرض استعلام الوسائط كمحدد مغلف.
هذه التكنولوجيا مريحة للغاية،
يساعد في الحفاظ على السياق الذي ينتمي إليه استعلام الوسائط.
يتيح لك الأسلوب الأول كتابة أنماط هاتفك المحمول أولاً ثم استخدام استعلامات الوسائط السياقية لتوفير أنماط سطح المكتب حيثما تحتاج إليها.
غير مستحسن
رمز المغلق:
// يبدو هذا المثال الأول للجوال مثل CSS عادي حيث يتم تكرار بنية SCSS بأكملها
// في الجزء السفلي من استعلام الوسائط، وهذا عرضة للخطأ ويجعل الصيانة أكثر صعوبة لأنه ليس من السهل ربطها
// استعلام المحتوى الموجود في الوسائط عن المحتوى الموجود في الجزء العلوي (نمط الهاتف المحمول)
.صفحة المحتوى {
حجم الخط: 1.2rem؛
> .الرئيسي {
لون الخلفية: دخان أبيض؛
> .آخر الأخبار {
الحشو: 1ريم؛
> .مقالة إخبارية {
الحشو: 1ريم؛
> .العنوان {
حجم الخط: 2rem؛
}
}
}
> .المحتوى {
الهامش العلوي: 2rem؛
الحشو: 1ريم؛
}
}
> .تذييل الصفحة {
الهامش العلوي: 2rem؛
حجم الخط: 1rem؛
}
}
شاشة الوسائط و(الحد الأدنى للعرض: 641 بكسل) {
.صفحة المحتوى {
حجم الخط: 1rem؛
> .main > .آخر الأخبار > .news-article > .title {
حجم الخط: 3rem؛
}
> .تذييل الصفحة {
حجم الخط: 0.8rem؛
}
}
}يوصي
رمز المغلق:
// هذا هو نفس المثال المذكور أعلاه ولكننا هنا نستخدم استعلامات الوسائط السياقية لوضع أنماط مختلفة
// لوسائل الإعلام المختلفة في السياق الصحيح.
.صفحة المحتوى {
حجم الخط: 1.2rem؛
شاشة الوسائط و(الحد الأدنى للعرض: 641 بكسل) {
حجم الخط: 1rem؛
}
> .الرئيسي {
لون الخلفية: دخان أبيض؛
> .آخر الأخبار {
الحشو: 1ريم؛
> .مقالة إخبارية {
الحشو: 1ريم؛
> .العنوان {
حجم الخط: 2rem؛
شاشة الوسائط و(الحد الأدنى للعرض: 641 بكسل) {
حجم الخط: 3rem؛
}
}
}
}
> .المحتوى {
الهامش العلوي: 2rem؛
الحشو: 1ريم؛
}
}
> .تذييل الصفحة {
الهامش العلوي: 2rem؛
حجم الخط: 1rem؛
شاشة الوسائط و(الحد الأدنى للعرض: 641 بكسل) {
حجم الخط: 0.8rem؛
}
}
}الترتيب المتداخل والمحددات الرئيسية (SCSS)
عند استخدام وظيفة التداخل في Sass،
الشيء المهم هو أن يكون لديك ترتيب تداخل واضح،
ما يلي هو الترتيب الذي يجب أن تكون عليه كتلة SCSS.
سمات النمط للمحدد الحالي <br/>محدد الفئة الزائفة للمحدد الأصلي (:first-letter، :hover،:active، إلخ)
عناصر الفئة الزائفة (:قبل و:بعد)
نمط الإعلان للمحدد الأصلي (.selected، .active، .enlarged، إلخ.)
استخدم المحدد الفرعي لاستعلام الوسائط السياقية الخاص بـ Sass باعتباره القطعة النهائية
يجب أن يوضح المثال التالي كيف سيحقق هذا الترتيب بنية واضحة أثناء الاستفادة من محدد Sass الأصلي.
مُستَحسَن
رمز المغلق:
.إعلان تشويقي للمنتج {
// 1. سمات النمط
العرض: كتلة مضمنة؛
الحشو: 1ريم؛
لون الخلفية: دخان أبيض؛
اللون: رمادي؛
// 2. المحددات الزائفة مع المحدد الأصلي
&:تحوم {
اللون: أسود؛
}
// 3. العناصر الزائفة ذات المحدد الأصلي
&:قبل {
محتوى: ""؛
عرض: كتلة؛
الحد العلوي: 1 بكسل رمادي خالص؛
}
&:بعد {
محتوى: ""؛
عرض: كتلة؛
الحد العلوي: 1 بكسل رمادي خالص؛
}
// 4. فئات الحالة مع محدد الأصل
&.نشيط {
لون الخلفية: وردي؛
اللون: أحمر؛
// 4.2. محدد زائف في محدد فئة الحالة
&:تحوم {
اللون: احمر غامق؛
}
}
// 5. استعلامات الوسائط السياقية
شاشة الوسائط و(العرض الأقصى: 640 بكسل) {
عرض: كتلة؛
حجم الخط: 2em؛
}
// 6. المحددات الفرعية
> .المحتوى > .العنوان {
حجم الخط: 1.2em؛
// 6.5.استعلامات الوسائط السياقية في المحدد الفرعي
شاشة الوسائط و(العرض الأقصى: 640 بكسل) {
تباعد الحروف: 0.2em؛
تحويل النص: أحرف كبيرة؛
}
}
}