<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'];
Я рекомендую посібник зі стилів HTML 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) мають труднощі (помилки?) З використанням гіпена в іменах id. Я використовую підкреслення (так це 960grid), і все працює чудово.
Я б запропонував підкреслити, головним чином, із побічного ефекту javascript, з яким я стикаюся.
Якщо ви введете код нижче у свій рядок, ви отримаєте помилку: "example-value" не визначено. Якби дів був названий підкресленнями, він би спрацював.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), що буде добре працювати.