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

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

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

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

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

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

Там нет ни одного.

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

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

Обновление 2012

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

Обновление 2013

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

Обновление 2015

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

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

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

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

После того, как я довольно долго не писал CSS, я начал работать в месте, которое использует OOCSS в одном из своих продуктов. Лично я нахожу довольно неприятным засорять классы повсюду, но без необходимости постоянно переключаться между HTML и CSS кажется довольно продуктивным.

Я все еще остановился на БЭМ, хотя. Это многословно, но пространство имен делает работу с ним в компонентах React очень естественной. Он также отлично подходит для выбора определенных элементов при тестировании браузера.

OOCSS и BEM - это только некоторые из стандартов CSS. Выберите тот, который работает для вас - все они полны компромиссов, потому что CSS просто не так хорош .

Обновление 2020

Скучное обновление в этом году. Я все еще использую БЭМ. Моя позиция не изменилась с обновления 2019 года по причинам, перечисленным выше. Используйте то, что работает для вас, которое масштабируется с размером вашей команды и скрывает столько или мало плохого набора функций CSS, как вам нравится.

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

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

<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 для класса.

ТЛ; др;

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

Оригинальный пост

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

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

И в вашем сценарии:

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

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

ОБНОВЛЕНИЕ 2019

(Дефисы называются 'kebab-case', подчеркивания называются 'snake_case', а затем у вас есть 'TitleCase', 'pascalCase')

Я лично не люблю дефисы. Я первоначально разместил это как одну альтернативу (потому что правила просты). Однако дефисы затрудняют выбор ярлыков (двойной щелчок, ctrl/ option+ left/ rightи ctrl/ cmd+)D в vsCode. Кроме того, имена классов и имена файлов - единственное место, где работают дефисы, потому что они почти всегда в кавычках или в CSS и т. Д. Но ярлык вещь по-прежнему применяется.

В дополнение к переменным, именам классов и идентификаторам вы также хотите посмотреть на соглашения об именах файлов. И Git Филиалы.

Группа кодирования моего офиса фактически провела встречу месяц или два назад, чтобы обсудить, как мы собираемся назвать вещи. Для веток git мы не могли выбрать между 321-the_issue_description или 321_the-issue-description. (Я хотел 321_theIssueDescription, но моим коллегам это не понравилось.)

Пример, чтобы продемонстрировать работу со стандартами других людей ...

Vue.js имеет стандарт. На самом деле у них есть два альтернативных стандарта для нескольких своих предметов. Мне не нравятся обе их версии для имен файлов. Они рекомендуют или "/path/kebab-case.vue"или "/path/TitleCase.Vue". Первое сложнее переименовать, если вы специально не пытаетесь переименовать его часть. Последнее не подходит для кроссплатформенной совместимости. Я бы предпочел "/path/snake_case.vue". Тем не менее, при работе с другими людьми или существующими проектами важно следовать тому стандарту, который уже был заложен. Поэтому я использую kebab-case для имен файлов в Vue, хотя я полностью на это пожаловаться. Потому что не следовать этому означает изменять множество файлов, которые устанавливает vue-cli.

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

Владение

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

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

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

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

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

отношения

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

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

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

Финальные заметки:

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

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

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

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

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

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

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

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