Какое написание class/id селекторов более правильное?

Question

[Urushi Go]

1. nya-nya
2. nya_nya
3. nyaNya

Возможно есть более правильный вариант?

Answer 1

[Pretor DH]

По-моему "как правильно" некоректно задан вопрос.
В первую очередь правльно нужно построить архитектуру CSS.

Пример:
- визульное представление, функциональное, динамическое пишутся в разных стилях;
- добавляются в виде class = "visual1 animation2 do3";
- а в общем стиле нужно написать .visual1.animation2.do3 {};
- это заложено в основу CSS, и работает быстрее чем туча стилей с разными названиями для каждого блока.

Answer 2

[IceJOKER]

Правильнее будет сначала поискать, а потом уже спрашивать, если ответа не нашли!

Answer 3

[Константин Китманов]

Code-style'ов для css очень много. Я лично пишу так:
class="someThing someThing-modifier js-someThing"

Answer 4

[dtestyk]

можно вообще разделить селекторы: nya mya и выбирать по нескольким
при необходимости однозначной идентификации в id можно вынести то, чего нет в селекторах:
querySelector('.programming.questions#toster')
позволит избежать дублирования

<li class="video-list-item related-list-item show-video-time">
<li class="video related show time">

querySelector('li.video.related.show.time')

p.s. так пока никто не делает, но это правильно :)

Answer 5

[Александр Цымбал]

Гуглите БЭМ.

Вообще, это личное дело каждого кодера.

Я лично считаю, что лучше использовать подчеркивание для определения единого блока, а тире - для разделения блоков. Например, когда нужно быстро скопировать class или id, мы обычно дважды кликаем по нему в редакторе. Смотрим на реакцию:

class="klikni_po_mne_dvazhdy"
class="klikni-po-mne-dvazhdy"

Очевидно, что первым вариантом управлять удобнее.

Далее, если имеем вложенность, то отделяем все внутренние элементы с помощью тире, например:
class="video_player---buttons---play_button"
Ну тут я нарочно использовал 3 тире подряд, чтобы было нагляднее видно разделение вложенности (про вложенность гуглите БЭМ).

Answer 6

[Егор Федосенко]

Классы пишутся через тире.
По сути к id это тоже можно отнести.
CamelCase используется в названиях функций (например js)

Некоторые ещё используют дабл_ для классов.
Тут уже все зависит от самой структуры и стилистики css.

Answer 7

[zooks]

Лично я пишу через дефис.
Правила разрешают все варианты с прочерком и дефисом, кроме начинающихся с цифр.

Answer 8

[President42]

.class-name {}
    .class-name_child-name {}

.class-name--modificator {}

А вообще, вот