Buenas prácticas CSS

12. 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; }

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.