Верстка не блоків, а об'єктів
24.01.2011
Верстаючи макет, чому б не продумувати заздалегідь ситуації, коли вам доведеться щось міняти. І щоб вам не довелося дописувати нові класи, особливо коли макет вже перенесений на будь-який движок.
Практика: наприклад, у нас є три блоки:

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-(*). Тепер можна не побоюватися зачепити загальне оформлення блоків змінюючи властивості об'єктів, також легко ними оперувати.
ПІДПИСАТИСЯ НА РОЗСИЛКУ НОВИН
Останнє в нашому блозі
Інтернет маркетинг
04.11.2019
Інтернет маркетинг
03.10.2019