Источник: rusdoc
Сегодня в очередной раз мне посчастливилось столкнуться с версткой облака тегов. Такого, знаете, стандартного, без излишеств и дизайнерских наворотов. Обычно конструкция данного блока становилась в итоге похожей на:
Классы w1, w2, w3 и т.д. расставляются по мере увеличения весомости тега и, следовательно, увеличивают размеры шрифта.
Для наглядности покажу, как это выглядит в браузере:
Сегодня же я изменил этот блок и получил неожиданный результат - именование классов в соответствии с общепринятыми обозначениями размеров одежды удобно и в данном случае (XS < S < M < L < XL < XXL < XXXL). Если нужно больше пунктов, это решается добавлением в конец или начало списка элемента с нужным количеством предшествующих знаков X. В итоге конструкция прекрасно видоизменяется, а мы радуемся ее приобретенной семантичности.
<ul class="tags">
<li class="w1"><a href="#">amv</a></li>
<li class="w2"><a href="#">anime</a></li>
<li class="w3"><a href="#">music</a></li>
<li class="w4"><a href="#">tnt</a></li>
<li class="w5"><a href="#">авария</a></li>
</ul>
Классы w1, w2, w3 и т.д. расставляются по мере увеличения весомости тега и, следовательно, увеличивают размеры шрифта.
Для наглядности покажу, как это выглядит в браузере:
Сегодня же я изменил этот блок и получил неожиданный результат - именование классов в соответствии с общепринятыми обозначениями размеров одежды удобно и в данном случае (XS < S < M < L < XL < XXL < XXXL). Если нужно больше пунктов, это решается добавлением в конец или начало списка элемента с нужным количеством предшествующих знаков X. В итоге конструкция прекрасно видоизменяется, а мы радуемся ее приобретенной семантичности.
<ul class="tags">
<li class="s"><a href="#">amv</a></li>
<li class="m"><a href="#">anime</a></li>
<li class="l"><a href="#">music</a></li>
<li class="xl"><a href="#">tnt</a></li>
<li class="xxl"><a href="#">авария</a></li>
</ul>