Приветствую.
Часто при верстке сталкиваюсь с этим вопросом, как же все таки правильней с точки зрения удобства дальнейшего редактирования и создания новых страниц с похожей структурой. То есть попросту говоря с дальнейшей поддержкой.
Приведу конкретный пример.
Есть страница с новостями и страница с книгами автора, у обоих страниц одинаковая структура контента и стили.
<main class="cont">
<div class="inner">
<div class="items">
<div class="item">
<div class="preview">
<img alt="" src="">
</div>
<div class="announce">
<h2>Заголовок</h2>
<div class="date">Дата</div>
<p>Текст...</p>
</div>
<a class="more-link" href="">ссылка подробнее</a>
</div>
</div>
</div>
</main>
Тут все понятно.
Но что если нам на странице новостей нужна картинка побольше, если изменим размер соответственно он изменится и на странице с книгами, а нам этого не нужно.
Я тут вижу два варианта.
1. Так как я привык верстать указывая элементам классы которые передают смысл содержимого, то эту задачу я бы решил таким образом.
<main class="cont">
<div class="inner">
<div class="news-items">
<div class="item">
<div class="news-preview">
<img alt="" src="">
</div>
<div class="news-announce">
<h2>Заголовок</h2>
<div class="date">Дата</div>
<p>Текст...</p>
</div>
<a class="more-link" href="">ссылка подробнее</a>
</div>
</div>
</div>
</main>
И так же с книгами, чтобы отражать смысл содержимого элементов, вместо
"news" указать
"books". Но тогда в CSS появляются два разных селектора с практически одинаковыми стилями, т.е. немного лишнего когда.
2. Но можно еще не добавляя префиксов в классы, обернуть все это дело в блок с классом news и books, и уже относительно них делать изменения если необходимо, т.е. в стилях указывать селекторы вида .news .preview {} и т.д.
Смысл содержимого в принципе остается.
Какой вариант вы бы выбрали?
Средний
