No importa cuántas personas trabajen en el mismo proyecto, asegúrese de que cada línea de código parezca escrita por la misma persona.
1. Utilice dos espacios en lugar de tabulaciones: esta es la única forma de garantizar una visualización coherente en todos los entornos.
2. Los elementos anidados deben tener una sangría (es decir, dos espacios).
3. Para la definición de atributos, asegúrese de utilizar comillas dobles y nunca comillas simples.
4. No agregue una barra diagonal a un elemento de cierre automático; la especificación HTML5 establece claramente que esto es opcional.
5. No omitas la etiqueta de cierre opcional
<!DOCTYPE html> <html> <cabeza> <título>Título de la página</título> </cabeza> <cuerpo> <img src="images/company-logo.png" alt="Empresa"> <h1 class="hello-world">¡Hola mundo!</h1> </cuerpo> </html>
Agregue una declaración de modo estándar a la primera línea de cada página HTML para garantizar una presentación coherente en todos los navegadores.
<!DOCTYPE html> <html> <cabeza> </cabeza> </html>
Según la especificación HTML5:
Se recomienda encarecidamente especificar el atributo lang para el elemento raíz html para establecer el idioma correcto para el documento. Esto ayudará a las herramientas de síntesis de voz a determinar la pronunciación que deben utilizar, ayudará a las herramientas de traducción a determinar las reglas que deben seguir al traducir, etc.
<html lang="es-es"> <!-- ... --> </html>
IE admite etiquetas específicas para determinar la versión de IE que se debe utilizar para dibujar la página actual. A menos que existan necesidades especiales importantes, es mejor configurarlo en modo perimetral para notificar a IE que adopte el último modo que admite.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Al declarar explícitamente la codificación de caracteres, puede asegurarse de que el navegador determine rápida y fácilmente cómo se debe representar el contenido de la página. La ventaja de esto es que puede evitar el uso de etiquetas de entidad de caracteres en HTML, de modo que todo sea coherente con la codificación del documento (normalmente codificación UTF-8).
<cabeza> <meta juego de caracteres="UTF-8"> </cabeza>
De acuerdo con la especificación HTML5, generalmente no es necesario especificar el atributo de tipo al introducir archivos CSS y JavaScript, porque text/css y text/javascript son sus valores predeterminados respectivamente.
<!-- CSS externo --> <enlace rel="hoja de estilo" href="code-guide.css"> <!-- CSS en el documento --> <estilo> /* ... */ </estilo> <!-- JavaScript --> <script src="code-guide.js"></script>
Intente seguir los estándares y la semántica HTML, pero no sacrifique la practicidad. Intente utilizar la menor cantidad de etiquetas y mantenga la complejidad al mínimo en todo momento.
Los atributos HTML deben organizarse en el orden que se indica a continuación para garantizar la legibilidad del código.
clase
DNI, nombre
datos-*
src, para, tipo, href, valor
título, alternativo
rol, aria-*
La clase se utiliza para identificar componentes altamente reutilizables, por lo que debe aparecer en primer lugar. La identificación se usa para identificar un componente específico y debe usarse con precaución (por ejemplo, marcadores dentro de una página), por lo que ocupa el segundo lugar.
Las propiedades booleanas se pueden declarar sin valor. La especificación XHTML requiere que se le asigne un valor, pero la especificación HTML5 no.
Para obtener más información, consulte la sección WhatWG sobre atributos booleanos:
Si un atributo booleano de un elemento tiene un valor, es verdadero; si no tiene valor, es falso.
Si debe asignarle un valor, consulte la especificación WhatWG:
Si el atributo existe, su valor debe ser la cadena vacía o […] el nombre canónico del atributo, sin espacios en blanco al principio ni al final.
En pocas palabras, no es necesario asignar un valor.
Al escribir código HTML, intente evitar elementos principales redundantes. Muchas veces, esto requiere iteración y refactorización para lograrlo. Por favor vea el siguiente caso:
<!-- No tan bueno --> <span class="avatar"> <imgsrc="..."> </span> <!-- Mejor --> <img class="avatar" src="...">
Las etiquetas generadas a través de JavaScript dificultan la búsqueda y edición del contenido y ralentizan el rendimiento. Evítalo cuando puedas.
1. Utilice dos espacios en lugar de tabulaciones: esta es la única forma de garantizar una visualización coherente en todos los entornos.
2. Al agrupar selectores, coloque los selectores individuales en su propia línea.
3. Para facilitar la lectura del código, agregue un espacio antes de la llave de apertura de cada bloque de declaración.
4. La llave de cierre del bloque de declaración debe estar en una línea separada.
5. Se debe insertar un espacio después de: en cada declaración.
6. Para obtener informes de errores más precisos, cada declaración debe estar en su propia línea.
7. Todas las declaraciones deben terminar con un punto y coma. El punto y coma después de la última declaración es opcional, pero si lo omite, su código puede ser más propenso a errores.
8. Para valores de atributos separados por comas, se debe insertar un espacio después de cada coma (por ejemplo, box-shadow).
9. No inserte espacios después de comas dentro de los valores rgb(), rgba(), hsl(), hsla() o rect(). Esto ayuda a distinguir múltiples valores de color (solo comas, sin espacios) de múltiples valores de atributos (comas y espacios).
10. Para valores de atributos o parámetros de color, omita el 0 inicial para decimales menores que 1 (por ejemplo, .5 en lugar de 0.5; -.5px en lugar de -0.5px).
11/Los valores hexadecimales deben estar todos en minúsculas, por ejemplo, #fff. Los caracteres en minúscula son más fáciles de leer al escanear un documento porque su forma es más fácil de distinguir.
12. Intente utilizar valores hexadecimales abreviados, por ejemplo, utilice #fff en lugar de #ffffff.
13. Agregue comillas dobles para los atributos en el selector, por ejemplo, entrada[tipo="texto"]. Solo es opcional en algunos casos, pero para mantener la coherencia del código se recomienda utilizar comillas dobles.
14. Evite especificar unidades para valores 0, por ejemplo, use margen: 0 en lugar de margen: 0px;.
/* CSS incorrecto */
.selector, .selector-secundario, .selector[tipo=texto] {
relleno: 15px;
margen:0px 0px 15px;
color de fondo:rgba(0, 0, 0, 0,5);
sombra de cuadro: 0px 1px 2px #CCC, recuadro 0 1px 0 #FFFFFF
}
/* Buen CSS */
.selector,
.selector-secundario,
.selector[tipo="texto"] {
relleno: 15px;
margen inferior: 15px;
color de fondo: rgba(0,0,0,.5);
sombra de cuadro: 0 1px 2px #ccc, recuadro 0 1px 0 #fff;
}Las declaraciones de propiedad relacionadas deben agruparse y ordenarse en el siguiente orden:
Posicionamiento
Modelo de caja
Tipográfico
Visual
El posicionamiento es lo primero porque elimina elementos del flujo normal de documentos y puede anular los estilos relacionados con el modelo de cuadro. El modelo de caja ocupa el segundo lugar porque determina el tamaño y la ubicación de los componentes.
Otras propiedades sólo afectan el interior del componente o no afectan a los dos primeros grupos de propiedades, por lo que se clasifican detrás.
.orden-declaración {
/* Posicionamiento */
posición: absoluta;
arriba: 0;
derecha: 0;
abajo: 0;
izquierda: 0;
índice z: 100;
/* Modelo-caja */
mostrar: bloquear;
flotar: derecha;
ancho: 100px;
altura: 100 píxeles;
/* Tipografía */
fuente: normal 13px "Helvetica Neue", sans-serif;
altura de línea: 1,5;
color: #333;
alineación de texto: centro;
/* Visual */
color de fondo: #f5f5f5;
borde: 1px sólido #e5e5e5;
radio del borde: 3px;
/* Varios */
opacidad: 1;
}En comparación con las etiquetas, la directiva @import es mucho más lenta, lo que no solo aumenta la cantidad de solicitudes adicionales, sino que también causa problemas impredecibles. Las alternativas incluyen las siguientes:
Compile varios archivos CSS en un solo archivo a través de un preprocesador CSS similar a Sass o Less. Las funciones de fusión de archivos CSS se proporcionan a través de Rails, Jekyll u otros sistemas.
<!-- Usar elementos de enlace -->
<enlace rel="hoja de estilo" href="core.css">
<!-- Evite @imports -->
<estilo>
@importar URL ("más.css");
</estilo>Coloque las consultas de medios lo más cerca posible de las reglas relevantes. No los empaquete en un solo archivo de estilo ni los coloque al final del documento. Si los separas, todos los olvidarán en el futuro. A continuación se ofrece un ejemplo típico.
.elemento { ... }
.elemento-avatar {...}
.elemento seleccionado {...}
@media (ancho mínimo: 480 px) {
.elemento { ...}
.elemento-avatar {...}
.elemento seleccionado {...}
}Para los estilos que contienen solo una declaración, se recomienda colocar la declaración en la misma línea para mayor legibilidad y edición rápida. Para estilos con múltiples declaraciones, las declaraciones aún deben dividirse en varias líneas.
El factor clave para hacer esto es la detección de errores; por ejemplo, el validador de CSS indica que hay un error de sintaxis en la línea 183. Si se trata de una sola declaración en una sola línea, no ignorará el error; si se trata de varias declaraciones en una sola línea, debe analizarlas cuidadosamente para evitar perderse el error.
/* Declaraciones individuales en una línea */
.span1 { ancho: 60px }
.span2 { ancho: 140px }
.span3 { ancho: 220px }
/* Múltiples declaraciones, una por línea */
.sprite {
pantalla: bloque en línea;
ancho: 16px;
altura: 15 píxeles;
imagen de fondo: url(../img/sprite.png);
}
.icon { posición-fondo: 0 0 }
.icon-home { posición-fondo: 0 -20px }
.icon-cuenta { posición-fondo: 0 -40px }En los casos en los que necesite establecer todos los valores explícitamente, debe intentar limitar el uso de declaraciones de propiedades abreviadas. Los abusos comunes de las declaraciones de propiedad abreviadas incluyen los siguientes:
relleno
margen
fuente
fondo
borde
radio-frontera
En la mayoría de los casos, no necesitamos especificar todos los valores para una declaración de propiedad abreviada. Por ejemplo, el elemento de encabezado HTML solo necesita establecer los valores de los márgenes superior e inferior, por lo que solo necesita anular estos dos valores cuando sea necesario. El uso excesivo de declaraciones de propiedades abreviadas puede generar código desordenado y provocar efectos secundarios no deseados al provocar anulaciones innecesarias de los valores de las propiedades.
/* Mal ejemplo */
.elemento {
margen: 0 0 10px;
fondo: rojo;
fondo: url("imagen.jpg");
radio de borde: 3px 3px 0 0;
}
/* Buen ejemplo */
.elemento {
margen inferior: 10px;
color de fondo: rojo;
imagen de fondo: url("imagen.jpg");
radio del borde superior izquierdo: 3px;
borde-arriba-derecha-radio: 3px;
}Evite anidamientos innecesarios. Esto se debe a que, aunque puede utilizar el anidamiento, no significa que deba hacerlo. Utilice el anidamiento solo cuando los estilos deban restringirse al elemento principal (es decir, selectores descendientes) y haya varios elementos que deban anidarse.
// Sin anidar
.table > thead > tr > th { …
.table > thead > tr > td { …
// Con anidamiento
.table > cabeza > tr {
> th {…
>td {…
}Para mejorar la legibilidad, agregue un espacio entre los valores, variables y operadores de expresiones matemáticas entre paréntesis.
// Mal ejemplo
.elemento {
margen: 10px 0 @variable*2 10px;
}
// Buen ejemplo
.elemento {
margen: 10px 0 (@variable * 2) 10px;
}El código es escrito y mantenido por personas. Asegúrese de que su código sea autodescriptivo, esté bien comentado y sea fácil de entender para otros. Los buenos comentarios de código transmiten el contexto y el propósito del código. No se limite a reformular los nombres de componentes o clases.
Para comentarios más largos, asegúrese de escribir oraciones completas; para comentarios generales, puede escribir frases concisas.
/* Mal ejemplo */
/* encabezado modal */
.encabezado modal {
...
}
/* Buen ejemplo */
/* Elemento de ajuste para .modal-title y .modal-close */
.encabezado modal {
...
} 1. Solo pueden aparecer caracteres en minúscula y guiones (no guiones bajos ni mayúsculas y minúsculas) en los nombres de las clases. Se deben utilizar guiones para nombrar clases relacionadas (similares a los espacios de nombres) (por ejemplo, .btn y .btn-danger).
2. Evite abreviaturas demasiado arbitrarias. .btn representa un botón, pero .s no puede expresar ningún significado.
3. Los nombres de las clases deben ser lo más cortos posible y tener un significado claro.
4. Utilice nombres significativos. Utilice nombres que sean organizados o que tengan un propósito, en lugar de presentaciones.
5. Basado en la clase principal o clase base más cercana como prefijo de la nueva clase.
6. Utilice clases .js-* para identificar comportamientos (a diferencia de estilos) y no incluya estas clases en archivos CSS.
/* Mal ejemplo */
.t {...}
.rojo { ... }
.encabezado {...}
/* Buen ejemplo */
.tuitear {...}
.importante { ... }
.tweet-encabezado {...} Utilice clases para elementos comunes, lo que ayudará a optimizar el rendimiento de renderizado.
Para componentes que aparecen con frecuencia, evite el uso de selectores de atributos (por ejemplo, [class^=”…”]). El rendimiento del navegador puede verse afectado por estos factores.
El selector debe ser lo más corto posible, y tratar de limitar el número de elementos que componen el selector. Se recomienda no exceder los 3.
Restrinja las clases al elemento principal más cercano (es decir, selector descendiente) solo cuando sea necesario (por ejemplo, cuando no se utilizan clases con prefijos; los prefijos son como espacios de nombres).
/* Mal ejemplo */
durar { ... }
.page-container #stream .stream-item .tweet .tweet-header .nombre de usuario {...}
.avatar {...}
/* Buen ejemplo */
.avatar {...}
.tweet-header .nombre de usuario {...}
.tweet .avatar {...}Configure su editor de la siguiente manera para evitar inconsistencias y diferencias comunes en el código:
Utilice dos espacios para reemplazar los caracteres de tabulación (tabulación suave significa usar espacios para representar caracteres de tabulación). Al guardar el archivo, elimine los espacios en blanco finales. Establezca la codificación del archivo en UTF-8. Agrega una línea en blanco al final del archivo.
Consulte la documentación y agregue esta información de configuración al archivo .editorconfig de su proyecto. Por ejemplo: instancia .editorconfig en Bootstrap. Para obtener más información, consulte acerca de EditorConfig.