Верстка не блоків, а об'єктів

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

Практика: наприклад, у нас є три блоки:

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-(*). Тепер можна не побоюватися зачепити загальне оформлення блоків змінюючи властивості об'єктів, також легко ними оперувати.