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?

html coding-style naming-conventions Emanuil Rusev
źródło

11

Oba te linki są teraz zerwane

Steve

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

Raatje
źródło

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

Klas Mellbourn
źródło

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

Doug Neiner
źródło

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.

adamse
źródło

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.

Myles
źródło

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.

eozzy
źródło

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.

DavidHavl
źródło

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

jgreep
źródło

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

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

Odpowiedzi: