Nazywanie atrybutów HTML „class” i „id” - myślniki a podkreślenia [zamknięte]


114

<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?


11
Oba te linki są teraz zerwane
Steve

Odpowiedzi:


136

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'];


Nie rozumiem czegoś w twoim poście tutaj, być może mógłbyś to wyjaśnić. Mówisz więc, że niektóre przeglądarki rejestrują identyfikatory html jako obiekty globalne i jeśli umieścisz łącznik w identyfikatorze, zagwarantujesz, że nie będzie konfliktu między tymi automatycznie wygenerowanymi obiektami a tymi, które tworzysz, ponieważ łączniki są niedozwolone . Ale w jaki sposób przeglądarka tworzy te dzielone obiekty, jeśli łączniki nie są dozwolone? Wygląda na to, że musiałby je rozebrać, pozostawiając w ten sposób potencjalny konflikt nazw.
Dallas Caley

@DallasCaley Jeśli nie widzisz, ta odpowiedź była wzywająca do aktualizacjiwindow['message-text'];
Chris Marisic

Ach, myślę, że rozumiem. Dziwne, że javascript nie pozwala na utworzenie obiektu z myślnikiem w nazwie jako samodzielnego obiektu, ale pozwoli ci stworzyć obiekt z myślnikiem w nazwie, jeśli zostanie utworzony jako właściwość innego obiektu który nie ma myślnika w nazwie.
Dallas Caley

Ten post faktycznie skłonił mnie do przemyślenia mojego stanowiska, aby prawie w 100% zgadzać się z tobą z pozycji nie, która jest głupia, moje jedyne zastrzeżenie dotyczy twojego stanowiska w tej sprawie, wydaje się oczywiste, że każdy identyfikator powinien mieć - w tym, aby zapobiec ten sam problem, chyba że specjalnie chcesz, aby działał z określonymi identyfikatorami.
user254694

87

Polecam przewodnik po stylach Google HTML / CSS

W szczególności stwierdza :

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 {}

1
A co z BEMnotacją?
Iulian Onofrei

1
@IulianOnofrei możesz oczywiście używać BEM, ale najwyraźniej nie jest to ściśle zgodne z Przewodnikiem stylu Google.
Klas Mellbourn

hmm, bardzo dziwne. Framework GWT od Google korzysta z camelcase. Sprawdź ten wiersz kodu <h1 id = "appTitle"> </h1> w poniższym dokumencie. gwtproject.org/doc/latest/tutorial/i18n.html
karlihnos

4
Google! = Automatycznie poprawne. Często tak jest, ale samo bycie Google nie jest wystarczającym uzasadnieniem.
Craig Brett

2
To naprawdę zły pomysł. Wcześniej czy później będziesz chciał użyć swojego imienia w języku programowania, który nie obsługuje myślników w nazwach zmiennych (w zasadzie wszystkie z nich), a następnie BOOM! Idiotyczne zasady zmiany nazwy.
Timmmm

5

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).


masz rację, ale w tej otaczającej „dżungli html” będzie się wydawało znacznie bardziej
bałaganiarskie

4

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.


3
to pytanie jest podobne i weryfikuje odpowiedź stackoverflow.com/questions/70579/…
Matt Smith

2

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.


14
Tak, możesz użyć dwukropków i kropek jako identyfikatorów, ale to dobry sposób, aby znienawidzić osobę piszącą plik CSS.
Dave Markle

5
Identyfikator HTML ZZ:ZZmusiałby zostać ZZ\00003AZZzastąpiony kodem ucieczki jako (CSS2 i nowsze).
McDowell

1
Nie powiedziałem, że to dobra praktyka, powiedziałem, że jest ważna.
Myles

5
Brzmi jak fajny sposób na wywołanie eksplozji jQuery
Mike Robinson

0

Używam pierwszego (jeden-dwa), ponieważ jest bardziej czytelny. W przypadku obrazów wolę jednak podkreślenie (btn_more.png). Camel Case (oneTwo) to kolejna opcja.


0

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.


3
Które? W każdym razie czytelność kodu jest o wiele ważniejsza.
Kamil Tomšík

-1

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);

5
To powinno być document.getElementById("example-value"), co będzie działać dobrze.
Chuck,

Otrzymuję podobny problem z ASP.NET MVC podczas określania wartości atrybutu w parametrze HtmlAttributes funkcji pomocniczych HTML.
Matthijs Wessels
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.