تجميع عدة مختارات CSS

مجموعة مختارات CSS متعددة لتحسين سرعة التحميل

الكفاءة هي عامل مهم في موقع ويب ناجح. يجب أن يكون هذا الموقع فعالاً في كيفية استخدام الصور عبر الإنترنت . سيساعد هذا على ضمان أداء الموقع بشكل جيد للزوار وتحميله بسرعة على أجهزتهم. يجب أن تكون الكفاءة أيضًا جزءًا من العملية العامة ، مما يساعدك في الحفاظ على تقدم الموقع في الوقت المحدد وفي حدود الميزانية.

في النهاية ، تلعب الكفاءة دورًا في جميع جوانب إنشاء موقع الويب والنجاح على المدى الطويل ، بما في ذلك الأنماط المكتوبة لأوراق CSS الخاصة بهذا الموقع. تعد إمكانية إنشاء ملفات CSS أكثر سلاسة ونظافة أمرًا مثاليًا ، وتتمثل إحدى الطرق التي يمكنك من خلالها تحقيق ذلك في تجميع عدة معامِلات CSS معًا.

تجميع المحددات

عند تجميع محددات CSS ، تقوم بتطبيق الأنماط نفسها على عدة عناصر مختلفة دون تكرار الأنماط في ورقة الأنماط الخاصة بك. فبدلاً من وجود قاعدتين أو ثلاثة أو أكثر من قواعد CSS ، كل ذلك يفعل الشيء نفسه (على سبيل المثال ، تعيين لون شيء ما إلى اللون الأحمر) ، يكون لديك قاعدة CSS واحدة تحقق لصفحتك.

هناك عدد من الأسباب التي تجعل "تجميع المحددات" يفيد صفحة. في البداية ، ستكون ورقة الأنماط الخاصة بك أصغر ويتم تحميلها بسرعة أكبر. باعتراف الجميع ، أوراق نمط ليست واحدة من الأسباب الرئيسية عندما يتعلق الأمر بطء تحميل المواقع. ملفات CSS عبارة عن ملفات نصية ، لذا حتى لو كانت أوراق CSS طويلة جدًا ، فهي صغيرة جدًا من حيث حجم الملف ، بالمقارنة مع الصور غير المُثبَّتة. ومع ذلك ، كل أعداد قليلة ، وإذا كنت تستطيع حلق بعض حجم CSS وتحميل الصفحات بسرعة أكبر ، فهذا أمر جيد دائمًا.

بشكل عام ، تقل سرعة التحميل عن المواقع في أقل من 3 ثوانٍ ؛ من 3 إلى 7 ثوانٍ حول المتوسط ​​، وأكثر من 7 ثوانٍ بطيء جدًا. هذه الأرقام المنخفضة تعني ، لتحقيق ذلك مع موقعك ، تحتاج إلى القيام بكل ما تستطيع! هذا هو السبب في أنه يمكنك المساعدة في الحفاظ على موقعك سريعًا باستخدام محددات CSS المجمّعة.

كيفية تجميع مختارات CSS

لتجميع محددات CSS معًا في ورقة الأنماط ، يمكنك استخدام الفواصل للفصل بين أدوات التحديد المجمعة المتعددة في النمط. في المثال أدناه ، يؤثر النمط على عناصر p و div:

div، p {color: # f00؛ }

الفاصلة تعني أساسا "و". لذلك ينطبق هذا المحدد على جميع عناصر الفقرة وجميع عناصر القسمة. إذا كانت الفاصلة مفقودة ، فستكون بدلاً من ذلك جميع عناصر الفقرة التي تمثل طفلاً في التقسيم. هذا هو نوع مختلف جدا من محدد ، لذلك هذه الفاصلة حقا تغيير معنى محدد!

يمكن تجميع أي شكل من محددات مع أي محدد آخر. في هذا المثال ، يتم تجميع محدد الصف مع محدد الهوية:

p.red، #sub {color: # f00؛ }

لذلك ينطبق هذا النمط على أي فقرة ذات سمة صنف "أحمر" ، وأي عنصر (بما أننا لم نحدد أي نوع) يحتوي على خاصية المعرف "sub".

يمكنك تجميع أي عدد من المحددات معًا ، بما في ذلك المحددات التي هي كلمات فردية ومحدّدات compund. يتضمن هذا المثال أربعة محددات مختلفة:

p، .red، #sub، div a: link {color: # f00؛ }

لذلك تنطبق قاعدة CSS على ما يلي:

• أي عنصر الفقرة
• أي عنصر بفئة "أحمر"
• أي عنصر بمعرف "sub"
• فئة "الوصلة" الزائفة لعناصر الارتساء التي تكون منقسمة للقسمة.

هذا الأخير هو محدد المركب. يمكنك أن ترى أنه يمكن دمجه بسهولة مع المحددات الأخرى في قاعدة CSS هذه. بهذه القاعدة ، نقوم بتعيين لون # f00 (وهو أحمر) في هذه المحددات الأربعة ، وهو الأفضل لكتابة 4 محددات منفصلة لتحقيق نفس النتيجة.

من الفوائد الأخرى لتجميع المحددات أنه إذا احتجت إلى إجراء تغيير ، فيمكنك تعديل قاعدة CSS واحدة بدلاً من قواعد متعددة. وهذا يعني أن هذا الأسلوب يوفر عليك وزن الصفحة ووقتها عندما يتعلق الأمر بالحفاظ على الموقع في المستقبل.

يمكن تجميع أي محدد

كما ترى من الأمثلة السابقة ، يمكن وضع أي محدد صالح في مجموعة ، وستكون جميع العناصر في المستند التي تطابق جميع العناصر المجمعة لها نفس النمط بناءً على خاصية النمط تلك.

يفضل بعض الأشخاص إدراج العناصر المجمعة في أسطر منفصلة للوضوح في الشفرة. يظل المظهر على الموقع وسرعة التحميل كما هو. على سبيل المثال ، يمكنك دمج الأنماط المفصولة بفواصل في خاصية نمط واحدة في سطر واحد من التعليمات البرمجية:

th، td، p.red، div # firstred {color: red؛ }

أو يمكنك سرد الأنماط على أسطر فردية من أجل الوضوح:

عشر،
الدفتيريا،
p.red،
شعبة # firstred
{
لون احمر؛
}

تعمل كل من الطريقة التي تستخدمها لتجميع عدة محددات CSS على تسريع موقعك وتسهيل إدارة الأنماط على المدى الطويل.

المقالة الأصلية لجنيفر كرينين. حرره جيرمي جيرار في 5/8/17.