Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

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

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

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

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-(*). Теперь можно не опасаться задеть общее оформление блоков изменяя свойства объектов, также легко ними оперировать.
Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)