¿Hay una longitud máxima de línea recomendada para HTML o JavaScript? [cerrado]


La mayoría de las directrices de estilo para la mayoría de los lenguajes de programación recomiendan una longitud máxima de línea, típicamente 80 caracteres. Esto parece poco práctico para HTML y JavaScript (cuando está incrustado en HTML). ¿Existe un consenso sobre un límite práctico de longitud de línea para HTML / JavaScript? ¿O generalmente se deja en manos del sentido común del desarrollador?

Author: Matthew, 2010-05-22

7 answers

Ya que mencionas JavaScript, esto es lo que Douglas Crockford tiene que decir sobre el tema:

Evite las líneas de más de 80 caracteres. Cuando una declaración no cabe en una sola línea, puede ser necesario romperla. Coloque el descanso después de un operador, idealmente después de una coma. Una interrupción después de un operador disminuye la probabilidad de que un error de copiar y pegar se enmascare mediante la inserción de punto y coma. La siguiente línea debe estar sangrada 8 espacios.

De: Código Convenciones para el Lenguaje de programación JavaScript

 22
Author: Daniel Vassallo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-22 01:54:43

Este límite parece ser un legado de antiguas tarjetas perforadas IBM. ¿Por qué 80 caracteres son el límite 'estándar' para el ancho del código?

Realmente me resulta difícil trabajar con solo 80 caracteres para HTML. Se vuelve ilegible muy rápido. Así que decidí por mí mismo tomar la longitud de la línea en GitHub como medida.

Parece que hay diferentes límites de caracteres dependiendo del sistema operativo y/o del navegador. Pero 120 debería ser un valor bastante seguro.

El Ubuntu:

    [16]} Firefox: 126
  • Opera 12.16: 126 {[17]]}
  • Cromo: 113

En OSX 10.9:

  • Google Chrome: 125
  • [16]} Firefox: 122
  • Safari: 121

Source: ¿Cuál es el límite de caracteres de Github, o la longitud de línea para ver archivos en github?


Por otro lado, a veces elegir su propio estándar no funciona. Normas de codificación o linters para su idioma o framework podría obligarte a atenerte a 80 caracteres. Lo que al menos puede ser muy útil cuando se trata de leer código en pantallas móviles.

Pero para HTML aumentaría este número a 120 caracteres. Por el bien de la legibilidad. Quiero decir, piensa en todos los frameworks pesados de clase CSS como Bootstrap, ¿cómo se vería tu plantilla al final con solo 80 caracteres de longitud de línea? (Aparte de eso, es mejor que elija Bourbon Neat, que no contaminará su HTML con toneladas de clases.)

 9
Author: leymannx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-20 20:46:47

Google dice 500-ish para JS: https://developers.google.com/closure/compiler/faq#linefeeds

El Compilador Closure añade intencionalmente saltos de línea cada 500 personajes o algo así. Cortafuegos y proxies a veces corruptos o ignorados archivos JavaScript grandes con líneas muy largas. Añadir saltos de línea cada 500 caracteres evita este problema.

Uglify --max-line-len 500 o grunt-contrib-uglify options: { maxLineLen: 500 }

No estoy seguro de si el límite se aplica a HTML o CSS, pero no he visto esa opción para ningún compresor CSS que he utilizado.

Las reglas SMTP se aplicarían al correo electrónico HTML: https://www.ietf.org/rfc/rfc0821.txt

La longitud total máxima de una línea de comandos incluyendo la palabra de comando y el CRLF es de 512 caracteres.

 8
Author: Webveloper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-20 20:35:06

El límite de línea de 80 caracteres aparece a partir de los días de las pantallas sin una gran cantidad de bienes raíces. Ahora es así para facilitar la lectura, por lo que es posible tener dos (o más) archivos de código diferentes abiertos uno al lado del otro, sin tener que desplazarse para ver cada uno de ellos.

Esas razones todavía se aplican a HTML y JavaScript, aunque obviamente no es necesario cumplirlas. Así que depende de ti.

Estoy de acuerdo en que con HTML puede ser difícil mantenerse dentro de ese límite, aunque con JavaScript no debería ser un problema.

 6
Author: Carson Myers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-22 01:49:36

El límite máximo de longitud de línea es lo que se sienta cómodo leyendo y editando. personalmente, cualquier código mío que no quepa en la pantalla sin envolverlo será reescrito.

 3
Author: VoodooChild,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-05-22 01:47:49

¿Qué tal poner todo el HTML en una línea? ¿Cómo los navegadores hacer frente a eso? He leído en alguna parte que algún navegador (no puedo recordar cuál) rompe con largas líneas.

Eliminar nuevas líneas del archivo es una técnica de optimización. No es necesario dar a los clientes la misma versión fácil de leer que se utiliza cuando se desarrolla. Puedes darles una versión despojada. ¿Por qué? El ancho de banda no es gratuito.

 0
Author: hassan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-25 02:14:40

Muchos "servicios" (por ejemplo, algunas implementaciones de ventanas terminal, GitHub, etc.) no envolverán líneas largas y no tendrán barras de desplazamiento.
Así que cualquier cosa más allá de los 72 u 80 caracteres simplemente puede cortarse.

Además, solo ayuda a la legibilidad incluso si hay barras de desplazamiento, el código puede ser más fácil de leer/digerir/depurar si puede caber en (o principalmente en) un solo ancho de pantalla.

Así que, aunque el código se ejecutará, puede que no siempre se pueda mostrar en su totalidad.

 0
Author: SherylHohman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-19 00:10:55