2010-01-30 11 views
14

io sono quasi ossessionato perfetto indentazione e l'allineamento durante la scrittura di codice, ma per qualche motivo non mi sento comodo markup HTML rientro. Forse perché alcune volte il livello di indentazione diventa troppo profondo, ma di solito solo (ab) uso la funzione di piegatura di VIM. Questa è considerata una cattiva pratica? Qual è il tuo stile con la rientranza di markup?Ti induci il tuo codice HTML?

+3

Come hai intenzione di decidere che cosa è la risposta corretta qui? Sicuramente sembra una domanda della CW. – random

+3

Dupe: http://stackoverflow.com/questions/304055/dear-fsm-not-again – random

+0

Crisi: è molto diverso. Riguarda l'HTML generato; non scritto a mano. –

risposta

9

faccio rientro, si mantiene roba leggibile. Considera l'indentazione di 2 spazi anziché 4 o 8. Rientro solo elementi di blocco, metto il resto su una singola riga.

1

mi trattino allo stesso modo lo farei con qualsiasi documento di stile XML (che XHTML è un sottoinsieme di).

1

Non importa molto da quando si dispone di strumenti come Firebug, ma anche cercare di ottenere alcune nuove linee dopo il div, p, ul ect. elementi. il problema principale è che: quando sembra buono nel mio codice php, si rompe nel codice HTML prodotto.

8

lo faccio trattino.

Inoltre, quando possibile, cercare di minimizzare over-nesting HTML. Più semplice è il markup, meglio è. Mentre la costruzione di una gerarchia profonda può avere un senso logico, può essere un incubo pratico per l'applicazione della manutenzione CSS & in generale.

Se è possibile, semplificare il vostro html. Questo fermerà la sovrastampa e renderà più facile la lettura. Ancora meglio, a seconda della tecnologia lato quello server in uso (se presente) si potrebbe essere in grado di abbattere file complessi in file separati (ad esempio, una vista parziale in MVC o controlli utente in moduli web, ecc)

+0

"Se puoi, semplifica il tuo html." Esattamente. Se il rientro del codice HTML lo rende troppo profondo, ciò implica che il tuo HTML è eccessivamente complicato e dovrebbe essere scomposto in altri include/tag/moduli/ecc. Questo dovrebbe anche renderlo più riutilizzabile. – Cerin

3

Sono abbastanza fanatico di indentare tutto. HTML è incluso in questo. Ho alcune delle mie piccole "regole" come, non indentare un <tr>, e così via, ma seguo le mie regole.

0

Io uso Web Developer visiva whice si prende cura del trattino automaticamente

1

deve rientrare !! ... il seguente testo da PEP8 - riassume come cerco di fare le cose in tutte le lingue ..

* Consistenza Foolish è l'Hobgoblin di piccole menti

una guida di stile è di circa la coerenza. La coerenza con questa guida di stile è importante. La coerenza all'interno di un progetto è più importante. La coerenza all'interno di un modulo o funzione è la più importante. Ma soprattutto: sapere quando essere incoerenti - a volte la guida allo stile non si applica. In caso di dubbio, usa il tuo miglior giudizio. Guarda altri esempi e decidi cosa sembra meglio. E non esitate a chiedere!

Due buone ragioni per rompere una regola particolare:

(1) Quando si applica la regola renderebbe il codice meno leggibile, anche per chi è abituato a leggere il codice che segue le regole.

(2) Per coerenza con il codice che rompe anche (forse per ragioni storiche) che circondano -. Anche se questo è anche l'occasione per ripulire qualcun altro pasticcio *

2

Sì!

Se si utilizza Visual Studio CTRL+KCTRL+D e tutto viene organizzato questo renderà la vita più facile

3

Ho lasciato il mio HTML essere rientrato dal mio editore.

Onestamente, quali sono questi editor per il contrario?

+7

Non stavo chiedendo * come * per farlo –

+2

Fai _you_ indentare il tuo codice? No, non indentò, il mio editore lo fa. E considero questa best practice. –

+8

Hai letto anche domande o solo i titoli? –

4

sembra migliore se indentiamo ed è anche più leggibile, ma! la rientranza è il peggiore problema di prestazioni perché la rientranza lascia in realtà molti spazi bianchi soprattutto quando il nesting si fa più profondo. prova a scrivere due pagine html, rendi il primo perfettamente rientrato e il secondo senza indentazione, noterai che la seconda pagina è in realtà più piccola del 60% (il che significa che carica più velocemente nel browser).

realizzo indentazione perfetta durante lo sviluppo ma passo a una minificazione perfetta per l'implementazione.

+0

Mi aspettavo di vedere più commenti sulle prestazioni nelle altre risposte, quindi +1 da me. – zacharydl

0

Notepad ++ implementa HTMLTidy che può essere utilizzato anche per il rientro automatico dell'HTML. L'ho trovato molto utile in passato, specialmente quando si tratta dell'output HTML da un controllo lato server che può essere o meno valido.

0

Penso che sia importante indentare l'HTML allo stesso modo di ogni pezzo di codice che scrivi, sia in Python, C#, JavaScript o CSS. Il rientro è per la leggibilità, in modo che quando tu o qualcun altro cercheranno di capire e modificare il file, ci vorrà meno tempo possibile per quella persona. Il rientro del codice HTML lo rende più leggibile? Penso: sì, molto.

Non indentizzo solo gli elementi, ma anche le proprietà. E 'un disastro totale per leggere elemento HTML con 3+ proprietà tutti sulla stessa linea, come:

<textarea placeholder="Content" aria-label="Message content" name="content" rows="5" required="" ng-model="contactPage.content"></textarea> 

Mentre è molto più facile da capire e modificare con ogni attributo sulla linea separata:

<textarea placeholder="Content" 
      aria-label="Message content" 
      name="content" 
      rows="5" 
      required="" 
      ng-model="contactPage.content"></textarea> 

Il problema con il rientro è che, a meno che non si faccia una pagina web molto banale, l'HTML diventa facilmente molto profondo (alcuni elementi hanno alti livelli di nidificazione). Ciò può risultare in una cattiva leggibilità: è difficile afferrare la struttura quando qualcosa è rientrato di 7 livelli, anche le linee diventano molto lunghe - e le dimensioni dei file aumentano, a causa della necessità di memorizzare i caratteri dello spazio che creano il rientro. Ecco perché è anche importante:

  • Spalato il codice HTML in modelli separati (ci sono innumerevoli meccanismi di template disponibili, ad esempio Nunjucks). Ciò aumenta la leggibilità poiché ciascun file di modello reimposta il rientro.
  • Minimizza il codice HTML per la produzione. Questo elimina le dimensioni dei file aumentando di indentazione.
0

Sì, certo.
Indento con tabulazioni (che spesso sono le stesse di 4 spazi in un carattere monospace come Consolas, ma è solo 1 carattere invece di 4!).

Quando un tag ha un solo attributo Io lo scrivo inline al tag di apertura:

<button onclick="clicked()"> 

Quando un tag ha più di un attributo li scrivo su una nuova linea per ogni dopo il nome del tag:

<button 
    id="helloButton" 
    onclick="clicked()"> 

Quando un elemento contiene solo testo normale, lo scrivo inline al tag di apertura e chiusura:

<button>Hello world</button> 

Quando un elemento contiene elementi figlio o nodi di testo, li scrivo su una nuova linea, rientrata dal tag di apertura e chiusura:

<button> 
    Hello <span>world</span> 
</button> 

<!-- OR --> 

<div> 
    <button>Hello world</button> 
</div> 
Problemi correlati