Каково стандартное соглашение об именах для идентификаторов и классов html/css?

Ответ 1

Нет.

Я использую подчеркивания все время из-за дефиса, испортившего подсветку синтаксиса моего текстового редактора (Gedit), но это личное предпочтение.

Я видел, как все эти соглашения использовались повсюду. Используйте тот, который, по вашему мнению, лучше всего - тот, который выглядит лучше всего/проще для чтения для вас, а также проще всего напечатать, потому что вы будете использовать его много. Например, если у вас есть клавиша подчеркивания на нижней стороне клавиатуры (маловероятная, но вполне возможная), тогда придерживайтесь дефиса. Просто идите с тем, что лучше для вас самих. Кроме того, все три из этих конвенций легко читаемы. Если вы работаете в команде, не забудьте сохранить соглашение с командой (если оно есть).

Обновление 2012

Я изменил способ программирования со временем. Теперь я использую теперь верблюд (thisIsASelector) вместо дефиса; Я считаю последнее довольно уродливым. Используйте все, что пожелаете, что может легко измениться с течением времени.

Обновление 2013

Кажется, мне нравится смешивать вещи каждый год... После перехода на Sublime Text и использования Bootstrap некоторое время я вернулся к тире. Для меня сейчас они выглядят намного чище, чем un_der_scores или camelCase. Моя первоначальная точка все еще стоит: нет стандарта.

Обновление 2015

Интересный угловой случай с условностями здесь Rust. Мне очень нравится язык, но компилятор предупредит вас, если вы определяете материал, используя что-либо, кроме underscore_case. Вы можете отключить это предупреждение, но интересно, что компилятор настоятельно предлагает соглашение по умолчанию. Я предполагаю, что в крупных проектах это приводит к более чистым кодам, что не плохо.

Обновление 2016 (вы просили об этом)

Я принял стандарт BEM для моих проектов в будущем. Названия классов в конечном итоге довольно многословны, но я думаю, что это дает хорошую структуру и возможность повторного использования классов и CSS, которые идут с ними. Я полагаю, что BEM на самом деле является стандартом (поэтому мой no может стать yes возможно), но он все еще зависит от вас, что вы решили использовать в проекте. Самое главное: согласуйтесь с тем, что вы выберете.

Ответ 2

Существует руководство по стилю css & html от google, в котором рекомендуется всегда использовать дефис: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters.

Ответ 3

Я предлагаю вам использовать подчеркивание вместо дефиса (-), так как...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

Вы можете легко получить доступ к значению по идентификатору. Но если вы используете дефис, это вызовет синтаксическую ошибку.

Это старый образец, но он может работать без jquery - :)

благодаря @jean_ralphio, есть способ обойти

var x = document.myForm['my-Id'].value;

Стиль Dash - это стиль Google Code, но он мне не очень нравится. Я бы предпочел TitleCase для id и camelCase для класса.

Ответ 4

Согласовано соглашение об именах для HTML и CSS. Но вы можете структурировать свою номенклатуру вокруг дизайна объекта. Более конкретно то, что я называю "Собственность и отношения".

Собственность

Ключевые слова, описывающие объект, могут быть разделены дефисом.

автомобиль новый поворачивал вправо

Ключевые слова, описывающие объект, также могут подразделяться на четыре категории (которые должны быть упорядочены слева направо): Object, Object-Descriptor, Action и Action-Descriptor.

автомобиль - существительное, а объект
new - прилагательное и объект-дескриптор, который описывает объект более подробно
turn - глагол и действие, которое принадлежит объекту
right - прилагательное и дескриптор действия, который описывает действие более подробно

Примечание: глаголы (действия) должны быть в прошедшем времени (повернуты, выполнены, запущены и т.д.).

Отношения

Объекты могут также иметь отношения, такие как родительский и дочерний. Action и Action-Descriptor принадлежит родительскому объекту, они не принадлежат к дочернему объекту. Для отношений между объектами вы можете использовать символ подчеркивания.

автомобиль новый поворачивал right_wheel налево поворачивал влево

• car-new-turn-right (следует правилу собственности)
• wheel-left-turn-left (следует правилу владения)
• car-new-turn-right_wheel-left-turn-left (следует за правилом отношения)

Заключительные примечания:

• Поскольку CSS не чувствителен к регистру, лучше записать все имена в нижнем регистре (или в верхнем регистре); избегайте случаев верблюда или паскаля, поскольку они могут привести к неоднозначным именам.
• Знайте, когда использовать класс и когда использовать идентификатор. Это не просто идентификатор, который используется один раз на веб-странице. В большинстве случаев вы хотите использовать класс, а не идентификатор. Веб-компоненты, такие как (кнопки, формы, панели и т.д.), Должны всегда использовать класс. Идентификатор может легко привести к конфликтам именования и должен использоваться экономно для namespacing вашей разметки. Вышеупомянутые концепции владения и отношения применяются для обозначения обоих классов и идентификаторов и помогут избежать конфликтов имен.
• Если вам не нравится мое соглашение об именовании CSS, есть еще несколько других: соглашение об организационном наименовании, соглашение о присвоении имен, соглашение о семантическом именовании, соглашение об именах BEM, соглашение об именах OCSS и т.д.

Ответ 5

Еще один альтернативный стандарт:

<div id="id_name" class="class-name"></div>

И в вашем script:

var variableName = $("#id_name .class-name");

Это просто использует camelCase, under_score и дефис, соответственно для переменных, идентификаторов и классов. Я читал об этом стандарте на нескольких разных сайтах. Несмотря на небольшую избыточность в селекторах css/jquery, избыточность упрощает поиск ошибок. например: Если вы видите .unknown_name или #unknownName в вашем файле CSS, вы знаете, что вам нужно выяснить, что на самом деле ссылается.

Ответ 6

Другая причина, по которой многие предпочитают дефисы в именах CSS и именах классов, - это функциональность.

Использование сочетаний клавиш, таких как option + left/right (или ctrl + left/right в Windows) для перемещения кодового слова по слову, останавливает курсор на каждой тире, что позволяет точно пересечь идентификатор или имя класса с помощью сочетаний клавиш. Подчеркивания и camelCase не обнаруживаются, и курсор дрейфует прямо над ними, как будто это все одно слово.

Ответ 7

Недавно я начал изучать XML. Версия underscore помогает мне отделить все связанные с XML (DOM, XSD и т.д.) Языки программирования, такие как Java, JavaScript (случай верблюда). И я согласен с вами в том, что использование идентификаторов, которые разрешены в языках программирования, выглядит лучше.

Изменить: может быть несвязано, но вот ссылка на правила и рекомендации по именованию XML-элементов, которые я использую при именовании идентификаторов (разделы "Правила именования XML" и "Наилучшие правила именования" ).

http://www.w3schools.com/xml/xml_elements.asp

Ответ 8

Я думаю, что это зависит от платформы. При разработке в .Net MVC я использую строчные буквы в стиле начальной загрузки и дефисы для имен классов, но для идентификаторов я использую PascalCase.

Это объясняется тем, что мои представления опираются на строго типизированные модели представлений. Свойства моделей С# являются паскалями. Ради связывания модели с MVC имеет смысл, что имена элементов HTML, которые связываются с моделью, согласуются со свойствами модели представления, которые являются регистром Паскаля. Для простоты мои идентификаторы используют то же соглашение об именах, что и имена элементов, за исключением переключателей и флажков, которые требуют уникальных идентификаторов для каждого элемента в именованной группе ввода.