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

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

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

240111-statya-2

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

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


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

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

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


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

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

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