In my experience with SMACSS, I have encountered a common issue - determining the correct approach to constructing adaptive content modules.
For instance, let's say I have layout grid classes (.container, .row, .span-1, .span-N) along with media queries for responsive design.
I want to apply the same principles to content modules to control their adaptive behavior, such as dividing a link list into columns:
<ul class="list">
<li class="list-el"> item 1</li>
<li class="list-el"> item 1</li>
<li class="list-el"> item 1</li>
<li class="list-el"> item 1</li>
</ul>
I can achieve this by adding layout classes to module elements like so:
<ul class="list row">
<li class="list-el span-3"> item 1</li>
<li class="list-el span-3"> item 1</li>
<li class="list-el span-3"> item 1</li>
<li class="list-el span-3"> item 1</li>
</ul>
However, this approach creates a tight coupling between layout and module, which goes against the core principle of SMACSS that modules should be independent from layout.
Another option is to create a special module (.adapt) and nest the content module within it like this:
<div class="adapt">
<div class="adapt-span3">
<ul class="list">
<li class="list-el"> item 1</li>
<li class="list-el"> item 1</li>
<li class="list-el"> item 1</li>
<li class="list-el"> item 1</li>
</ul>
</div>
<div class="adapt-span3">
<ul class="list"> ... </ul>
</div>
<div class="adapt-span3">
<ul class="list"> ... </ul>
</div>
<div class="adapt-span3">
<ul class="list"> ... </ul>
</div>
</div>
This method adheres to the rules but results in overly complex HTML markup.
So the question remains - What approach do you take to build adaptive content modules in SMACSS?