Использование атрибутов данных вместо классов в CSS

HTMLИспользование атрибутов данных вместо классов в CSS

<div data-foo> ... </div>

CSS

div[data-foo]{ ... }

Является ли это хорошая идея? Есть ли недостатки?

Я думаю, что подход к данным имеет смысл, когда у меня есть сотни элементов «foo», потому что размер разметки HTML уменьшается (-3 символа для каждого элемента).

источник

2013-03-31 thelolcat

Если атрибут 'data-foo' не имеет никакого значения, вместо этого вы должны использовать классы. – BoltClock

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

.class { /* You can use this anywhere you need these properties */ 
    font-family: Arial; 
    font-size: 13px; 
}

где, как это будет ограничивать комбинации ELEMENT-ATTRIBUTE

div[data-menu] { /* This will LIMIT you to a combination of div 
        element having an attribute called data-menu */ 
    font-family: Arial; 
    font-size: 13px; 
}

Важно: Специфичность сделает вас огромный беспорядок

источник

2013-03-31 14:08:03

Вы предлагаете, чтобы атрибуты данных добавляли определенность? В моем случае это было бы преимуществом, потому что я хочу, чтобы стили, которые я применяю к этим элементам, должны иметь наивысший приоритет (если бы это было возможно, я бы изолировал их от других элементов с тем же именем) – thelolcat

@thelolcat Learn подробнее об особенностях здесь http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ –

@thelolcat: в спецификации нет ничего, что говорит, что селектор атрибутов должен сопровождаться с помощью селектора типов. Селектор атрибутов равен селектору классов с точки зрения специфики, но это само по себе не является веской причиной использования селектора атрибутов, где селектор классов имеет больше смысла. – BoltClock

div[data-foo] не поддерживается в старых IE (IE6, смотрите здесь: http://www.quirksmode.org/css/selectors/)
div[data-foo] делает менее семантический смысл
class="foo" и data-foo отвезет примерно в том же пространстве, когда DEFLATE-d. Если вы не настроили свой сервер на спуск, вам следует.
class=foo только один символ длиннее, чем data-foo, даже несжатый, и является абсолютно допустимым HTML.

источник

2013-03-31 14:13:30 Dave

Использование атрибутов данных вместо классов в CSS

ответ

Смежные вопросы