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

250

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

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

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

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

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

egervari
источник
Связанный stackoverflow.com/a/23658906/759452
Адриен Бе
Я нашел это ... Соглашения об именовании HTML
Робин Гуд

Ответы:

256

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

Я использую подчеркивания все время, потому что дефисы портят подсветку синтаксиса моего текстового редактора (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, как вам нравится.

Bojangles
источник
10
Я думаю, что по мере того, как ваше приложение становится больше, ваши идентификаторы становятся длинными и сложными, тогда в этот момент черточки выглядят не очень хорошо. Я также использую Sublime и Twitter Bootstrap, и я согласен использовать тире для классов, как Bootstrap. Но идентификаторы больше для JavaScript, поэтому я предпочитаю использовать camelCase в этом случае.
Glrodasz
3
Для меня я все еще предпочитаю стиль подчеркивания. Просто потому, что все HTML-теги и атрибуты строчные. Я избегаю здесь прописных букв.
Яосин
3
Один из квазистандартов, которые я видел (похоже, что Bootstrap это делает) - это добавление "js-" к любым классам или идентификаторам CSS, которые специально используются для Javascript. Может быть, это сделает сокращение на 2016 год :)
Dolan Antenucci
1
@ Bojangles - БЭМ выглядит интересно, хотя использование черточек и подчеркиваний для разных целей потребует некоторого привыкания; аналогично, двойные черточки / подчеркивания тоже подойдут :) Спасибо, что поделились
Dolan Antenucci
7
Я считаю, что одна из причин, по которой люди предпочитают штрихи в CSS-идентификаторах и классах, заключается в функциональности. Использование опции + стрелка влево / вправо для обхода вашего кодового слова за словом останавливается на каждом тире, что позволяет легко перемещаться по идентификатору или имени класса с помощью сочетаний клавиш. Знак подчеркивания и верблюд не поднимается, и курсор будет перемещаться прямо над ними, как если бы это было одно слово.
Кайл Васселла
33

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

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

Вэйцзин Джей Лин
источник
5
Кто-то пометил это. Ваш английский может быть лучше, но если предположить, что это правильно, это кажется полезным дополнением к совокупности знаний, поэтому я буду голосовать против его удаления.
Том Зыч
3
Этот ответ недооценен!
К - Токсичность в СО растет.
19
Временное решениеvar x = document.myForm['my-Id'].value;
этан
Я бы не использовал ни один из этих методов, а скорее getElementById('whatever-you-want_my_friend'). Это зависит. Если в вашем коде используется кодирование на стороне сервера (на стороне сервера) для рендеринга HTML, использование camelCase для соответствия вашим соглашениям об именах или snake_case, независимо от того, какой язык программирования использует, вероятно, является наилучшим, так что поиск в коде как внешнего, так и внутреннего кода является согласованным.
Оливер Уильямс
12

ТЛ; др;

Нет единственно верного ответа. Вы можете выбрать один из множества или создать свои собственные стандарты, основанные на том, что имеет смысл, в зависимости от того, с кем вы работаете. И это на 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.

RoboticRenaissance
источник
так же, как мои предпочтения. camelCase для переменных и under_score для id, однако я обычно применяю under_scores как для классов, так и для имен.
Винсент Эдвард Гедария Бинуа
Мне понравилось, потому что это то же самое, что я предпочитаю использовать. 'snake_case' для идентификаторов, 'kebab-case' для css, 'camelCase' для функций и переменных.
Эдуардо Пас
10

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

Владение

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

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

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

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

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

отношения

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

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

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

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

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

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

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

Кайл Васселла
источник
Просто чтобы другие не запутались: для Windows это CTRL + ВЛЕВО / ВПРАВО
Гордон Мохрин
Это на самом деле моя самая большая причина для использования подчеркивания или CamelCase вместо черточек, где это возможно. the-red-boxневозможно выбрать простым двойным щелчком или двумя нажатиями клавиш. Также cmd / ctrl + D для vsCode. Вместо этого вам нужно идти несколько раз или перетаскивать мышью. Но the_red_boxподдерживает все три быстрых выбора.
RoboticRenaissance
1

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

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

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

mkdrive2
источник
1

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

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

Луиза Эгглтон
источник