<div id="example-value">или <div id="example_value">?
Этот сайт и Twitter используют первый стиль. Facebook и Vimeo - второе.
Какой из них вы используете и почему?
Ответы:
Используйте дефисы, чтобы обеспечить изоляцию между HTML и JavaScript.
Зачем? увидеть ниже.
Дефисы можно использовать в CSS и HTML, но не в объектах JavaScript.
Многие браузеры регистрируют идентификаторы HTML как глобальные объекты в объекте окна / документа, в больших проектах это может стать настоящей проблемой.
По этой причине я использую имена с дефисами, чтобы идентификаторы 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 как глобальные объекты, выполнение вышеуказанного не удастся, потому что сообщение не является «неопределенным», и он попытается создать экземпляр объекта 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 через (например) объект окна, используя window ['message-text'];
window['message-text'];
Я бы порекомендовал Google Руководство по стилю 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 {}
BEMобозначений?
На самом деле все сводится к предпочтениям, но то, что повлияет на вас в определенном направлении, может быть редактором, с помощью которого вы кодируете. Например, функция автозаполнения TextMate останавливается на дефисе, но видит слова, разделенные подчеркиванием, как одно слово. Таким образом, имена и идентификаторы классов the_postработают лучше, чем the-postпри использовании функции автозаполнения ( Esc).
Я считаю, что это полностью зависит от программиста. Вы также можете использовать camelCase, если хотите (но я думаю, что это будет выглядеть неловко).
Лично я предпочитаю дефис, потому что его быстрее набирать на клавиатуре. Поэтому я бы сказал, что вам следует выбрать то, что вам удобнее всего, поскольку оба ваших примера широко используются.
Любой пример вполне допустим, вы даже можете добавить в смесь ":" или "." в качестве разделителей согласно спецификации w3c . Я лично использую "_", если это имя из двух слов, просто из-за его сходства с пробелом.
ZZ:ZZдолжен быть экранирован как ZZ\00003AZZ(CSS2 и выше).
На самом деле некоторые внешние фреймворки (javascript, php) испытывают трудности (ошибки?) С использованием хайпена в именах идентификаторов. Я использую подчеркивание (как и 960grid), и все отлично работает.
Я бы посоветовал подчеркнуть в основном по причине побочного эффекта javascript, с которым я сталкиваюсь.
Если вы введете приведенный ниже код в адресную строку, вы получите сообщение об ошибке: «примерное значение» не определено. Если бы div был назван с подчеркиванием, он бы работал.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), и все будет нормально.