<div id="example-value">czy <div id="example_value">?
Ta strona i Twitter używają pierwszego stylu. Facebook i Vimeo - drugi.
Którego używasz i dlaczego?
Odpowiedzi:
Użyj łączników, aby zapewnić izolację między kodem HTML i JavaScript.
Czemu? patrz poniżej.
Łączniki można używać w CSS i HTML, ale nie w obiektach JavaScript.
Wiele przeglądarek rejestruje identyfikatory HTML jako obiekty globalne w oknie / obiekcie dokumentu, w dużych projektach może to stać się prawdziwym problemem.
Z tego powodu używam nazw z łącznikami, dzięki czemu identyfikatory HTML nigdy nie będą kolidować z moim JavaScriptem.
Rozważ następujące:
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>Jeśli przeglądarka zarejestruje identyfikatory HTML jako obiekty globalne, powyższe zakończy się niepowodzeniem, ponieważ wiadomość nie jest „niezdefiniowana” i spróbuje utworzyć instancję obiektu HTML. Upewniając się, że identyfikator HTML ma łącznik w nazwie, zapobiega konfliktom, takim jak ten poniżej:
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>Oczywiście możesz użyć messageText lub message_text, ale to nie rozwiązuje problemu i możesz później napotkać ten sam problem, w którym przypadkowo uzyskasz dostęp do obiektu HTML zamiast JavaScript
Jedna uwaga, wciąż możesz uzyskać dostęp do obiektów HTML poprzez (na przykład) obiekt window, używając window ['tekst-wiadomości'];
window['message-text'];
Polecam przewodnik po stylach Google HTML / CSS
Oddziel słowa w ID i nazwach klas myślnikiem . Nie łącz słów i skrótów w selektorach za pomocą żadnych znaków (w tym żadnego) innych niż łączniki, aby poprawić zrozumienie i czytelność.
/* 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 {}BEMnotacją?
To naprawdę sprowadza się do preferencji, ale tym, co będzie Cię kołysać w określonym kierunku, może być edytor, w którym kodujesz. Na przykład funkcja autouzupełniania TextMate zatrzymuje się na myślniku, ale traktuje słowa oddzielone podkreśleniem jako pojedyncze słowo. Dlatego nazwy klas i identyfikatory z the_postdziałają lepiej niż the-postpodczas korzystania z funkcji automatycznego uzupełniania ( Esc).
Uważam, że to zależy wyłącznie od programisty. Możesz też użyć camelCase, jeśli chcesz (ale myślę, że wyglądałoby to niezręcznie).
Osobiście wolę łącznik, ponieważ na mojej klawiaturze można pisać szybciej. Więc powiedziałbym, że powinieneś wybrać to, z czym czujesz się najbardziej komfortowo, ponieważ oba twoje przykłady są szeroko używane.
Każdy przykład jest całkowicie poprawny, możesz nawet wrzucić do mieszanki „:” lub „”. jako separatory zgodnie ze specyfikacją w3c . Osobiście używam „_”, jeśli jest to nazwa składająca się z dwóch słów, tylko ze względu na jej podobieństwo do spacji.
ZZ:ZZmusiałby zostać ZZ\00003AZZzastąpiony kodem ucieczki jako (CSS2 i nowsze).
W rzeczywistości niektóre zewnętrzne frameworki (javascript, php) mają trudności (błędy?) Z używaniem łącznika w nazwach identyfikatorów. Używam podkreślenia (tak samo jak 960grid) i wszystko działa świetnie.
Sugerowałbym podkreślenie głównie ze względu na efekt uboczny javascript, z którym się spotykam.
Jeśli wpiszesz poniższy kod na pasku adresu, pojawi się błąd: „przykładowa wartość” jest niezdefiniowana. Jeśli element div został nazwany z podkreśleniami, zadziała.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), co będzie działać dobrze.