Comentarios
Es muy importante que tu código tenga comentarios por todos lados (obviamente sin excederse), te recomiendo que lo hagas al principio de cada documento de estilos, esto para explicar de que se trata el código que verán a continuación
/* Estilos generales para todo el sitio web ... */
body {
background-color: red;
color: black;
}
p {
font-size: 17px;
letter-spacing: 1px;
}
Algo importante es que los comentarios no pasen de los 80 caracteres.
Te recomiendo poner comentarios por cada componente creado, explicando que es lo que hace.
/* Componente A */
/* Este componente sirve para ... */
.bloque {
background-color: red;
color: black;
}
.bloque .elemento {
font-size: 17px;
letter-spacing: 1px;
}
Nuestro componente vendría siendo
.bloquey.elemento
También podrías crear comentarios por cada elemento o clase que tienes en tu estilos, pero que sean para cosas muy puntuales o específicas, "No lo hagas en cosas que sean muy obvias".
/* Componente A */
/* Este componente sirve para ... */
/* Bloque ... */
.bloque {
background-color: red;
color: black;
}
/* Elemento ... */
.bloque .elemento {
font-size: 17px;
letter-spacing: 1px;
}
Es importante recalcar que los comentarios para los elementos y clases sean de una sola línea.
De manera adicional podrías crearte una especie de estructura para tus comentarios, los títulos, las descripciones, etc. Algo como lo siguiente:
/*------------------------------------*/
/* TÍTULO */
/*------------------------------------*/
/*
* Descripción general de los estilos a continuación,
* visita https://filisantillan.com para más información.
*/
/* ------- Componente A ------- */
/* Este componente sirve para ... */
/* Bloque ... */
.bloque {
background-color: red;
color: black;
}
/* Elemento ... */
.bloque .elemento {
font-size: 17px;
letter-spacing: 1px;
}
Por cierto se que dije que todo el código debe de ir en inglés y los ejemplos que estoy mostrando están en español, esto va a ser una excepción ya que esta guía esta dirigida a personas de habla hispana.