Верстка не блоков, а объектов

Верстая макет, почему бы не продумывать заранее ситуации, когда вам придется что-то менять. И чтобы вам не пришлось дописывать новые классы, особенно когда макет уже перенесен на какого-либо рода движок.

Практика: к примеру у нас есть три блока:

1)Простой типичный подход:
<ul class="links-list">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>
<ul class="links-list">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>
<ul class="links-list">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>

В этом случае мы получаем доступ к трем блокам и можем изменять css-стили 3-х блоков одновременно.


2)Семантичный подход

<ul class="links-list-1">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>
<ul class="links-list-2">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>
<ul class="links-list-3">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>

В таком подходе мы получаем доступ опять же к трем блокам, но поменять в них одновременно можно будет не в один присест.


3)Объектный подход,

<ul class="links-list links-list-1">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>
<ul class="links-list links-list-2">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>
<ul class="links-list links-list-3">
<li><a href="https://webakula.ua#">Выберите один из 8</a></li>
<li><a href="https://webakula.ua#">Виберите один из 8</a></li>
</ul>

Этот подход мне нравиться, можно обратиться одновременно в блокам links-list, и также давать индивидуальные настройки объектам links-list-(*). Теперь можно не опасаться задеть общее оформление блоков изменяя свойства объектов, также легко ними оперировать.