تلخص هذه المقالة بعض تقنيات CSS الشائعة لوضع الأساس لإعادة بناء موقع الويب، وآمل أن تتعلم شيئًا مفيدًا.
1. استخدم اختصارات CSS
يمكن أن يساعد استخدام الاختصارات في تقليل حجم ملفات CSS وتسهيل قراءتها. للتعرف على القواعد الرئيسية لاختصارات CSS، يرجى الرجوع إلى "بناء الجملة الأساسي لـ CSS".
2. حدد الوحدة بوضوح ما لم تكن القيمة 0
يعد نسيان تحديد وحدات البعد خطأً شائعًا بين المبتدئين في CSS. في HTML، يمكنك فقط كتابة ;100، ولكن في CSS عليك إعطاء وحدة محددة، مثل: " width:100em. هناك استثناءان فقط حيث يمكنك ترك الوحدة غير محددة: ارتفاع السطر وقيمة 0. وبخلاف ذلك، ستتم إزالة كل شيء آخر يجب أن تتبعها الوحدة. يجب الحرص على عدم إضافة مسافات بين القيمة والوحدة.
3. حساس لحالة الأحرف
عند استخدام CSS في XHTML، تكون أسماء العناصر المحددة في CSS حساسة لحالة الأحرف. لتجنب هذا الخطأ، أوصي باستخدام الأحرف الصغيرة لجميع أسماء التعريفات.
تعد قيم الفئة والمعرف أيضًا حساسة لحالة الأحرف في HTML وXHTML. إذا كان عليك كتابة حالة مختلطة، فيرجى التأكد بعناية من أن تعريفك في CSS يتوافق مع العلامات الموجودة في XHTML.
4. قم بإلغاء قيود العنصر قبل الفصل والمعرف
عندما تكتب لتحديد فئة أو معرف لعنصر ما، يمكنك حذف مؤهل العنصر السابق، لأن المعرف فريد في الصفحة ويمكن استخدامه عدة مرات في الصفحة. ليس من المنطقي بالنسبة لك أن تقوم بتأهيل عنصر ما. على سبيل المثال:
div#content { /* الإعلانات */ }
fieldset.details { /* الإعلانات */ }
يمكن كتابتها كما
#content { /* الإعلانات */ }
.التفاصيل { /* الإعلانات */ }
وهذا يحفظ بعض البايتات.
5. القيمة الافتراضية
عادةً ما تكون القيمة الافتراضية للحشوة هي 0، والقيمة الافتراضية للون الخلفية هي شفافة. لكن القيمة الافتراضية قد تكون مختلفة في المتصفحات المختلفة. إذا كنت خائفًا من التعارضات، يمكنك تحديد قيم الهامش والحشو لجميع العناصر لتكون 0 في بداية ورقة الأنماط، كما يلي:
* {
الهامش:0;
الحشو: 0؛
}