Именование классов

[Bassline]

Везде рекомендуется давать классам осмысленные имена. Что конкретно имеется в виду?

 

1. В соотвествии с содержимым? Тогда, на примере списка, получается так:

	<ul class="items">		<li class="link">			<a class="text" href="">Текст</a>		</li>		<li class="link">			<a class="text" href="">Текст</a>		</li>		<li class="link">			<a class="text" href="">Текст</a>		</li>		<li class="link">			<a class="text" href="">Текст</a>		</li>	</ul>

2. В соответствии с тем, чем являются? Тогда так:

	<ul class="list">		<li class="item">			<a class="link" href="">Текст</a>		</li>		<li class="item">			<a class="link" href="">Текст</a>		</li>		<li class="item">			<a class="link" href="">Текст</a>		</li>		<li class="item">			<a class="link" href="">Текст</a>		</li>	</ul>

Кроме того, не рекомендуется давать классам имена типа: link-1, red, left, 200, margin, width и т.д.

Но есть, например, сайт о клоунах, оформление там соответствующее. И пункты меню имеют разный цвет или размер шрифта, или отступы, или все сразу.

Как быть с именами в таком случае?

[Ludwig Voltman]

Осмысленные имена для стилей, как я понимаю, это такие имена, в которых схватывается сущность стилизуемого элемента. В БЭМ, например, сущность блока понимают так: "имя блока должно говорить о том, что делает этот блок", т.е. сущностью является функция того или иного блока/элемента.

Помимо сущности мы можем выделить явление. То есть конкретную реализацию сущности. Явлений много - сущность одна. В данном случае явлением является оформление. Оно динамично. Можно провести редизайн и внешне сайт с клоунами поменяется (т.е. изменится явление), но сущность его останется неизменной - он всё-равно останется сайтом о клоунах.

Edited December 6, 2013 by Ludwig Voltman

[Zverushka]

Для разных-цветов меню на сайте клоуна использовать .menu-item-blue, .menu-item-red итд - вполне понятные названия.

Для обычного меню достаточного одного названия - .main-menu - все вложенные теги не требуют классов, так как в пределах сущности основного меню ниче такого быть не может - пукнт - это li - и дураку понятно, a - это конкретная ссылка - и лишние классы лишь переусложнят код - их названия будут избыточны.

Edited December 6, 2013 by Zverushka