Buenas Prácticas CSS
Seguir ciertas pautas al crear estilos CSS ayuda a que el código sea más claro y legible, tanto para nosotros como para otros desarrolladores que trabajen en el proyecto.
Detalles de las Buenas Prácticas
Organizar la estructura de arriba hacia abajo
- Organiza los estilos de manera jerárquica para facilitar la búsqueda y comprensión del código.
- Ejemplo de organización:
/****** generic classes*******/
/* estilos aquí */
/****** header *******/
/* estilos aquí */
/****** nav menu *******/
/* estilos aquí */
/****** main content *******/
/* estilos aquí */
/****** footer *******/
- Nombrar correctamente los selectores
- No comiences los nombres de los selectores con mayúsculas, números o caracteres especiales para asegurar la compatibilidad entre navegadores.
- Evitar:
#1div,.div,DivContent Usar:#div1,.div,divContent
- Separar las palabras mediante guiones o mayúsculas
- Elige una forma consistente de nombrar los selectores y evita usar guiones bajos u otros caracteres especiales.
- Ejemplos:
/* Opción 1: Mayúsculas para separar palabras */
navMenu { padding: 2em; border: 2px solid green; }
/* Opción 2: Guiones para separar palabras */
nav-menu { padding: 2em; border: 2px solid green; }
Mantener la legibilidad
- Utiliza una estructura de código consistente para mejorar la mantenibilidad.
- Ejemplos:
/* Estilos en una línea */
.nav-menu { padding: 2em; border: 2px solid green; }
/* Cada estilo en una línea */
.nav-menu {
padding: 2em;
border: 2px solid green;
}
Combinar elementos
- Usa selectores combinados cuando varios elementos comparten las mismas propiedades para evitar la repetición de código.
- Ejemplo:
h1, h2, h3 { font-family: Arial; font-weight: 700; }
Utilizar selectores descendientes
- Prefiere los selectores descendientes antes que los selectores clase o identificador para mantener el código limpio y comprensible.
div p { color: red; }
Utilizar propiedades abreviadas
- Usa propiedades abreviadas para reducir el código.
- Ejemplo:
/* Propiedades margin-left, margin-right y margin-top */
.nav-menu { margin-left: 5px; margin-right: 5px; margin-top: 5px; }
/* Propiedad abreviada margin */
.nav-menu { margin: 5px 5px 0px 5px; }
Usar nombres descriptivos en los selectores
- Utiliza nombres de selectores que indiquen claramente a qué elemento aplican los estilos.
- Ejemplo:
.nav-button { background: blue; } /* Estilo del botón de la navbar */
Evitar nombres de selectores basados en características visuales
- No uses nombres que describan características visuales, ya que complican el mantenimiento del código si esas características cambian.
- Ejemplo:
/* Evitar: */
.menu-red { background: red; }
/* Mejor: */
.nav-menu { background: red; }
