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

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

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

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

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-(*). Теперь можно не опасаться задеть общее оформление блоков изменяя свойства объектов, также легко ними оперировать.
Давайте дружить!
Поставьте нравится 👍
Спасибо, я уже с вами!
Звоните нам
Вы подписались на нашу рассылку
Спасибо!
Мы обещаем, что не будем спамить, все только самое
нужное и полезное для вашего развития.
Спасибо!
Мы свяжемся с Вами в ближайшее время
ЛОВИТЕ БОНУС
Бесплатный аудит контекстной рекламы Google Adwords.
Прокачаем ваш контекст!