Именование атрибутов "class" и "id" HTML - тире против подчеркиваний

<div id="example-value"> или <div id="example_value">?

Этот сайт и Twitter используют первый стиль. Facebook и Vimeo - второй.

Какой из них вы используете и почему?

ОТВЕТЫ

Ответ 1

Используйте Hyphens для обеспечения изоляции между вашим HTML и JavaScript.

Почему? см. ниже.

Hyphens действительны для использования в CSS и HTML, но не для объектов JavaScript.

Многие браузеры регистрируют HTML-идентификаторы как глобальные объекты на объекте window/document, в больших проектах это может стать настоящей болью.

По этой причине я использую имена с Hyphens таким образом, что идентификаторы HTML никогда не конфликтуют с моим JavaScript.

Рассмотрим следующее:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

HTML

<body>
    <span id='message'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message'));
        objectContainer.messageClass.write('loaded');
    }
</script>

Если браузер регистрирует идентификаторы HTML как глобальные объекты, это не будет выполнено, потому что сообщение не является "undefined", и оно попытается создать экземпляр объекта HTML. Убедившись, что идентификатор HTML имеет дефис в имени, предотвращает конфликты, подобные приведенному ниже:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

HTML

<body>
    <span id='message-text'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message-text'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message-text'));
        objectContainer.messageClass.write('loaded');
    }
</script>

Конечно, вы можете использовать messageText или message_text, но это не решает проблему, и вы можете столкнуться с той же проблемой позже, когда вы случайно получите доступ к объекту HTML вместо JavaScript-кода

В одном замечании вы все равно можете получить доступ к объектам HTML через объект окна (например), используя окно ['message-text'];

Ответ 2

Я бы рекомендовал Руководство по стилю HTML/CSS

Он конкретно указывает:

Разделить слова в именах идентификаторов и классов дефисом. Не связывайте слова и сокращения в селекторах любыми символами (в том числе и без них), отличными от дефиса, чтобы улучшить понимание и отслеживание.

/* Not recommended: does not separate the words "demo" and "image" */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}

Ответ 3

Это действительно зависит от предпочтения, но то, что повлияет на вас в определенном направлении, может быть редактором, с которым вы кодируете. Например, функция автозаполнения TextMate останавливается в дефис, но видит слова, разделенные символом подчеркивания, как одно слово. Таким образом, имена классов и идентификаторы с the_post работают лучше, чем the-post при использовании функции автозаполнения (Esc).

Ответ 4

Я считаю, что это полностью зависит от программиста. Вы можете использовать camelCase тоже, если хотите (но я думаю, что это выглядело бы неудобно.)

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

Ответ 6

На самом деле некоторые внешние фреймворки (javascript, php) испытывают трудности (ошибки?) с использованием hypen в именах идентификаторов. Я использую подчеркивание (так же, как и 960grid), и все отлично работает.

Ответ 7

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

Если вы должны ввести код ниже в свою строку местоположения, вы получите ошибку: "пример-значение" - undefined. Если div был назван с подчеркиванием, он будет работать.

javascript:alert(example-value.currentStyle.hasLayout);

Ответ 8

Я использую первый (один-два), потому что он более читабельный. Для изображений, хотя я предпочитаю подчеркивание (btn_more.png). Camel Case (oneTwo) - еще один вариант.