CSS заказ селектор

Question

Я запутался, как правильно объявить CSS селекторы с точки зрения производительности и веб-стандартов

Допуская мой HTML разметка

<div class="itemList"> 
    <div class="itemList-img-wrapper"> 
     <img class="item-img" src="reref.jpg" /> 
    </div> 
    <div class="bottom"> 
      <div class="info"> <h2>Data is invalid</h2> </div> 
    </div> 
</div> 

есть различные объявляя CSS для разработки этого HTML

Если я хочу разработать .item-IMG Я могу сделать это в двух вариантах
A:

.itemList .itemList-img-wrapper .item-img { width:100%; } 

или B:

.item-img { width:100%; } 

мне сказали, что вариация А является предпочтительным, так как это делает его уникальным, поэтому, если я использую класс .item-IMG на где-то в файле CSS, то css не будет применяться. какой из них предпочтительнее с точки зрения стандарта и производительности? И если я хочу, чтобы убедиться, что его специфичным для страницы, я должен добавить идентификатор тега в теле страницы и объявить CSS, как Предполагая, что есть страница listings.php

#listings .item-img 

или

#listings .itemList .itemList-img-wrapper .item-img 

Answer 1

B немного более совершенен, чем A, но на самом деле это не имеет значения: оба являются FAST. Существует множество других областей улучшения (меньше загруженных изображений и файлов, DL из других доменных имен, веса JS, CSS и изображений, селекторов в JS и т. Д.). Селекторы CSS близки к последним в приоритетах производительности (пробелы и комментарии в HTML-коде приходят последним imo)

Вы должны использовать, насколько я могу судить, селектор B. Но без остальной страницы S трудно ответ. Какие еще виды использования для этого класса? Будет ли оно повторно использоваться в другом месте? Как?
Почему у вас есть класс с именем List, а также элемент, но это не элемент ul? Почему вы добавляете «-img» к имени класса на img? Будет img.item также работать на вас, или просто .someParent img? Etc

Я запутался, как правильно объявить CSS селекторы с точки зрения стандартов производительности и веб-

Там нет веб-стандарт говорит вам, который селектор следует использовать;) Это о качестве кода, конвенции в вашей команде или с вашим клиентом или личными предпочтениями, думая на уровне проекта (это тяжело и требует опыта и достаточного количества PSD, предоставленных клиентом. Регулярно я должен назвать классы с 2 PSD, а затем еще 20 других ^^)

Answer 2

Дело A:

 .itemList .itemList-img-wrapper .item-img { width:100%; }

Это займет больше времени для рендеринга.

Случай B:

.item-img { width:100%; }

коротко и просто. IT будет нацеливаться на весь элемент класса «item-img».Если вы используете тот же класс для разных целей, вы можете увеличить специфичность элемента. Вы можете доходя

.itemList .item-img { width:100%; }