<div id="example-value"> 또는 <div id="example_value"> ?
이 사이트와 트위터는 첫 번째 스타일을 사용합니다. Facebook과 Vimeo-두 번째.
어떤 것을 사용하고 왜 사용합니까?
답변:
하이픈을 사용하여 HTML과 자바 스크립트를 분리하세요.
왜? 아래를 참조하십시오.
하이픈은 CSS 및 HTML에서 사용할 수 있지만 JavaScript 개체에는 사용할 수 없습니다.
많은 브라우저가 창 / 문서 개체의 전역 개체로 HTML Id를 등록합니다. 대규모 프로젝트에서는 이것이 정말 고통 스러울 수 있습니다.
이러한 이유로 HTML ID가 내 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 ID를 전역 개체로 등록하면 메시지가 '정의되지 않음'이 아니므로 위의 작업이 실패하고 HTML 개체의 인스턴스를 만들려고 시도합니다. HTML ID의 이름에 하이픈이 있는지 확인하면 아래와 같은 충돌을 방지 할 수 있습니다.
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를 사용할 수 있지만 이것은 문제를 해결하지 못하며 나중에 JavaScript 대신 HTML 객체에 실수로 액세스하는 동일한 문제가 발생할 수 있습니다.
한 가지 말로, window [ 'message-text']를 사용하여 (예를 들어) 창 개체를 통해 HTML 개체에 계속 액세스 할 수 있습니다.
window['message-text'];
나는 추천 할 것이다 Google HTML / CSS 스타일 가이드를
그것은 을 구체적으로 :
ID 및 클래스 이름의 단어는 하이픈으로 구분 합니다. 이해도와 스캔 가능성을 높이기 위해 하이픈 이외의 문자 (아무것도 포함하지 않음)로 선택기의 단어와 약어를 연결하지 마십시오.
/* 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때보 다 클래스 이름과 ID가 더 잘 작동 the-post합니다 ( Esc).
나는 이것이 전적으로 프로그래머에게 달려 있다고 믿습니다. 원한다면 camelCase도 사용할 수 있습니다 (하지만 어색해 보일 것 같습니다.)
저는 개인적으로 하이픈을 선호합니다. 키보드로 입력하는 것이 더 빠르기 때문입니다. 따라서 두 가지 예가 모두 널리 사용되기 때문에 가장 편한 방법으로 가야한다고 말하고 싶습니다.
두 예 모두 완벽하게 타당하며 ":"또는 "."혼합에 넣을 수도 있습니다. w3c 사양 에 따라 구분자로 . 저는 개인적으로 "_"라는 이름이 공백과 유사하기 때문에 두 단어 이름이면 사용합니다.
ZZ:ZZ는 ZZ\00003AZZ(CSS2 이상) 으로 이스케이프되어야 합니다.
실제로 일부 외부 프레임 워크 (javascript, php)는 ID 이름에 hypen을 사용하는 데 어려움 (버그?)이 있습니다. 나는 밑줄을 사용하고 (960grid도 마찬가지) 모두 훌륭하게 작동합니다.
나는 주로 내가 만나는 자바 스크립트 부작용의 이유로 밑줄을 제안합니다.
아래 코드를 위치 표시 줄에 입력하면 'example-value'is undefined 오류가 발생합니다. div의 이름이 밑줄로 지정되면 작동합니다.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value")잘 작동합니다.