تعد CSS واحدة من أقوى الأدوات المتاحة لمصممي الويب. باستخدامه يمكننا تغيير واجهة موقع الويب في بضع دقائق دون تغيير علامات الصفحة. ولكن على الرغم من أن كل واحد منا يدرك أنه مفيد، إلا أن محددات CSS بعيدة كل البعد عن تحقيق إمكاناتها، وفي بعض الأحيان نميل إلى استخدام فئات مفرطة وغير مجدية، ومعرفات، وdivs، ومساحات، وما إلى ذلك. HTML الخاص بنا فوضوي للغاية.
أفضل طريقة لتجنب السماح لهذه "الآفات" بالانتشار في ترميزك وإبقائها نظيفة ودلالية هي استخدام محددات CSS أكثر تعقيدًا يمكنها استهداف عناصر محددة دون استخدام فئات أو معرفات إضافية، وبهذه الطريقة يمكننا أيضًا إنشاء الكود الخاص بنا وأسلوب أكثر مرونة .
أولوية CSS
قبل الخوض في عالم محددات CSS المتقدمة، من المهم أن نفهم كيفية عمل أولويات CSS حتى نعرف كيفية استخدام محدداتنا بشكل مناسب وتجنب إضاعة الكثير من الوقت في تصحيح أخطاء شيء ما طالما أننا نولي اهتمامًا للأولويات لحل المشكلة إذا
عندما نكتب CSS، يجب أن ندرك أن بعض المحددات ستكون أعلى من المحددات الأخرى في السلسلة. المحدد الذي نكتبه في النهاية لن يتجاوز بالضرورة الأنماط التي كتبناها سابقًا على نفس العنصر.
فكيف يمكنك حساب أولوية محدد معين ؟ الأمر بسيط جدًا إذا كنت تعتقد أن الأولويات يتم التعبير عنها بأربعة أرقام مفصولة بفواصل، مثل: 1، 1، 1، 1 أو 0، 2، 0، 1
الرقم الأول (أ) عادة ما يكون 0، ما لم يتم استخدام سمة النمط على العلامة؛
الرقم الثاني (ب) هو مجموع عدد المعرفات في هذا المحدد؛
الرقم الثالث (ج) هو إجمالي محددات السمات الأخرى والفئات الزائفة المستخدمة في هذا المحدد. يتضمن ذلك الفئة (.example) ومحدد السمات (مثل li[id=red])؛
الرقم الرابع (د) يحسب العناصر (مثل الجدول، p، div، وما إلى ذلك) والعناصر الزائفة (مثل: السطر الأول، وما إلى ذلك)؛
المحدد العالمي (*) له الأولوية 0؛
إذا كان هناك محددان لهما نفس الأسبقية، فسيتم تفعيل المحدد الأحدث في ورقة الأنماط.
دعونا نلقي نظرة على بعض الأمثلة حتى يكون من الأسهل فهمها:
#الشريط الجانبي h2 – 0، 1، 0، 1
h2.title – 0، 0، 1، 1
ح2 + ص – 0، 0، 0، 2
#الشريط الجانبي ص: السطر الأول —
في المثال أدناه، سيعمل الخيار الأول لأنه يتمتع بأولوية أعلى من الثاني:
#الشريط الجانبي #الأول { اللون: أحمر } —
#الشريط الجانبي: السطر الأول { اللون: أزرق } —
من المهم أن يكون لديك على الأقل فهم أساسي لكيفية عمل الأولويات، ولكن بعض الأدوات مثل Firebug، عندما نقوم بفحص عنصر معين، تدرج جميع أزواج محددات CSS حسب أولوية المحدد لإعلامنا بأي منها موجود في عنصر معين من المفيد أن تكون المحددات صالحة.
يجعل من السهل جدًا عليك معرفة المحدد الذي يعمل على عنصر ما.