Layout not blocks, but objects

When laying out the layout, why not think through the situations when you have to change something. And so that you do not have to add new classes, especially when the layout has already been transferred to some kind of engine.

Practice: for example, we have three blocks:

1) Simple typical approach:
<ul class="links list">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>
<ul class="links list">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>
<ul class="links list">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>

In this case, we get access to three blocks and can change the css styles of 3 blocks at the same time.


2) Semantic approach

<ul class="links-list-1">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>
<ul class="links-list-2">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>
<ul class="links-list-3">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>

In this approach, we again get access to three blocks, but it will be possible to change them at the same time in more than one sitting.


3) Object approach,

<ul class="links-list links-list-1">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>
<ul class="links-list links-list-2">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>
<ul class="links-list links-list-3">
<li><a href="#">Choose one of 8</a></li>
<li><a href="#">Choose one of 8</a></li>
</ul>

I like this approach, you can refer to the links-list blocks at the same time, and also give individual settings to the links-list-(*) objects. Now you can not be afraid to touch the general design of blocks by changing the properties of objects, it is also easy to operate on them.