Вопрос по css, naming-conventions, html, standards – http://www.w3schools.com/xml/xml_elements.asp

189

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

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

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

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

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

Связанныйstackoverflow.com/a/23658906/759452 Adrien Be

Ваш Ответ

7   ответов
25

так как ...

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

Кто-то пометил это. Ваш английский может быть лучше, но при условии, что это правильно, это кажется полезным дополнением к совокупности знаний, поэтому я буду голосовать против его удаления. Tom Zych
Этот ответ недооценен! Karl Morrison
Я / ESL: S Weijing Jay Lin
Временное решениеvar x = document.myForm['my-Id'].value; mehas
8

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

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

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

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

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

так же, как мои предпочтения. camelCase для переменных и under_score для id, однако я обычно применяю under_scores как для классов, так и для имен. Vincent Edward Gedaria Binua
10

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

Владение

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

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

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

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

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

отношения

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

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

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

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

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

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

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

Обновление 2012

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

Обновление 2013

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

Обновление 2015

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

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

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

Я думаю, что по мере того, как ваше приложение становится больше, ваши идентификаторы становятся длинными и сложными, тогда в этот момент тире выглядят не очень хорошо. Я также использую Sublime и Twitter Bootstrap, и я согласен использовать тире для классов, как Bootstrap. Но идентификаторы больше для JavaScript, поэтому я предпочитаю использовать camelCase в этом случае. glrodasz
Я считаю, что одна из причин, по которой люди предпочитают штрихи в CSS-идентификаторах и классах, заключается в функциональности. С помощьюопция + стрелка влево / вправо чтобы проходить кодовое слово за словом останавливается на каждом тире, что позволяет легко перемещаться по идентификатору или имени класса с помощью сочетаний клавиш. Знак подчеркивания и верблюд не поднимается, и курсор будет перемещаться прямо над ними, как если бы это было одно слово. Kyle Vassella
Для меня я все еще предпочитаю стиль подчеркивания. Просто потому, что все HTML-теги и атрибуты строчные. Я избегаю здесь прописных букв. yaoxing
Я жду обновления 2016 года! Zerquix18
Как насчет обновления 2018 года? Есть новые идеи? ;) zwcloud
4

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

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

Просто чтобы другие не запутались: для Windows это CTRL + LEFT / RIGHT Gordon Mohrin
1

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

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

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

35

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

Я думаю, что никто не поддерживает правило стиля некоторое время ... Weijing Jay Lin
И все же идентификатор в этом URL использует подчеркивание :) Tim

Похожие вопросы