1. استخدم اختصارات CSS
يمكن أن يساعد استخدام الاختصارات في تقليل حجم ملفات CSS وتسهيل قراءتها. للتعرف على القواعد الرئيسية لاختصارات CSS، يرجى الرجوع إلى "ملخص بناء جملة اختصارات CSS الشائعة"، والذي لن يتم وصفه هنا.
2. حدد الوحدة بوضوح ما لم تكن القيمة 0
يعد نسيان تحديد وحدات البعد خطأً شائعًا بين المبتدئين في CSS. في HTML يمكنك فقط كتابة width=100، لكن في CSS عليك إعطاء وحدة محددة، مثل: width:100px width:100em. هناك استثناءان فقط حيث لا يمكن تعريف الوحدات: ارتفاع الصف وقيمة 0. بالإضافة إلى ذلك، يجب أن تتبع القيم الأخرى الوحدة.
3. حساس لحالة الأحرف
عند استخدام CSS في XHTML، تكون أسماء العناصر المحددة في CSS حساسة لحالة الأحرف. لتجنب هذا الخطأ، أوصي باستخدام الأحرف الصغيرة لجميع أسماء التعريفات.
تعد قيم الفئة والمعرف أيضًا حساسة لحالة الأحرف في HTML وXHTML. إذا كان عليك كتابة حالة مختلطة، فيرجى التأكد بعناية من أن تعريفك في CSS يتوافق مع العلامات الموجودة في XHTML.
4. قم بإلغاء قيود العنصر قبل الفصل والمعرف
عندما تكتب لتحديد فئة أو معرف لعنصر ما، يمكنك حذف مؤهل العنصر السابق، لأن المعرف فريد في الصفحة ويمكن استخدامه عدة مرات في الصفحة. ليس من المنطقي بالنسبة لك أن تقوم بتأهيل عنصر ما. على سبيل المثال:
شعبة#المحتوى { }
تفاصيل المجموعة { }
يمكن كتابتها كما
#محتوى { }
.تفاصيل { }
وهذا يحفظ بعض البايتات.
5. القيمة الافتراضية
عادةً ما تكون القيمة الافتراضية للحشوة هي 0، والقيمة الافتراضية للون الخلفية هي شفافة. لكن القيمة الافتراضية قد تكون مختلفة في المتصفحات المختلفة. إذا كنت خائفًا من التعارضات، يمكنك تحديد قيم الهامش والحشو لجميع العناصر لتكون 0 في بداية ورقة الأنماط، كما يلي:
* {
الهامش:0;
الحشو: 0؛
}
6. لا حاجة لتحديد القيم القابلة للتوريث بشكل متكرر
في CSS، ترث العناصر الفرعية تلقائيًا قيم السمات للعنصر الأصل، مثل اللون والخط وما إلى ذلك، والتي تم تعريفها في العنصر الأصل، ويمكن توريثها مباشرة في العنصر الفرعي دون تكرار التعريف. لكن انتبه إلى أن المتصفح قد يتجاوز التعريف الخاص بك ببعض القيم الافتراضية.
7. المبدأ الأول الأخير
إذا كان هناك تعريفات متعددة لنفس العنصر، فسيتم إعطاء الأولوية للتعريف الأقرب (المستوى الأدنى)، على سبيل المثال، يوجد هذا الجزء من التعليمات البرمجية
تحديث: مجموعة لوريم إيبسوم دولور
في ملف CSS، قمت بتعريف العنصر p وclassupdate
ص {
الهامش:1em 0;
حجم الخط: 1em؛
اللون: #333؛
}
.تحديث {
وزن الخط: غامق؛
اللون: #600؛
}
من بين هذين التعريفين، سيتم استخدام class=update لأن الفئة أقرب من p. يمكنك الاطلاع على "حساب خصوصية المحدد" الخاص بـ W3C لمعرفة المزيد.
8. تعريفات فئة متعددة
يمكن للعلامة تحديد فئات متعددة في نفس الوقت. على سبيل المثال: قمنا أولاً بتعريف نمطين، النمط الأول له خلفية #666؛ والنمط الثاني له حدود بحجم 10 بيكسل.
.واحد{العرض:200px;الخلفية:#666;}
.اثنين{الحدود:10px الصلبة #F00؛}
في رمز الصفحة، يمكننا الاتصال بهذا الشكل
تأثير العرض النهائي هو أن هذا div له خلفية #666 وحدود 10 بكسل. نعم، من الممكن القيام بذلك، يمكنك تجربته.
9. استخدم المحددات السليلة
لا يعلم مبتدئو CSS أن استخدام المحددات الفرعية هو أحد الأسباب التي تؤثر على كفاءتهم. يمكن أن تساعدك المحددات الفرعية في حفظ الكثير من تعريفات الفئة. دعونا نلقي نظرة على الكود التالي:
<معرف div=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>العنصر 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> العنصر 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> العنصر 1</a> </li>
</ul>
</div>
تعريف CSS لهذا الكود هو:
شعبة#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
يمكنك استبدال الكود أعلاه بالطريقة التالية
<ul معرف=subnav>
<li> <a href=#> العنصر 1</a> </li>
<li class=sel> <a href=#> العنصر 1</a> </li>
<li> <a href=#> العنصر 1</a> </li>
</ul>
تعريف النمط هو:
#subnav { }
#سوبنافلي { }
#subnav أ { }
#subnav .sel { }
#subnav .sel أ { }
استخدم المحددات الفرعية لجعل التعليمات البرمجية وCSS أكثر إيجازًا وأسهل في القراءة.
10. لا حاجة لإضافة علامات الاقتباس إلى مسار صورة الخلفية
لحفظ البايتات، أوصي بعدم اقتباس مسار صورة الخلفية، لأن علامات الاقتباس ليست ضرورية. على سبيل المثال:
الخلفية: رابط (صور
الهامش:0 تلقائي؛
}
لكن IE5/Win لا يمكنه عرض هذا التعريف بشكل صحيح. نستخدم خدعة مفيدة جدًا لحلها: استخدم سمة محاذاة النص. مثله:
جسم {
محاذاة النص:مركز؛
}
#طَوّق {
العرض: 760 بكسل؛
الهامش:0 تلقائي؛
محاذاة النص:يسار؛
}
تحدد قاعدة text-align:center للنص الأول أن جميع عناصر النص في IE5/Win متمركزة (المتصفحات الأخرى تقوم فقط بتوسيط النص)، وقاعدة text-align:left الثانية هي توسيط النص في #warp to اليسار.
15. استيراد وإخفاء CSS
نظرًا لأن المتصفحات القديمة لا تدعم CSS، فإن الطريقة الشائعة هي استخدام تقنية @import لإخفاء CSS. على سبيل المثال:
@import url(main.css);
ومع ذلك، لم تنجح هذه الطريقة مع IE4، مما أصابني بالصداع لفترة من الوقت. فيما بعد كتبتها هكذا:
@import main.css;
بهذه الطريقة، يمكن إخفاء CSS في IE4، كما أنه يوفر 5 بايت. إذا كنت تريد معرفة الشرح التفصيلي لبناء جملة @import، يمكنك الاطلاع هنا على "مخطط مرشح CSS المركزي"
16. الأمثل لشركة آي إي
في بعض الأحيان، تحتاج إلى تحديد بعض القواعد الخاصة لأخطاء متصفح IE. هناك عدد كبير جدًا من اختراقات CSS هنا، وأنا أستخدم اثنتين منها فقط، بغض النظر عما إذا كانت Microsoft أفضل في الإصدار التجريبي القادم من IE7، فكلا الطريقتين كذلك الأكثر أمانا.
1. طريقة الشرح
(أ) لإخفاء تعريف CSS في IE، يمكنك استخدام محدد فرعي:
أتش تي أم أل>الجسم ص {
}
(ب) لا يمكن فهم طريقة الكتابة التالية إلا بواسطة متصفح IE (مخفي عن المتصفحات الأخرى)
* أتش تي أم أل ص {
}
(ج) في بعض الأحيان، تريد أن يكون IE/Win نشطًا ولكن IE/Mac مخفيًا، يمكنك استخدام خدعة الشرطة المائلة العكسية:
* أتش تي أم أل ص {
تصريحات
}
2. طريقة التعليقات الشرطية
هناك طريقة أخرى، والتي أعتقد أنها تم اختبارها عبر الزمن أكثر من CSS Hacks، وهي استخدام التعليقات الشرطية الخاصة بالسمة الخاصة لـ Microsoft (التعليقات الشرطية). باستخدام هذه الطريقة، يمكنك تحديد بعض الأنماط بشكل منفصل لـ IE دون التأثير على تعريف ورقة الأنماط الرئيسية.
17. نصائح التصحيح: ما هو حجم الطبقات؟
عند تصحيح أخطاء CSS، عليك أن تكون مثل الآلة الكاتبة وتحلل كود CSS سطرًا تلو الآخر. عادةً ما أقوم بتحديد لون الخلفية على الطبقة المعنية، لذلك يكون من الواضح مقدار المساحة التي تشغلها الطبقة. يقترح بعض الأشخاص استخدام border، وهو أمر ممكن بشكل عام، ولكن المشكلة تكمن في أنه في بعض الأحيان ستؤدي الحدود إلى زيادة حجم العناصر، وسيؤدي كل من border-top وboeder-bottom إلى تدمير قيمة الهامش الرأسي، لذلك يكون استخدام الخلفية أكثر أمانًا.
خاصية أخرى غالبا ما تسبب مشاكل هي الخطوط العريضة. يبدو المخطط التفصيلي مثل boeder، لكنه لا يؤثر على حجم العنصر أو موضعه. يدعم عدد قليل فقط من المتصفحات سمة المخطط التفصيلي، والمتصفحات الوحيدة التي أعرفها هي Safari وOmniWeb وOpera.
18. أسلوب كتابة كود CSS
عند كتابة تعليمات برمجية CSS، يكون لكل شخص عاداته الخاصة في الكتابة فيما يتعلق بالمسافات البادئة وفواصل الأسطر والمسافات. وبعد التدريب المستمر، قررت أن أعتمد أسلوب الكتابة التالي:
محدد 1,
محدد2 {
الخاصية:القيمة؛
}
عند استخدام التعريفات الموحدة، عادةً ما أكتب كل محدد في السطر الخاص به بحيث يسهل العثور عليه في ملف CSS. أضف مسافة بين المحدد الأخير والأقواس المتعرجة {. واكتب أيضًا كل تعريف على السطر الخاص به. ويجب وضع الفاصلة المنقوطة مباشرة بعد قيمة السمة.
أنا معتاد على إضافة فاصلة منقوطة بعد كل قيمة سمة على الرغم من أن القواعد تسمح بعدم الحاجة إلى كتابة الفاصلة المنقوطة بعد قيمة السمة الأخيرة، إذا كنت تريد إضافة نمط جديد، فمن السهل أن تنسى إضافة الفاصلة المنقوطة و. يسبب خطأ، لذلك لا تزال إضافته أفضل.
وأخيرًا، يتم كتابة قوس الإغلاق } على سطر بمفرده.
المسافات وفواصل الأسطر تساعد على القراءة.
