¿Indesea su código HTML?

Question

Estoy casi obsesionado con la sangría perfecta y la alineación al escribir el código, pero por alguna razón no me siento cómodo sangrando el marcado HTML. Tal vez porque algunas veces el nivel de sangría es demasiado profundo, pero usualmente simplemente uso la característica de plegado de VIM. ¿Esto se considera una mala práctica? ¿Cuál es tu estilo con sangría de marcado?

Answer 1

hago sangría, que guarda la materia legible. Considere la sangría por 2 espacios en lugar de 4 u 8. Solo sangró los elementos del bloque, coloque el resto en una sola línea.

Answer 2

Doblo de la misma manera que con cualquier documento de estilo XML (del cual XHTML es un subconjunto).

Answer 3

no importa mucho ya que tiene herramientas como firebug, pero también trato de obtener algunas líneas nuevas después del div, p, ulct. elementos. el principal problema es que: cuando se ve bien en mi código php, se rompe en el html producido.

Answer 4

I do indent.

También, siempre que sea posible, intente minimizar el HTML sobre-anidamiento. Cuanto más simple sea el marcado, mejor. Si bien construir una jerarquía profunda puede tener un sentido lógico, puede ser una pesadilla práctica aplicar el mantenimiento de CSS & en general.

Si puede, simplifique su html. Esto detendrá la sobredentación y facilitará la lectura. Aún mejor, dependiendo de la tecnología del lado del servidor que esté utilizando (si existe), puede desglosar archivos complejos en archivos separados (por ejemplo, vistas parciales en MVC o controles de usuario en formularios web, etc.)

Answer 5

Soy bastante fanático de sangrar todo. HTML está incluido en esto. Tengo algunas de mis pequeñas "reglas" como, no sangrar un <tr>, y así sucesivamente, pero me atengo a mis reglas.

Answer 6

que utiliza Visual Web Developer whice se encarga del guión de forma automática

Answer 7

deben sangrar !! ... el siguiente texto de PEP8 - resume la forma en que trato de hacer las cosas en todos los idiomas ..

* Una consistencia estúpida es el duende de las mentes pequeñas

Una guía de estilo es una cuestión de coherencia. La consistencia con esta guía de estilo es importante. La consistencia dentro de un proyecto es más importante. La consistencia dentro de un módulo o función es lo más importante. Pero lo más importante: saber cuándo ser inconsistente: a veces la guía de estilo simplemente no se aplica. En caso de duda, use su mejor juicio. Mire otros ejemplos y decida qué se ve mejor. ¡Y no dudes en preguntar!

Dos buenas razones para romper una regla particular:

(1) Al aplicar la regla haría que el código menos legible, incluso para alguien que está acostumbrado a la lectura de código que sigue las reglas.

(2) Para ser consistente con el código que rodea también la rompe (tal vez por razones históricas) -. Aunque esto es también una oportunidad para limpiar algún otro desorden *

Answer 8

Sí!

si utiliza Visual Studio CTRL+KCTRL+D y todo se organiza esto hará la vida más fácil

Answer 9

dejo que mi HTML estar sangrado por mi editor.

Honestamente, ¿para qué sirven estos editores?

Answer 10

se ve mejor si sangramos y también es más legible, pero! La sangría es el peor problema de rendimiento porque la sangría está dejando muchos espacios en blanco, especialmente cuando la anidación se hace más profunda. intente escribir dos páginas html, haga la primera sangría perfecta y la segunda sin sangría, notará que la segunda página es en realidad un 60% más pequeña en tamaño (lo que significa que se carga más rápido en el navegador).

hago la sangría perfecta durante el desarrollo pero cambio a la minificación perfecta en la implementación.

Answer 11

Notepad ++ implementa HTMLTidy que también se puede utilizar para aplicar automáticamente sangría HTML. Lo he encontrado muy útil en el pasado, especialmente cuando se trata de salida HTML desde un control del lado del servidor que puede o no ser válido.

Answer 12

Creo que es importante aplicar sangría al HTML igual que con cada parte del código que se escribe, ya sea en Python, C#, JavaScript o CSS. La sangría es para facilitar la lectura, por lo que cuando usted u otra persona intenten comprender y editar el archivo, le tomará a esa persona la menor cantidad de tiempo posible. ¿Sancionar el código HTML lo hace más legible? Creo: sí, mucho.

Realizo sangría no solo de los elementos, sino también de sus propiedades. Es un desastre total para leer elemento HTML con 3+ todas las propiedades en la misma línea, como:

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

Si bien es mucho más fácil de entender y editar con cada atributo en la línea separada:

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

El problema con la sangría es que, a menos que haga una página web muy trivial, HTML se vuelve muy profundo (algunos elementos tienen altos niveles de anidación). Esto puede dar como resultado una mala legibilidad: es difícil captar la estructura cuando se sangran 7 niveles, también las líneas son muy largas, y aumentar el tamaño de los archivos, debido a la necesidad de almacenar los caracteres de espacio que forman la sangría. Por eso también es importante:

• Dividir el código HTML en las plantillas separadas (hay un sinnúmero de mecanismos de plantillas disponibles, por ejemplo Nunjucks). Esto aumenta la legibilidad ya que cada archivo de plantilla restablece la sangría.
• Minify your HTML for production. Esto elimina los tamaños de archivo que aumentan por indentación.

Answer 13

Sí, por supuesto.
Yo sangro con pestañas (que a menudo son las mismas de 4 espacios en un personaje monoespacial como Consolas, pero es sólo 1 carácter en lugar de 4 unos).

Cuando una etiqueta tiene un solo atributo lo escribo inlined a la apertura de la etiqueta:

<button onclick="clicked()"> 

Cuando una etiqueta tiene más de un atributo de las escribo en una nueva línea para cada uno después de que el nombre de la etiqueta:

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

Cuando un elemento contiene sólo texto plano, lo escribo inlined a la etiqueta de apertura y cierre:

<button>Hello world</button> 

Cuando un elemento contiene elementos secundarios o nodos de texto, las escribo en una nueva línea, con una sangría por la etiqueta de apertura y cierre:

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

<!-- OR --> 

<div> 
    <button>Hello world</button> 
</div>