Best practice per denominare l'attributo Id di Dom Elements

Question

Questo è correlato alle convenzioni di denominazione per l'attributo id di un elemento DOM e suppongo anche l'attributo name. Quando si tratta di JavaScript, da quello che ho capito e ho fatto è sempre usato il caso cammello tranne i nomi delle classi. Le lezioni sono in scatola Pascal.

Detto questo sviluppo principalmente in ASP.NET ed ecco dove mi imbatto in un problema di denominazione per l'attributo id. In ASP.NET se si trascina e rilascia un nuovo controllo server in una pagina (cosa che faccio raramente, sono un tipo del tipo markup), i nomi predefiniti sono sempre caser Pascal perché devono essere conformi al framework .NET. linee guida per la denominazione per il codice lato server.

Quindi, quando si tratta di attribuire l'attributo id dei controlli server ASP.NET o solo elementi in markup, seguo la regola per cammello caso l'attributo id (linee guida di denominazione Javascript), ma questo è in conflitto con le linee guida di denominazione .NET. .

Quindi, uno, quale involucro normalmente si fa per l'attributo id negli elementi DOM e due cosa fanno le persone .NET che si sviluppano in ASP.NET per nominare l'attributo id?

In cima a quello, quando sto creando elementi di modulo nel markup, io in genere utilizzare la notazione ungherese per gli ingressi di testo, come

<input type="text" id="txtUserName" /> 

o per caselle di controllo come

<input type="checkbox" id="chkSelectAll" /> 

Quale va decisamente contro Linee guida per la denominazione dei codici .NET lato server e forse anche le linee guida JavaScript.

Qualsiasi consiglio è molto apprezzato.

Answer 1

• Mantenerlo semantico. Utilizzare parole complete, semplici (preferibilmente in inglese). Non cercare di inventare qualcosa di stravagante o tecnico, e non descrivere quello che è è - lo sappiamo. Descrivi cosa fa. Lo scopo descrittivo aggiunge valore informativo.

• Non abbreviare nulla! BW_RCB01_SW significava qualcosa per il team che ha fatto il nostro CSS per anni fa, ma non significa nulla per me ora e devo lavorare all'indietro per cercare di tradurre ciò che corrisponde a BW_RCB01_SW per i miei scopi, e o ricordare quella traduzione o documentarlo da qualche parte. Meglio? blackwhite-boxtype1-bottomleft. È più lungo ma non richiede una pietra di Rosetta.

• Conservare tutto in minuscolo e utilizzare caratteri di sottolineatura o trattini. Preferisco i trattini, ma è assolutamente una preferenza. Non dovrebbero esserci impedimenti all'utilizzo dei trattini, poiché non sono riservati in CSS o HTML e gli ID sono trattati come stringhe letterali in ogni altra lingua. La minuscola è tutta esperienza - troppe ore sprecate a chiedersi perché diamine non si applica questo stile oh. pageContainerLeft non corrisponde a pageContainerleft.

• Identificare esattamente quale elemento è, ma non di più. Pensa seriamente a ogni informazione che stai incorporando nel nome e se è necessario. Nel tuo esempio: hai necessario per sapere che è un checkbox per l'ID? Improbabile. Sai già a quale elemento ti riferisci perché è un ID univoco e devi comunque codificarti contro quell'elemento.

Answer 2

Ecco alcune linee guida di denominazione che mi hanno aiutato con i miei ID e classi nel DOM:

• non includono il tipo nel nome (cioè non txt o chk). Posso selezionare queste informazioni utilizzando CSS o jQuery molto più descrittivamente
• utilizzare caratteri di sottolineatura come separatori nel nome. I trattini non sempre funzionano in altre lingue, e la carcassa di cammello è un po 'difficile da leggere in markup

Answer 3

Uno dei guru HTML al mio ultimo lavoro in realtà raccomandato che delimita gli ID più parole con trattini

<input type="text" id="user-name" /> 

Sto faticando a ricordare perché - non ho più accesso ai documenti degli standard interni. So che in realtà non risponde alla tua domanda sul rivestimento Pascal vs Camel, però.

Io personalmente sconsiglio di usare HN - Trovo che sia una pratica largamente aberrante. Cosa succede se hai invece bisogno di cambiare l'array della casella di controllo su un elemento select? Ora l'ID dell'elemento ha false semantics al forno. Non vale la pena, IMO.

Answer 4

Naming come pochi oggetti possibili sicuramente aiuta a mantenere le cose pulite. Se riesci a ottenere nominando il genitore e riferendosi solo al bambino, sarà meglio (secondo me). Ottieni il bonus di un po 'meno html reso al client su ogni pagina.

Per quando devo nominare gli elementi, preferisco tutto in minuscolo, con notazione di sottolineatura. Sono stato ingannato dal fatto di non aver trovato il mio caso nei file CSS in precedenza, quindi se posso anticiparlo come un problema in anticipo, è un sollievo.

I caratteri di sottolineatura sono caratteri mentre i trattini possono essere interpretati come meno, quindi questo è un altro potenziale problema - ha senso attenersi solo ai caratteri di sottolineatura. Flex, ad esempio, non accetta XML con attributi denominati con trattini (so che questi sono valori non attributi, ma comunque una scommessa sicura).

Sono d'accordo con sopra però - nessun tipo di elemento o posizionamento o colore come classe/id. Notazione ungherese == male. Molto utile per determinare cos'è un ID. Mi piace nominare i campi dei moduli in modo specifico per un oggetto - user_login, user_email, user_address_state_id, user_address_country_id ecc., Potrebbero apparire tutti su un modulo di registrazione utente. Solitamente i campi non formattati non sono abbastanza lunghi per i caratteri di sottolineatura, altrimenti potresti essere in grado di rinominarli.

Answer 5

Che ci crediate o meno, ma ho avuto problemi con i trattini come nomi di nomi di classe id e css quando si utilizzano determinate librerie javascript. Questo è molto raro, ma ovviamente vuoi evitare qualcosa di simile. Per questo motivo uso case o segni di sottolineatura del cammello. Puoi usare anche caratteri di sottolineatura.

Altrimenti la regola generale è quella di avere nomi significativi che siano facilmente leggibili e comprensibili. Quando si tratta di "controlli", assicurati di seguire una sorta di convenzione di denominazione. Personalmente preferisco i suffissi sopra i prefissi (cioè nameText invece di textName) ma cerco di evitare i postfix perché li trovo troppo prolissi.

Quindi: 1. Nomi significativi. 2. Evita post/prefisso. 3. Evita le abbreviazioni (ad es. Indirizzo invece di addr). 4. Prenditi il ​​tuo tempo.