Что лучше использовать в CSS?

Question

[7GIT]

Вот демо одного WP шаблона. Обратите внимание, на тег header, если его развернуть то далее идут два тега div а атрибутоми вместо классов.

<div data-row="middle" data-columns="3" data-transparent-row="yes">

И мне интересно, в каких случаях целесообразно использовать [data-device="..."] вместо классов .header_top?
Если посмотреть, код шаблона, то в основном можно увидеть в СSS такие конструкции [data-item="type"].

Comments

[WapSter]

Никогда.

[7GIT]

Исчерпывающий ответ, он на столько поло раскрыт и убедителен, что трудно поспорить с чем либо.
Куратор уложил всех на лопатки. )

[Леонид Роженцев]

В принципе разницы нет. Но если есть сомнения, то лучше использовать классы и посмотреть, как будет работать.

[WapSter]

7GIT, а все очень просто если логически подумать. Первое и самое печальное. Не будет автокомплита в редакторе, придется вбивать все эти дата атрибуты ручками, что просто неимоверно увеличит время на разработку. Второе куча лишних символов, это получается даже больше, нежели чем использовать БЭМ. Подумал за тебя.

Answer 1

[Виталий Першин]

Атомарный css на новый лад))


А если серьезно, то тоже пытаюсь внедрять дата атрибуты ради эксперимента, но не как атомарный css, это слишком. Был проект там для итемов было много разных анимаций я использовал атрибут для визуального выделения и чтобы бекендщику было понятнее как ему менять эти анимации. [data-case-animate="12"] {...}

Comments

[profesor08]

Херня это все, фронтом будет заниматься фронт, бэкендом бекенд разработчик. И делать надо так, как будет удобно тебе, в идеале чтоб вообще не пришлось писать код, даже чтоб атрибуты не менять.

[Виталий Першин]

profesor08, все с кем я работал только спасибо говорят за то, что я предоставляю удобную и понятную разметку, я считаю что нужно учитывать интересы каждого и пользоваться предоставленными возможностями с умом, а аргумент "херня это все" вовсе не аргумент.

Answer 2

[Игорь]

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

data-modal="open"
 data-modal="close"

атрибут один, но значения разные