Buenas prácticas CSS
Seguir unas pautas a la hora de crear estilos CSS hace que el código sea más claro y legible tanto para nosotros como para otros desarrolladores que deban trabajar en el proyecto.
Aunque no hay definido ningún estándar al respecto, es recomendable seguir las siguientes recomendaciones para conseguir un desarrollo lo más entendible posible.
1. Organizar la estructura de arriba hacia abajo
Con el fin de encontrar rápidamente cualquier parte de código, es recomendable organizar los estilos de arriba hacia abajo.
/****** generic classes*******/ styles goes here… /****** header *******/ styles goes here… /****** nav menu *******/ styles goes here… /****** main content *******/ styles goes here… /****** footer *******/
2. Nombrar correctamente los selectores
Para conseguir más claridad en el código y soporte en todos los navegadores conviene no comenzar el nombre de los selectores con mayúsculas, números ni caracteres especiales.
Evitar: #1div, .=div, DivContent
Mejor utilizar: #div1, .div, divContent
3. Separar las palabras mediante guiones o mediante mayúsculas
Es recomendable escoger una única manera de escribir el nombre de los selectores. Además, es mejor no usar guiones bajos “_” u otros caracteres especiales ya que algunos navegadores no los soportan. Conviene seguir alguna de las siguientes opciones:
/* Opción 1: Palabras separadas por mayúsculas */
navMenu { padding: 2em; border: 2px solid green; }
/* Opción 2: Palabras separadas por guiones */
nav-menu { padding: 2em; border: 2px solid green; }
Revisa el artículo sobre nombres de clases en CSS para aprender las mejores prácticas a la hora de nombrar tus clases
4. Legibilidad
Adopta una única forma de escribir tu código para que sea más fácil de mantener y de encontrar cualquier elemento.
/* Opción 1: Estilos en una línea */
.nav-menu { padding: 2em; border: 2px solid green; }
/* Opción 2: Cada estilo en una línea */
.nav-menu {
padding: 2em;
border: 2px solid green;
}
5. Combinar elementos
Cuando varios elementos disponen de las mismas propiedades es recomendable compartirlas en vez de volver a repetir el código. Para ello podemos utilizar selectores combinados, tal y como hemos visto anteriormente.
h1, h2, h3 { font-family: Arial; font-weight: 700; }
6. Utilizar selectores descendientes
Es conveniente utilizar selectores descendientes siempre que sea posible antes de crear un selector clase o un selector identificador. De esta forma, el código estará más limpio, dispondrá de menos selectores clase e identificador y se comprenderá mucho mejor.
div p { color: red; }
7. Utilizar propiedades abreviadas
Siempre que sea posible es recomendable utilizar clases abreviadas para conseguir una reducción de código.
/* 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;}
8. Utilizar nombres descriptivos en los selectores
Mediante la utilización de nombres que permitan averiguar fácilmente a qué elemento le estamos dando estilo comprenderemos el código fácilmente.
.nav-button { background: blue; } /* Estilo del botón de la navbar*/
9. Evitar utilizar como nombre de un selector una característica visual
Al utilizar en el nombre de un selector una característica visual como el color, el tamaño o la posición, si posteriormente modificamos esa característica, también deberíamos cambiar el nombre del selector. Esto complica mucho el código ya que tendríamos que actualizar todas las referencias a ese selector en el código HTML.
/* Selector con nombre que define la característica visual del color */
.menu-red { background: red; }
/* Utilizar mejor: */
.nav-menu { background: red; }
10. Probar el diseño en los diferentes navegadores
Para descubrir si se producen errores de visualización en los navegadores lo recomendable es instalarlos todos en el equipo. Algunos de los más utilizados son los siguientes:
ChromeFirefoxOperaSafariMicrosoft Edge
También puedes hacer uso de la aplicación browserling que te permite ver tu desarrollo en varias versiones diferentes de cada navegador.
11. Validar el código CSS
Detectar errores en el código es esencial y se puede hacer fácilmente mediante un validador CSS. El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.
12. Agregar los prefijos de los navegadores en propiedades que no sean estables
Para ahorrar tiempo y facilitarnos la tarea de incluir los prefijos de las propiedades CSS que todavía no son estables podemos hacer uso de la extensión «Autoprefixer» en Visual Studio Code.
13. No usar la regla !important
La palabra clave !important se utiliza para dar mayor prioridad al valor de una propiedad de forma que si se define la misma propiedad para un elemento no se pueda sobrescribir. Ejemplo:
.a { background-color: red!important; }
.a { background-color: blue; } /* los elementos con clase "a" tendrán el fondo de color rojo */
El uso de ! important, es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar porque rompre la cascada natural de las hojas de estilo. Por tanto, se recomiendo usar la regla !important solo para casos excepcionales ya que puede causar problemas de mantenibilidad y legibilidad del código CSS.
14. Cuida las rutas en tus archivos CSS
En CSS las rutas se calculan desde el propio archivo .css, no desde el HTML. Por ejemplo, si tu hoja de estilos está dentro de la carpeta css y la imagen está en imagenes, la ruta correcta sería:
background-image: url("../imagenes/fondo.jpg");
Si escribes mal esa ruta, la imagen no se cargará aunque exista.
Evita también usar rutas del disco duro como C:\Users\..., ya que solo funcionan en tu equipo. Trabaja siempre con rutas relativas y una estructura clara de carpetas para que tu proyecto sea portable y mantenible.
Si quieres repasar cómo funcionan exactamente las rutas y evitar errores comunes, puedes leer este artículo:
eniun.com/rutas-archivos-html-css-error-que-no-debes-cometer/