Когда добавлять классы, когда добавлять селекторы?

Question

Учитывая это:

<a class="details" href="#">more&hellip;</a>
...
<input type="submit" value="Gogogo">

Скажите, что оба должны иметь очень похожий вид, потому что это то, чего хочет дизайнер. Вы делаете это:

<a class="fancybutton" ...
<input class="fancybutton" ...

.fancybutton { /* ... */ }

или это?

a.details, .someform input[type="submit"] { /* ... */ }

Я борюсь с этой проблемой, и я не уверен, куда идти. Кажется, что есть выбор между действительно четкой таблицей стилей и красивой разметкой, которая не завалена классами.

Когда вы выбираете одно над другим?

Answer 1

Основная причина выбора классов вместо более причудливых селекторов CSS - совместимость. Несколько версий хотя бы одного основного браузера, все еще используемого, не поддерживают должным образом более продвинутые селекторы, и поэтому просто использовать классы на самом деле менее болезненно, поскольку они «просто работают».

Answer 2

IE6 не поддерживает input[type=submit], поэтому, если я буду его разрабатывать, я обязательно пойду на урок.

Answer 3

Как уже говорили другие пользователи, использование классов - это хорошо, потому что это действительно упрощает вопрос совместимости браузера (проблемы возникают, когда вы пытаетесь использовать причудливые селекторы CSS 2).

Еще одна веская причина использовать простые селекторы на основе классов (или, если возможно, на основе идентификаторов) над сложными селекторами CSS 2 - это скорость.

Из google's "Оптимизировать отображение в браузере" , описания того, почему вы должны пытаться использовать простые селекторы (селекторы только для класса / только для идентификатора очень просты):

Селекторы потомков неэффективны, потому что для каждого элемента, который соответствует ключу, браузер должен также пройти вверх по дереву DOM, оценивая каждый элемент-предок, пока не найдет совпадение или не достигнет корневого элемента. Чем менее конкретен ключ, тем больше число узлов, которые необходимо оценить.

Дочерние и смежные селекторы неэффективны, потому что для каждого соответствующего элемента браузер должен оценить другой узел. Это становится вдвойне дорого для каждого дочернего селектора в правиле. Опять же, чем менее конкретен ключ, тем больше число узлов, которые необходимо оценить. Однако, хотя они неэффективны, они все же предпочтительнее, чем селекторы-потомки, с точки зрения производительности.

И специальное примечание о селекторах классов над селекторами-потомками из той же статьи:

Используйте селекторы классов вместо селекторов потомков.

Например, если вам нужны два разных стиля для упорядоченного элемента списка и упорядоченного элемента списка, вместо использования двух правил:

ul li {color: blue;}
ol li {color: red;}

Вы можете кодировать стили в два имени класса и использовать их в своих правилах; например:

.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

Если вы должны использовать селекторы-потомки, предпочтите дочерние селекторы, которые, по крайней мере, требуют оценки только одного дополнительного узла, а не всех промежуточных узлов до предка.

Answer 4

Я бы сказал, в браузерах жалоб, что ответ заключается в специфике. Посмотрите на широту применения стиля и определите его с достаточной спецификой, чтобы быть недвусмысленным в рамках вашего веб-приложения.

Кроме того, не бойтесь использовать более одного стилевого класса для элемента для разработки многоуровневого подхода к представлению, т.е.

Answer 5

Я бы обычно использовал класс, потому что он имеет более широкую поддержку, чем селекторы атрибутов в браузерах. Пока у подавляющего большинства населения нет браузера, поддерживающего селекторы атрибутов CSS, я бы продолжал использовать классы в таком случае.