سؤال

أدرك أنه في jQuery، من المفيد أن تكون أكثر تحديدًا عند استخدام المحددات حتى لا تضطر jQuery إلى اجتياز DOM بالكامل للعثور على ما تبحث عنه.على سبيل المثال، $('span.description') أفضل من مجرد $('.description') إذا كنت أعرف أن description يتم تطبيق الفصل فقط على <span> عناصر.

فهل هذا هو الحال مع CSS أيضًا؟هل هناك أي ميزة محددة بالنسبة لي لاستخدامها span.description { } بدلاً من .description { }؟أفكر في السرعة والتحسين وما إلى ذلك.هل أقوم بحفظ أي عمل للمتصفح من خلال إخباره بالمكان الذي يجب أن يبحث فيه بالضبط؟

هل كانت مفيدة؟

المحلول

وهذا صحيح في CSS -

القاعدة الجيدة هي النزول من أقرب معرف.تتم فهرسة المعرفات بحيث يكون تحديد موقعها سريعًا للغاية.لا يوجد سبب لاستخدام أكثر من واحد في المحدد الخاص بك.

Google Code- تحسين عرض المتصفح

أجاب هذا على الكثير من الأسئلة التي كانت لدي حول هذا الموضوع بما في ذلك هذا الشخص- آمل أن تجدها مفيدة.

نصائح أخرى

اقرأ عن خصوصية CSS - وهو السبب الأكثر أهمية لتكون أكثر أو أقل تحديدًا مع CSS الخاص بك.

http://www.w3.org/TR/CSS2/cascade.html#specity

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

يحرر

هذا يبدو وكأنه نسخة مكررة قليلاً:

سؤال حول أداء CSS

وذلك يعتمد دائما على لديك مبلغ من الكود والهيكل. فمن المؤكد أن فكرة جيدة لاستخدام هويات خاصة ومحددات المناسبة. (أي #nav لى بدلا من li.nav). منذ المتصفح أولا تحميل أتش تي أم أل ومن ثم تطبيق المغلق انك تساعد كثيرا.

وقال هذا، عندما يتعلق الأمر المغلق النقي (أي مسج) الفرق في السرعة في الوقت الحاضر ليس من السهل تمييز، لأن محركات تقديم والأمثل للغاية - وخاصة عندما يتعلق الأمر بتطبيق المغلق. في العادة لذلك يجب أن لا يهم.

وكما بقدر ما أعرف، كيف محددة محددات الخاصة بك جعل الفارق ضئيل جدا على الأداء.

والمنطقتين حيث محددات أكثر تحديدا هي الأكثر فائدة، هو للحد من مخاطر انها ليست تطبيقها حيث كنت لا تريد ذلك، وجعل محدد واحد الأسبقية على آخر.

وهناك قاعدة أكثر تحديدا لها الأسبقية على قاعدة أقل تحديدا، لذلك:

span.myclass {}

وله الأسبقية على:

.myclass {}

و(بغض النظر عن ما تم فيها الإعلان عن قواعد النظام)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top