Qual è la convenzione di denominazione standard per ID e classi html / css?

Dipende dalla piattaforma che stai utilizzando o esiste una convenzione comune che la maggior parte degli sviluppatori suggerisce / segue?

Esistono diverse opzioni:

1. id="someIdentifier"' - sembra abbastanza coerente con il codice JavaScript.
2. id="some-identifier" - assomiglia di più agli attributi html5 e ad altre cose in html.
3. id="some_identifier" - sembra abbastanza coerente con il codice ruby ​​ed è ancora un identificatore valido all'interno di Javascript

Pensavo che # 1 e # 3 sopra abbiano più senso perché giocano meglio con Javascript.

C'è una risposta giusta a questo?

Non ce n'è uno.

Uso sempre i trattini bassi, a causa dei trattini che incasinano l'evidenziazione della sintassi del mio editor di testo (Gedit), ma questa è una preferenza personale.

Ho visto tutte queste convenzioni usate ovunque. Usa quello che ritieni sia il migliore - quello che sembra più bello / più facile da leggere per te, così come il più facile da scrivere perché lo userai molto. Ad esempio, se hai il tasto di sottolineatura sul lato inferiore della tastiera (improbabile, ma del tutto possibile), segui i trattini. Basta andare con ciò che è meglio per te. Inoltre, tutte e 3 queste convenzioni sono facilmente leggibili. Se lavori in gruppo, ricordati di seguire la convenzione specificata dal team (se presente).

Aggiornamento 2012

Ho cambiato il modo di programmare nel tempo. Ora uso camel case ( thisIsASelector) anziché trattini ora; Trovo quest'ultimo piuttosto brutto. Usa quello che preferisci, che può facilmente cambiare nel tempo.

Aggiornamento 2013

Sembra che mi piaccia mescolare le cose ogni anno ... Dopo essere passato a Sublime Text e aver usato Bootstrap per un po ', sono tornato ai trattini. Per me ora sembrano molto più puliti di un_der_scores o camelCase. Il mio punto originale è ancora valido: non esiste uno standard.

Aggiornamento 2015

Un caso interessante d'angolo con le convenzioni qui è Rust . Mi piace molto la lingua, ma il compilatore ti avviserà se definisci cose usando qualcosa di diverso underscore_case. Puoi disattivare l'avviso, ma è interessante che il compilatore suggerisca fortemente una convenzione di default. Immagino che in progetti più grandi porti a un codice più pulito, il che non è male.

Aggiornamento 2016 ( hai richiesto)

Ho adottato lo standard BEM per i miei progetti in futuro. I nomi delle classi finiscono per essere piuttosto dettagliati, ma penso che dia una buona struttura e riusabilità alle classi e ai CSS che li accompagnano. Suppongo che BEM sia in realtà uno standard (quindi il mio nodiventa yesforse) ma dipende ancora da te cosa decidi di utilizzare in un progetto. Ancora più importante: essere coerenti con ciò che si sceglie.

Aggiornamento 2019 ( hai richiesto)

Dopo aver scritto CSS per un po ', ho iniziato a lavorare in un posto che utilizza OOCSS in uno dei loro prodotti. Personalmente trovo piuttosto spiacevole sparpagliare le classi ovunque, ma non dover saltare continuamente tra HTML e CSS è abbastanza produttivo.

Sono comunque deciso a BEM. È dettagliato, ma lo spazio dei nomi rende molto naturale lavorare con esso nei componenti di React. È anche ottimo per selezionare elementi specifici durante i test del browser.

OOCSS e BEM sono solo alcuni degli standard CSS disponibili. Scegli quello che funziona per te: sono tutti pieni di compromessi perché CSS non è poi così buono .

Aggiornamento 2020

Un aggiornamento noioso quest'anno. Sto ancora usando BEM. La mia posizione non è davvero cambiata dall'aggiornamento del 2019 per i motivi sopra elencati. Usa ciò che funziona per te che si adatta alle dimensioni del tuo team e nasconde quanto meno o meno delle scarse funzionalità CSS che desideri.

C'è una guida di stile css & html di google, che consiglia di utilizzare sempre un trattino: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

Ti suggerisco di usare un trattino basso anziché un trattino (-), poiché ...

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

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

puoi accedere facilmente al valore tramite id in questo modo. Ma se si utilizza un trattino, si verificherà un errore di sintassi.

Questo è un vecchio esempio, ma può funzionare senza jquery - :)

grazie a @jean_ralphio, c'è un modo per evitarlo

var x = document.myForm['my-Id'].value;

Lo stile Dash sarebbe uno stile di codice google, ma non mi piace molto. Preferirei TitleCase per id e camelCase per la classe.

tl; dr;

Non esiste una risposta vera. Puoi scegliere uno dei tanti là fuori o creare i tuoi standard in base a ciò che ha senso, a seconda di chi stai lavorando. Ed è al 100% dipendente dalla piattaforma.

Posta originale

Solo un altro standard alternativo da considerare:

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

E nella tua sceneggiatura:

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

Questo utilizza semplicemente un camelCase, under_score e un trattino rispettivamente per variabili, ID e classi. Ho letto di questo standard su un paio di siti Web diversi. Sebbene un po 'ridondante nei selettori css / jquery, le ridondanze semplificano la rilevazione degli errori. ad esempio: se vedi .unknown_nameo #unknownNamenel tuo file CSS, sai che devi capire a cosa si riferisce effettivamente.

AGGIORNAMENTO 2019

(I trattini sono chiamati 'caso kebab', i trattini bassi sono chiamati 'snake_case', e quindi hai 'TitleCase', 'pascalCase')

Personalmente non mi piacciono i trattini. Inizialmente l'ho pubblicato come un'alternativa (perché le regole sono semplici). Tuttavia, i trattini rendono le scorciatoie di selezione molto difficili (doppio clic, ctrl/ option+ left/ right, e ctrl/ cmd+ Din vsCode. Inoltre, i nomi delle classi e i nomi dei file sono l'unico posto in cui lavorano i trattini, perché sono quasi sempre tra virgolette o in CSS, ecc. Ma la cosa scorciatoia vale ancora.

Oltre alle variabili, ai nomi delle classi e agli ID, si desidera esaminare anche le convenzioni sui nomi dei file. E Git Branches.

Il gruppo di programmazione del mio ufficio in realtà ha avuto una riunione un mese o due fa per discutere su come avremmo chiamato le cose. Per i rami git, non potevamo decidere tra 321-the_issue_description o 321_the-issue-description. (Volevo 321_theIssueDescription, ma ai miei colleghi non piaceva.)

Un esempio, per dimostrare di lavorare con gli standard di altre persone ...

Vue.js ha uno standard. In realtà hanno due standard alternativi per molti dei loro articoli. Non mi piacciono entrambe le versioni per i nomi dei file. Raccomandano "/path/kebab-case.vue"o "/path/TitleCase.Vue". Il primo è più difficile da rinominare, a meno che tu non stia specificamente cercando di rinominare parte di esso. Quest'ultimo non è buono per la compatibilità multipiattaforma. Io preferirei "/path/snake_case.vue". Tuttavia, quando si lavora con altre persone o progetti esistenti, è importante seguire qualunque standard sia già stato definito. Quindi vado con il caso di kebab per i nomi dei file in Vue, anche se mi lamento totalmente. Perché non seguire ciò significa cambiare molti file impostati da vue-cli.

Non esiste una convenzione di denominazione concordata per HTML e CSS. Ma potresti strutturare la tua nomenclatura attorno al design degli oggetti. Più specificamente ciò che chiamo Proprietà e relazione.

Proprietà

Le parole chiave che descrivono l'oggetto potrebbero essere separate da trattini.

auto-new-girare-destra

Le parole chiave che descrivono l'oggetto possono anche rientrare in quattro categorie (che devono essere ordinate da sinistra a destra): Oggetto, Descrittore oggetto, Azione e Descrittore azione.

car - un sostantivo e un oggetto
nuovo - un aggettivo e un descrittore di oggetti che descrivono l'oggetto in modo più dettagliato
trasformato - un verbo e un'azione che appartiene all'oggetto
giusto - un aggettivo e un descrittore di azione che descrive l'azione in modo più dettagliato

Nota: i verbi (azioni) devono essere tesi (girato, fatto, eseguito, ecc.).

Relazione

Gli oggetti possono anche avere relazioni come genitore e figlio. Action e Action-Descriptor appartiene all'oggetto padre, non appartengono all'oggetto figlio. Per le relazioni tra oggetti è possibile utilizzare un carattere di sottolineatura.

auto-new-gir-right_wheel-sinistra-trasformato-sinistra

• auto-nuova-girata a destra (segue la regola della proprietà)
• ruota-sinistra-girata-sinistra (segue la regola della proprietà)
• auto-nuova-girata-destra_wheel-sinistra-girata-sinistra (segue la regola della relazione)

Note finali:

• Poiché i CSS non fanno distinzione tra maiuscole e minuscole, è meglio scrivere tutti i nomi in minuscolo (o maiuscolo); evitare il caso cammello o il caso pascal in quanto possono portare a nomi ambigui.
• Sapere quando usare una classe e quando usare un id. Non si tratta solo di un ID utilizzato una volta nella pagina Web. Il più delle volte, vuoi usare una classe e non un ID. I componenti Web come (pulsanti, moduli, pannelli, ecc.) Devono sempre utilizzare una classe. Gli ID possono facilmente portare a conflitti di denominazione e dovrebbero essere usati con parsimonia per lo spazio dei nomi. I suddetti concetti di proprietà e relazione si applicano alla denominazione di classi e ID e ti aiuteranno a evitare conflitti di denominazione.
• Se non ti piace la mia convenzione di denominazione CSS, ce ne sono anche molte altre: convenzione di denominazione strutturale, convenzione di denominazione presentazionale, convenzione di denominazione semantica, convenzione di denominazione BEM, convenzione di denominazione OCSS, ecc.

Un altro motivo per cui molti preferiscono trattini nell'ID CSS e nei nomi di classe è la funzionalità.

L'uso di scorciatoie da tastiera come option+ left/ right(o ctrl+ left/ rightsu Windows) per attraversare il codice parola per parola arresta il cursore su ogni trattino, consentendo di attraversare con precisione l'id o il nome della classe utilizzando le scorciatoie da tastiera. I caratteri di sottolineatura e CamelCase non vengono rilevati e il cursore si sposta su di essi come se fosse una sola parola.

Di recente ho iniziato a studiare XML. La versione di sottolineatura mi aiuta a separare tutto ciò che riguarda XML (DOM, XSD, ecc.) Da linguaggi di programmazione come Java, JavaScript (caso cammello). E sono d'accordo con te sul fatto che l'utilizzo di identificatori consentiti nei linguaggi di programmazione abbia un aspetto migliore.

Modifica: potrebbe non essere correlato, ma ecco un link per le regole e le raccomandazioni sulla denominazione degli elementi XML che seguo quando assegno i nomi (sezioni "Regole di denominazione XML" e "Best Naming Practices").

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

Penso che dipenda dalla piattaforma. Quando sviluppo in .Net MVC, utilizzo i caratteri minuscoli e trattini in stile bootstrap per i nomi delle classi, ma per gli ID utilizzo PascalCase.

Il ragionamento di ciò è che le mie opinioni sono supportate da modelli di vista fortemente tipizzati. Le proprietà dei modelli C # sono il caso pasquale. Per motivi di associazione del modello con MVC, è logico che i nomi degli elementi HTML che si legano al modello siano coerenti con le proprietà del modello della vista che sono maiuscole. Per semplicità, i miei ID usano la stessa convenzione di denominazione dei nomi degli elementi ad eccezione dei pulsanti di opzione e delle caselle di controllo che richiedono ID univoci per ciascun elemento nel gruppo di input indicato.