Как подбирать имя переменным, классам и Id для элементов верстки?

Question

[swcalc]

Здравствуйте, у меня проблема, сколько лет пишу и верстаю, все время сталкиваюсь с трудностью правильно определить имя для переменной или id для html, в случае с кодом еще ничего, все можно разбить на локальные функции и использовать определенный набор, прямо по смыслу. Но, если говорить о верстке, именовать css классы - просто ад.
Как это делать правильно (подбирать имя к классу и id css), чтобы потом не запутаться?

Answer 1

[Сергей Протько]

1) не используйте ID
2) BEM
3) Css Modules

Comments

[Alexander Litvinenko]

1) используйте ID когда это оправдано для JS, ато человек вообще их перестанет использовать =)

[Сергей Протько]

Alexander Litvinenko: это никогда не оправдано для JS. Ну во всяком случае в 99% случаев от них толку нет.

Я использую ID-ки только для якорей, как альтернативу a(name), как того требует спецификация html5. Для других кейсов айдишки чуть более чем бесполезны и добавляют излишней головной боли.

p.s. для js я вообще атрибуты использую.

[Scribblex]

Alexander Litvinenko: Знаете, соглашусь с Сергеем

[Alexander Litvinenko]

Scribblex: Сергей Протько: не буду спорить.

[swcalc]

Сергей Протько: Простите, но Id и есть атрибут, или я что-то путаю? htmlbook.ru/html/attr/id

[swcalc]

Сергей Протько: И как организовывать выборку? Наиболее независимую от верстки.

[Сергей Протько]

swcalc: id атрибут. Один атрибут. Я использую data-* атрибуты. Для каждого поведения свой атрибут. Scribblex например для этих целей заводит специфичные классы.

Наиболее назависимая выборка от верстки как раз таки... использовать либо свои аттрибуты либо классы, которые не пересекаются со стилями т.д. Это если в контексте JS.

Answer 2

[Scribblex]

ИМХО, название переменных и классов в первую очередь должны быть очевидными. Я – фан БЭМ-нотации. Но предпочитаю разделять классы следующим образом: для разметки / для поведения. Если надо повесить обработчик события, обычно поступаю так: class="some-bem-class js-handler"