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

Question

Зависит ли это от платформы, которую вы используете, или существует общее соглашение, которое большинство разработчиков предлагают / следуют?

Есть несколько вариантов:

1. id="someIdentifier"' - выглядит довольно согласованно с кодом JavaScript.
2. id="some-identifier" - больше похоже на html5-подобные атрибуты и другие вещи в html.
3. id="some_identifier" - выглядит довольно совместимым с кодом ruby ​​и все еще является действительным идентификатором внутри Javascript

Я думал, что № 1 и № 3 выше имеют смысл, потому что они играют лучше с Javascript.

Есть ли правильный ответ на этот вопрос?

Answer 1

Нет ни одного.

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

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

Обновление 2012

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

Обновление 2013

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

Обновление 2015

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

Обновление 2016 ( вы попросили его)

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

Answer 2

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

Answer 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, но он мне не очень нравится. Я бы предпочел TitleCase для id и camelCase для класса.

Answer 4

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

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

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

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

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

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

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

Отношения

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

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

• автомобиль новый повернул направо (следует правилу владения)
• колесо повернуло налево (следует правилу владения)
• автомобиль-новый-повернул-направо-колесо-в-повернул налево (следует правилу отношений)

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

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

Answer 5

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

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

А в вашем скрипте:

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

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

Answer 6

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

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

Answer 7

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

Редактировать: Возможно, это не связано, но здесь есть ссылка на правила и рекомендации по именованию элементов XML, которые я соблюдаю при именовании идентификаторов (разделы«Правила именования XML» и «Лучшие практики именования»).

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

Answer 8

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

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