Лучшие практики для именования Id-атрибута Dom Elements

Question

Это связано с соглашениями по присвоению имен для атрибута id элемента DOM, и я предполагаю, что атрибут name также. Что касается JavaScript, то из того, что я понял и сделал, всегда используется случай верблюда, за исключением имен классов. Классы в Паскале.

Сказав, что я в основном развиваюсь в ASP.NET, я столкнулся с проблемой именования атрибута id. В ASP.NET, если вы перетаскиваете новый серверный элемент управления на страницу (что я редко делаю, я вроде тип разметки), имена по умолчанию всегда заключаются в Pascal, потому что они должны соответствовать .NET Framework правила именования кода на стороне сервера.

Поэтому, когда дело доходит до именования атрибута id серверных элементов управления ASP.NET или просто элементов в разметке, я следую правилу присваивать верблюжьему атрибуту id (руководящие указания по именованию Javascript), но это противоречит руководящим указаниям по именованию .NET.

Итак, во-первых, что вы, ребята, обычно делаете для атрибута id в элементах DOM, и два, что делают .NET, разработчики в ASP.NET, для именования атрибута id?

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

<input type="text" id="txtUserName" />

или для флажков типа

<input type="checkbox" id="chkSelectAll" />

Что явно идет вразрез с правилами именования кода на стороне сервера .NET и, возможно, также с правилами JavaScript.

Любой совет очень ценится.

Answer 1

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

• Не сокращайте ничего! BW_RCB01_SW что-то значило для команды, которая делала наш CSS много лет назад, но сейчас это ничего не значит для меня, и мне приходится работать задом наперед, чтобы попытаться перевести то, что BW_RCB01_SW соответствует для моих целей, и либо помнить, что перевод или документ его где-то. Лучше? blackwhite-boxtype1-bottomleft. Он длиннее, но также не требует розеттского камня.

• Сохраните все в нижнем регистре и используйте подчеркивание или дефис. Я предпочитаю дефисы, но это полностью предпочтение. Не должно быть никаких препятствий для использования дефисов, поскольку они не зарезервированы в CSS или HTML, а идентификаторы обрабатываются как буквенные строки в любом другом языке. Все дело в нижнем регистре - слишком много часов впустую, гадая, почему, черт возьми, этот стиль не применим ой. pageContainerLeft отличается от pageContainerleft.

• Определите точно что это за элемент, но не более. Подумайте серьезно о каждой части информации, которую вы вводите в имя, и о том, нужно ли это. В вашем примере - вам нужно , чтобы узнать, что это чекбокс по идентификатору? Навряд ли. Вы уже знаете, на какой элемент ссылаетесь, потому что это уникальный идентификатор, и вам все равно придется кодировать этот элемент.

Answer 2

Наименование как можно меньшего количества объектов определенно помогает содержать вещи в чистоте. Если вы можете сделать это, назвав родителя и просто сославшись на ребенка, это будет лучше (по моему мнению). Вы получаете бонус чуть меньше html, предоставляемого клиенту на каждой странице.

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

Символы подчеркивания - это символы, а тире можно интерпретировать как минус, так что это еще одна потенциальная проблема - имеет смысл придерживаться только подчеркиваний. Flex, например, не принимает XML с атрибутами, названными тире (я знаю, что это значения, а не атрибуты, но все же безопасная ставка).

Я согласен с вышесказанным - нет типов элементов, расположения или цвета в качестве класса / идентификатора. Венгерская запись == плохо. Очень полезно определить, что такое ID. Мне нравится называть поля формы специфическими для объекта способами - user_login, user_email, user_address_state_id, user_address_country_id и т. Д., Все они могут отображаться в форме регистрации пользователя. Обычно поля неформ являются недостаточно длинными для подчеркивания, в противном случае вы можете переименовать их.

Answer 3

Хотите верьте, хотите нет, но у меня были проблемы с дефисами в качестве имен идентификаторов и имен классов css при использовании определенных библиотек javascript. Это очень редко, но вы, очевидно, хотите избежать чего-то подобного. Из-за этого я использую случай верблюда или подчеркивание. Вы также можете использовать подчеркивание.

В противном случае общее правило состоит в том, чтобы иметь значимые имена, которые легко читаются и понимаются. Когда дело доходит до «контроля», убедитесь, что вы следуете некоторому соглашению об именах. Лично я предпочитаю постфиксы над префиксами (то есть nameText вместо textName), но я стараюсь избегать постфиксов, так как считаю их слишком многословными.

Итак: 1. Значимые имена. 2. Избегайте пост- / префиксов. 3. Избегайте сокращений (т. Е. Адрес вместо адреса). 4. Не торопитесь.

Answer 4

Один из гуру HTML на моей последней работе фактически рекомендовал разделять многословные идентификаторы тире

<input type="text" id="user-name" />

Я изо всех сил пытаюсь вспомнить, почему - у меня больше нет доступа к этим внутренним стандартам. Я знаю, что на самом деле не отвечает на ваш вопрос о корпусе Pascal vs Camel.

Я бы лично посоветовал не использовать HN - я считаю, что это в значительной степени отвратительная практика. Что произойдет, если вам нужно вместо этого поменять массив флажков на элемент select? Теперь идентификатор элемента имеет ложную семантику. Это не стоит хлопот, ИМО.

Answer 5

Вот некоторые рекомендации по именованию, которые помогли мне с моими идентификаторами и классами в DOM:

• не включает тип в имени (т. Е. Нет txt или chk). Я могу выбрать эту информацию с помощью CSS или jQuery гораздо более наглядно
• используйте подчеркивание в качестве разделителей в имени. Дефисы не всегда работают на других языках, а верблюжья загадка немного сложна для разметки