Следует ли избегать имен классов CSS, таких как 'floatleft', которые напрямую описывают прикрепленный стиль?
Многие веб-сайты используют такие имена классов, как floatleft , clearfloat , alignright , small , center и т. д., которые описывают стиль, прикрепленный к классу. Кажется, это имеет смысл, поэтому при написании нового контента вы можете легко обернуть (например) вокруг своего элемента, чтобы он вел себя так, как вы хотите .
У меня вопрос, не противоречит ли такой стиль присвоения имен классам идее отделения контента от представления? Размещение class = "floatleft" в элементе явно помещает информацию о презентации в HTML-документ.
Следует ли избегать таких имен классов, которые напрямую описывают присоединенный стиль, и если да, то какая альтернатива существует?
Чтобы уточнить, это не просто вопрос того, как называть классы. Например, семантически точный документ может выглядеть примерно так:
<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>
...
<div class="foobar">Another unrelated topic</div>
Скажем, всем этим блокам div необходимо очистить числа с плавающей запятой, CSS будет выглядеть примерно так:
div.foo, div.bar, div.foobar {
clear:both;
}
Это начинает становиться уродливым по мере увеличения числа этих очищающих элементов - тогда как один class = "clearfloat" служит той же цели. Рекомендуется ли группировать элементы на основе прикрепленных стилей, чтобы избежать повторения в CSS, даже если это означает, что презентационная информация закрадывается в HTML?
Обновление : Спасибо за все ответы. Похоже, что общее мнение состоит в том, чтобы избегать использования этих имен классов в пользу семантических имен или, по крайней мере, использовать их экономно, если они не мешают обслуживанию. Я думаю, что важно то, что изменения в макете не должны требовать чрезмерных изменений в разметке (хотя некоторые люди сказали, что небольшие изменения допустимы, если они упрощают общее обслуживание). Спасибо тем, кто предложил другие способы уменьшить размер кода CSS.