Как правильно указать классы для блоков разных по смыслу но одинаковых по структуре?

Question

massef @massef

HTML
CSS

Как правильно указать классы для блоков разных по смыслу но одинаковых по структуре?

Приветствую.

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

Приведу конкретный пример.

Есть страница с новостями и страница с книгами автора, у обоих страниц одинаковая структура контента и стили.

<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 {} и т.д.
Смысл содержимого в принципе остается.

Какой вариант вы бы выбрали?