---
title: CSS Performance
localeTitle: أداء CSS
---
## أداء CSS

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

### أداء المختارين المختلفين

انظر إلى هذا المثال:

 `#unique-id { }         // fastest 
 .general-class { }  // also fast 
 li { }              // ok 
 * { }               // slow 
` 

من غير المستغرب أن تكون أدوات تحديد الهوية هي الأسرع ، تليها الفصول الدراسية. تتم معالجة عناصر العلامات البسيطة مثل `div` أو `li` ببطء نسبيًا.

### كيف يتم تحديد عنصر

تخيل CSS التالي:

 `nav ul li a { 
  color: #fff; 
 } 
` 

هذه ليست فكرة جيدة. هناك طرق أفضل لتحديد عنصر ارتباط في التنقل. ولكن كيف يحدد الكمبيوتر العنصر الصحيح؟ أولا يجدها كل `a` عنصر على الصفحة الخاصة بك. ثم يتحقق إذا كان داخل عنصر `li` ، داخل `ul` داخل `div` . لذا ، يقرأ المتصفح المحددات من اليمين إلى اليسار. إذا كان لديك مئات الروابط ، فقد يستغرق ذلك بعض الوقت ، فما الذي يجب عليك فعله؟

### تحسين أداء CSS

شئ متعارف عليه:

*   تجنب محددات السليل ، مثل `ul li a` وما `ul li a` ذلك.
*   لا نخجل من استخدام الكثير من أسماء الصف الوصفية `.footer-nav-link`
*   حاول استخدام محدد الطفل بدلاً من ذلك إذا كنت تريد تحديد طفل مباشر لعنصر `.image-container > img`
*   تجنب استخدام المحددات العامة `* { }`

### هل هذا حقا كل ما هو ضروري؟

قد تكون هذه مشكلة منذ عشرين عامًا عندما لم تكن أجهزة الكمبيوتر سريعة بالسرعة التي هي عليها اليوم. من فضلك لا تتفادى المختارين في المستقبل تماما. ولكن ضع في اعتبارك أن هدفك هو كتابة CSS قابل للصيانة ، لذلك قد يكون التفكير قليلاً مناسبًا. في بعض الأحيان ، لا يعد `nav ul li a` تحديد فكرة جيدة على صفحة تحتوي على مئات الروابط.