Что лучше использовать в CSS - один универсальный селектор в нескольких местах или несколько конкретных селекторов?

Question

Какая практика лучше?

.listing { some attributes:some values;}

применяется к нескольким местоположениям (например, результаты поиска, список категорий)

или

.search-list,
.category-list,
.other-list { some attributes:some values;}

Мне кажется, что второй вариант обеспечивает больше гибкости для будущих изменений стиля без изменения (x) html, а также более простое обслуживание благодаря точному знанию того, где применяются правила, но требует большей пропускной способности для загрузки и обработки в браузере для анализа.

Интересуют ваши мысли.

Спасибо, Jonathan

Answer 1

Использовать контекст, как это реализовано с помощью дочерних селекторов (изменено на основе вашего комментария ниже).Это проясняет, какие атрибуты являются частью общего списка и какие атрибуты относятся к списку поиска.

.list li { default attributes: default values }
#search-list li { attributes specific to search listings: some values; }

with markup

<ul id="search-list" class="list">
  <li>...

Недавно я работал с некоторыми ведущими дизайнерами.Они отрицательно говорят о разметке, которая имеет «div-itis» или «class-itis» (они пропустили бы приведенный выше список класса и стиль ul).Чтобы противостоять этому, они используют идентификаторы и собственные теги, такие как li , h5 и т. Д. Внутри.Так как это PITA для очистки значений по умолчанию, они определяют только несколько значений по умолчанию и используют контекстные селекторы для остальных.Они используют несколько имен классов, когда они им нужны.Они также склонны использовать компас или меньше, потому что эти среды допускают контекстные селекторы и дополнения.

Answer 2

Вы можете добавить

.elephant-list,
.aardvark-list,
.platypus-list,

также в ожидании будущего расширения, но наступает момент, когда вы переходите от гибкого к абсурдному. Нет причин кодировать специальные имена для классов, которые, по вашему мнению, не должны отличаться.

Если вы обнаружите, что они должны отличаться в будущем, добавьте их. Также с эстетической точки зрения, имея .listing подразделений, которые разделяют одни и те же стили, это хорошая вещь.