سرعة/تكرار المحددات في CSS [مغلق]

Question

هل لدى أي شخص معلومات حول سرعات محدد المتصفح في CSS؟بمعنى آخر، كيف يمكن مقارنة المحددات المختلفة ببعضها البعض (في نفس المتصفح).

على سبيل المثال، غالبًا ما أرى (وأكتب) رمزًا مثل هذا:

#content #elem { ...rules... }

ولكن بما أن هذه العناصر عبارة عن معرفات فريدة، فيجب أن أحتاج إليها فقط #elem, ، يمين؟لقد جعلني هذا أفكر فيما إذا كان من الأسرع أن تحتوي المتصفحات على محددات أكثر تعقيدًا - تفكيري هو أن المتصفح قد يجد #content ونعلم أن ننظر فقط في هذا العنصر، وليس في أي مكان آخر.

مثال آخر قد يكون table tr td .class ضد table .class

Answer 1

لأكون صادقًا، أنت تتحدث لفترة قصيرة جدًا من الوقت لدرجة أنني لا أعتقد أن ذلك يحدث فرقًا حقًا.

فيما يتعلق باستخدام محددات أكثر تحديدًا - أعتقد أن هذه ممارسة جيدة لعدة أسباب:

1. إنه يعزز إمكانية قراءة التعليمات البرمجية - في لمحة سريعة يمكنك رؤية المزيد من الأماكن التي يتم فيها تطبيق محدداتك بالنسبة إلى HTML.
2. إنه يقلل من احتمالية الكتابة فوق محدداتك في مكان آخر، حيث أنه سيتم كتابة محدد ذو خصوصية أكبر وهو أمر غير مرجح جدًا أن يحدث.

ما الذي تتحدث عنه يمكن تحدث فرقًا عند استخدام مكتبات JavaScript مثل jQuery - حيث يتعين عليهم تحليل المستند بالكامل بأنفسهم، لكنني بالتأكيد لم ألاحظ أبدًا أي اختلافات في السرعة بنفسي.

Answer 2

هنا هي بعض المعلومات التي حصلت عليها بعد بحث سريع .

Answer 3

ويمكن أن يكون هناك اختلاف في السرعة ولكن ليست في إدراكه وفهمه في أي حالة الاستخدام العادي. السبب الحقيقي لكتابة CSS الخاص بك من هذا القبيل هو خصوصية. هذا إذا كان لديك

#content #elem {color: black;} 

و

#elem {color: red;}

يجب أن تكون ملونة العنصر الأسود لأن ذلك هو حكم أكثر تحديدا.

Answer 4

وليس أن يكون الرجل الحكيم، ولكن الوقت الذي استغرقته لك لكتابة هذا السؤال ربما يتجاوز مجموع كل الوقت وفورات جميع مستخدمي هذا في أي وقت زيارة موقع الويب الخاص بك (فيما يتعلق #ID # ID2 مقابل # ID2) . فهل من الوقت لكتابة هذه الإجابة ....

وقد يصوت لي أسفل الآن:)

Answer 5

المبادئ التوجيهية موزيلا قد تكون مثيرة للاهتمام.

Answer 6

1. هناك دائمًا بعض الاختيار بين الكفاءة وسهولة القراءة.بالطبع table tr td .class هو الأكثر قابلية للقراءة، ولكنه غير فعال للغاية ويمكن تبسيطه - هل رأيت أي مكان (افترض ترميزًا صالحًا) tr بدون table أو td بدون tr؟على الأقل يمكنك التعليق على جزء زائدة عن الحاجة مثل:

   /* table tr */ td .class {
       color: #ccf;
   }
   

2. في بعض الأحيان، كما ذكر آخرون، تحتاج إلى مزيد من التحديد، على سبيل المثال.لك #elem يجب أن يكون باللون الأحمر في كل مكان إلا في سياق محدد #content.

   #elem {
       /* usually red */
       color: red;
   }
   
   #content #elem {
       /* except when in specific context */
       color: black;
   }