عند تجميع محددات CSS ، فإنك تقوم بتطبيق نفس الأنماط على عدة عناصر مختلفة دون تكرار الأنماط في ورقة الأنماط الخاصة بك. بدلاً من وجود قاعدتين أو ثلاثة أو أكثر من قواعد CSS التي تفعل الشيء نفسه (اضبط لون شيء ما على اللون الأحمر ، على سبيل المثال) ، يمكنك استخدام قاعدة CSS واحدة تحقق نفس الشيء. سر تكتيك تعزيز الكفاءة هذا هو الفاصلة.
كيفية تجميع محددات CSS
لتجميع محددات CSS في ورقة أنماط ، استخدم الفواصل للفصل بين المحددات المجمعة المتعددة في الاسلوب. في هذا المثال ، يؤثر النمط على عنصري p و div:
div، p {color: # f00؛ }
في هذا السياق ، تعني الفاصلة "و" ، لذلك ينطبق هذا المحدد على جميع عناصر الفقرة وجميع عناصر القسمة. إذا كانت الفاصلة مفقودة ، فسيتم تطبيق المحدد بدلاً من ذلك على جميع عناصر الفقرة التي تعتبر تابعة للقسمة. هذا نوع مختلف من المحددات ، لذا فإن الفاصلة مهمة.
يمكنك تجميع أي شكل من المحددات مع أي محدد آخر. يقوم هذا المثال بتجميع محدد فئة مع محدد معرف:
p.red، # sub {color: # f00؛ }
ينطبق هذا النمط على أي فقرة لها سمة الفئة أحمر وأي عنصر (لأن النوع غير محدد) بسمة ID الفرعية.
يمكنك تجميع أي عدد من المحددات ، بما في ذلك المحددات التي تتكون من كلمات مفردة ومحددات مركبة. يتضمن هذا المثال أربعة محددات مختلفة:
p، .red، #sub، div a: link {color: # f00؛ }
تنطبق قاعدة CSS هذه على:
- أي عنصر فقرة
- أي عنصر بفئة أحمر
- أي عنصر بمعرف الفرعية
- ال حلقة الوصل فئة زائفة لعناصر المرساة المنحدرة من أحد الأقسام.
المحدد الأخير هو محدد مركب. كما هو موضح ، يتم دمجه بسهولة مع المحددات الأخرى في قاعدة CSS هذه. تحدد القاعدة لون # f00 (أحمر) على هذه المحددات الأربعة ، ويفضل كتابة أربعة محددات منفصلة لتحقيق نفس النتيجة.
يمكن تجميع أي محدد
يمكنك وضع أي محدد صالح في مجموعة ، وسيكون لكل العناصر الموجودة في المستند التي تطابق جميع العناصر المجمعة نفس النمط بناءً على خاصية النمط تلك.
يفضل بعض المصممين سرد عناصر مجمعة على أسطر منفصلة من أجل الوضوح في الكود. يظل المظهر على موقع الويب وسرعة التحميل كما هي. على سبيل المثال ، يمكنك دمج أنماط مفصولة بفواصل في خاصية نمط واحدة في سطر واحد من التعليمات البرمجية:
th، td، p.red، div # firstred {color: red؛ }
أو يمكنك سرد الأنماط على الخطوط الفردية للتوضيح:
العاشر،
الدفتيريا ،
ص الأحمر ،
div # firstred
{
لون احمر؛
}
لماذا مجموعة محددات CSS؟
يساعد تجميع محددات CSS في تقليل حجم ورقة الأنماط الخاصة بك بحيث يتم تحميلها بشكل أسرع ، ومن المسلم به أن أوراق الأنماط ليست السبب الرئيسي في التحميل البطيء ؛ ملفات CSS هي ملفات نصية ، لذلك حتى أوراق CSS الطويلة جدًا تكون صغيرة جدًا عند مقارنتها بالصور غير المحسّنة. ومع ذلك ، فإن كل جزء من التحسين يساعد ، وإذا كان بإمكانك تقليل بعض الحجم من CSS وتحميل الصفحات بشكل أسرع ، فهذا أمر جيد.
يجعل تجميع محددات أيضًا صيانة الموقع أسهل بكثير. إذا كنت بحاجة إلى إجراء تغيير ، فيمكنك ببساطة تعديل قاعدة CSS واحدة بدلاً من عدة قواعد. هذا النهج يوفر الوقت والجهد.
خلاصة القول: يؤدي تجميع محددات CSS إلى تعزيز الكفاءة والإنتاجية والتنظيم ، وفي بعض الحالات ، حتى سرعة التحميل.