Jaka jest standardowa konwencja nazewnictwa dla identyfikatorów html/css i klas?

Istnieje przewodnik po stylach css i html autorstwa google, który zaleca zawsze używanie myślnika: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

Proponuję użyć podkreślenia zamiast myślnika ( - ), ponieważ ...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

Możesz łatwo uzyskać dostęp do wartości po id w ten sposób. Ale jeśli użyjesz myślnika, spowoduje to błąd składni.

To stara próbka, ale może działać bez jquery -:)

Nie ma uzgodnionej konwencji nazewnictwa dla HTML i CSS. Ale możesz uporządkować swoją nomenklaturę wokół projektowania obiektów. Dokładniej to, co nazywam własnością i relacją.

Własność

Słowa kluczowe opisujące obiekt, mogą być oddzielone myślnikami.

Samochód-nowy-skręcony-w-prawo

Słowa kluczowe opisujące obiekt można również podzielić na cztery kategorie (które należy uporządkować od lewej do prawej): Obiekt, Obiekt-Deskryptor, Action i Action-deskryptor.

Samochód-rzeczownik, LP., celownik
nowy-przymiotnik i obiekt-deskryptor, który opisuje obiekt bardziej szczegółowo [16]} turned-czasownik i czynność należąca do obiektu
prawo-przymiotnik, a akcja-deskryptor, który opisuje akcję bardziej szczegółowo

Uwaga: czasowniki (akcje) powinny być w czasie przeszłym (turn, did, ran itp.).

Relacja

Obiekty mogą mieć również relacje jak rodzic i dziecko. Akcja i deskryptor akcji należą do obiektu nadrzędnego, nie należą do obiektu podrzędnego. W przypadku relacji między obiektami można użyć podkreślenia.

Car-new-turned-right_wheel-left-turned-left

• samochód-nowy-skręcony-w prawo (zgodnie z zasadą własności)
• koło-w lewo-skręcone-w lewo (zgodnie z zasadą własności)
• car-new-turned-right_wheel-left-turned-left (wynika z relacji reguła)

Uwagi końcowe:

• ponieważ CSS jest niewrażliwy na wielkość liter, lepiej pisać wszystkie nazwy małymi literami( lub wielkimi literami); unikać wielbłądów lub Pascala, ponieważ mogą prowadzić do niejednoznacznych nazw.
• wiedzieć, kiedy używać klasy i kiedy używać id. Nie chodzi tylko o identyfikator używany raz na stronie internetowej. Przez większość czasu chcesz używać klasy, a nie identyfikatora. Web komponentów takich jak (przyciski, formularze, panele, ...etc) powinny zawsze używać klasy. Identyfikatory mogą łatwo prowadzić do konfliktów nazw i powinny być używane oszczędnie do zastępowania nazw znaczników. Powyższe pojęcia własności i relacji mają zastosowanie do nazywania zarówno klas, jak i identyfikatorów i pomogą uniknąć konfliktów nazewnictwa.
• jeśli nie podoba Ci się moja konwencja nazewnictwa CSS, istnieje również kilka innych: konwencja nazewnictwa strukturalnego, konwencja nazewnictwa prezentacyjnego, konwencja nazewnictwa semantycznego, konwencja nazewnictwa BEMA, konwencja nazewnictwa OCSS itp.

Jeszcze jeden alternatywny standard do rozważenia:

<div id="id_name" class="class-name"></div>

I w Twoim skrypcie:

var variableName = $("#id_name .class-name");

To po prostu używa camelCase, under_score i myślnika odpowiednio dla zmiennych, identyfikatorów i klas. Czytałem o tym standardzie na kilku różnych stronach internetowych. Chociaż trochę zbędne w selektorach css/jquery, redundancje ułatwiają wychwytywanie błędów. na przykład: jeśli widzisz .unknown_name lub #unknownName w swoim pliku CSS, wiesz, że musisz dowiedzieć się, co to właściwie odnosi się za.

Innym powodem, dla którego wielu preferuje myślniki w identyfikatorach CSS i nazwach klas jest funkcjonalność.

Używanie skrótów klawiaturowych jak opcja + zostawić/right (lub ctrl+zostawić/Prawo w systemie Windows) przesuwanie kodu słowo po słowie zatrzymuje kursor przy każdym myślniku, co pozwala precyzyjnie przesuwać id lub nazwę klasy za pomocą skrótów klawiaturowych. Podkreślniki i camelCase nie zostaną wykryte, a kursor będzie dryfował nad nimi tak, jakby wszystko było jednym jedno słowo.

Niedawno zacząłem uczyć się XML. Wersja podkreślenia pomaga mi oddzielić wszystko, co związane z XML (DOM, XSD, itp.) z języków programowania takich jak Java, JavaScript (przypadek wielbłąda). I zgadzam się z Tobą, że używanie identyfikatorów dozwolonych w językach programowania wygląda lepiej.

Edit: może nie ma związku, ale tutaj jest link do reguł i zaleceń dotyczących nazywania elementów XML, których przestrzegam przy nazywaniu identyfikatorów (sekcje "reguły nazewnictwa XML" i " najlepsze nazewnictwo Praktyki").

Http://www.w3schools.com/xml/xml_elements.asp