مزيج
لا يتعين عليك تكرار محددات متعددة بنفس السمات، ما عليك سوى فصل المحددات بفواصل (،).
على سبيل المثال، لديك الكود التالي:
h2 { اللون: أحمر }
.thisOtherClass { اللون: أحمر }
.yetAnotherClass { اللون: أحمر }
ثم يمكنك الكتابة:
h2، .thisOtherClass، .yetAnotherClass { اللون: أحمر }
باستخدام التركيب، يمكنك تحديد CSS متعددة في وقت واحد، مما يوفر لك الكثير من البايتات والوقت.
متداخلة
إذا كانت CSS منظمة بشكل جيد، فلن تكون هناك حاجة لاستخدام عدد كبير جدًا من الفئات أو محددات المعرفات. وذلك لأنه يمكنك تحديد المحددات داخل المحددات. (أو الأفضل من ذلك، محدد السياق - بواسطة المترجم)
على سبيل المثال:
#top { لون الخلفية: #ccc الحشو: 1em }
#أعلى h1 { اللون: #ff0 }
#أعلى ع { اللون: أحمر حجم الخط: غامق }
يؤدي هذا إلى التخلص من محددات الفئة أو المعرفات غير الضرورية إذا تم تطبيقها على HTML مثل هذا:
<div معرف = "أعلى">
<h1>الكاري بالشوكولاتة</h1> <p>هذه وصفتي لتحضير الكاري بالشوكولاتة تمامًا</p> <p>مممممممممم</p>
</div>
وذلك لأنه باستخدام المحددات الإنجليزية المنفصلة بمسافة نصف العرض، فإننا نحدد أن h1 في معرف المعرف له اللون "#ff0"، بينما يكون p باللون الأحمر والغامق.
يمكن أن يكون هذا أيضًا معقدًا بعض الشيء (نظرًا لأنه قد يكون هناك أكثر من مستويين، مثل داخل داخل داخل داخل إلخ). تحتاج إلى ممارسة المزيد.
يمكن أن يؤدي استخدام التداخل إلى قراءة تعليمات CSS البرمجية بشكل أكثر وضوحًا ويمكن تخصيص CSS للعناصر التي تحددها.