Buenas practicas en CSS
Tags: css, webdev, productivity, html
Published: 2021-08-11 07:26:13

Esta es una recopilación que considero como buenas prácticas en la codificación de estilos en CSS. 

A lo largo de mi camino como desarrollador frontend he tratado de llevar un uso de prácticas que me ayuden a optimizar y mejorar cada proyecto que hago.

Estas son las actuales prácticas que uso en mis proyectos:

1. [Reinicio de estilos](#reinicio-de-estilos)
2. [Incluir información descriptiva](#incluir-informacion-descriptiva)
3. [Definir variables](#definir-variables)
4. [Organizar elementos](#organizar-elementos)
5. [Agrupar selectores](#agrupar-selectores)
6. [Usar anotaciones en componentes](#usar-anotaciones-en-componentes)
7. [Combinar elementos](#combinar-elementos)
9. [Usar valores relativos](#usar-valores-relativos)
10. [Usar shorthands](#usar-shorthands)
11. [Conocer el display inicial de los elementos](#conocer-el-display-inicial-de-los-elementos)
12. [Crear primero la estructura HTML](#crear-primero-la-estructura-html)
13. [Modularizar los estilos](#modularizar-los-estilos)
14. [Usar metodologías CSS](#usar-metodologias-css)
15. [Usar prefijos de los navegadores](#usar-prefijos-de-los-navegadores)
17. [Validar el codigo](#validar-el-codigo)
16. [Minificar el codigo](#minificar-el-codigo)
18. [Utilizar preprocesadores](#utilizar-preprocesadores)
19. [Utilizar post procesadores](#utilizar-post-procesadores)

## Reinicio de estilos

La mayor meta de un archivo de reinicio de estilos es reducir las incompatibilidades de los diferentes navegadores. Provee estilos generales que hacen más fácil editar y personalizar elementos.

El reinicio es esencial para eliminar las inconsistencias comunes de los navegadores tales como heights, headings, margins, font sizes, etc.

El mayor reto en el desarrollo web frontend es la compatibilidad de los estilos entre los diferentes navegadores. Aquí es donde toma partido un reinicio de estilos.

Un ejemplo de este tipo de hojas de reinicio es [Normalize.css de Nicolas Gallagher](https://github.com/necolas/normalize.css), es una forma moderna de reiniciar CSS. Este preserva los valores iniciales útiles, a diferencia de otras hojas de reinicio de estilos. Además de eliminar las inconsistencias comunes de los navegadores también corrige algunos errores.


## Incluir informacion descriptiva

Es útil incluir información que nos permita conocer más sobre el proyecto, datos tales como el autor, títulos, descripción, URLs informativas y otros de talles dentro de la hoja de estilos. Si el usuario o el desarrollador requiere una referencia o más detalles en el futuro, le será sencillo encontrar el contacto de la persona así como otros detalles que buscan.

```css
/*
Project: Portfolio
Description: Portafolio web personal
Project URI: https://github.com/marskdev/portfolio
Author: Marcial Ambriz
Author URI: https://marskdev.netlify.app
*/
```

## Definir variables

CSS ahora cuenta con [propiedades personalizadas](https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties) (variables) que podemos utilizar para guardar valores específicos como typefaces, tamaños, colores, incluso hasta configuraciones de propiedades.

En sitios y proyectos donde hay una gran cantidad de estilos, en general con muchos valores repetidos. Como ejemplo, un color puede ser usado por distintos elementos que sin el uso de la variables sería una tarea tediosa cambiarlo en el futuro, por otro lado las variables nos permitirá reemplazar el valor del color en todos los elementos que hagan referencia a la variable.

Otro beneficio son los identificadores semánticos haciendo que sea más fácil de entender y nos permite identificar con mayor precisión cada valor que usemos en los estilos.

```css
:root {
    /* theme */
    --dark-base: #282A3E;
    --base: #2B2D42;
    --slate: #A8A8C7;
    --light-slate: #C7C7DB;
    /* Branding */
    --primary: #F6BE5F;
    --gradient: linear-gradient(109.8deg, #F6BE5F -6.35%, #FA9875 105.29%);
    /* Typeface */
    --font-headline: 'Lato', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

h1,h2 {
    font-family: var(--font-headline);
}
```

## Organizar elementos

Organizar elementos en la hoja de estilos de arriba hacia abajo no es tan fácil como podría serlo. Sin una estructura que organice los elementos podría ser difícil localizar un elemento dentro de un desorden. 

Además crea una legibilidad increíble que hace mucho más sencillo mantener en el futuro, permitirá encontrar elementos más rápidos. Además no sabes quien en el futuro podría necesitar mirar el código.

Una buena estructura puede iniciar incluyendo los estilos generales, seguidos por un comentario que divide un componente de otro e indicando el nombre dentro del comentario.

```css
/****** General Styles *********/
body {…}
h1, h2, h3 {…}
p {…}
a {…}
/****** Header Style *********/
#header {…}
/****** Navigation Style *********/
#nav {…}
/****** Footer Style *********/
#footer {…}
```

## Agrupar selectores

Si tienes diferentes selectores para un mismo componente, sería ideal agruparlos todos juntos para que parezca más organizado. Esto te ayudará a localizar errores fácilmente.

```css
/* Cylinder */

.cylinder { width: 960px; margin: 0; padding: 0; }

.cylinder #new { font-family: Arial, sans-serif; font-size: 40px; color: black; }

.cylinder #tagline { font-family: Verdana; font-size: 20px; }
```

## Usar anotaciones en componentes

Es recomendable colocar detalles sobre el código CSS que se está utilizando que revelen el propósito o describan el comportamiento de las propiedades en donde sea difícil a la vista entenderlo. Será de mucha ayuda en componentes muy complejos.

La mejor manera de hacerlo es colocar un comentario para cada grupo o componente. 

## Combinar elementos

Algunos elementos algunas veces comparten propiedades, en lugar de asignar propiedades a cada uno de forma independiente puedes optar por asignar las mismas propiedades a diferentes elementos, de esta forma evitarás la repetición de código.

```css
h1, h2, h3, .headline, .title { font-family: tahoma, color: #333 }
```

## Usar valores relativos

El uso de valores relativos como **em** (font-size element) o **rem** (root font-size element) en lugar de valores absolutos como **px** (píxeles) permite que los tamaños sean más flexibles en diferentes tamaños de pantalla.

Las unidades **em** toman el valor de font-size del elemento donde se declara y **rem** toma el valor del elemento raíz.

Para cambiar los valores de los elementos para diferentes tamaños de pantalla solo necesitarás redefinir el valor de font-size del elemento raíz a través de una media query cuando el tamaño de la pantalla cambie y en consecuencia se ajustaran los demas tamaños.

```css
/* Default body font-size 16px

  Screen size | body | headline
     400px    | 19px |   42px
     800px    | 21px |   46px
*/

.headline { 
    font-size: 2.2em; /*35px*/
}
@media (min-width: 400px) {
    body { font-size: 118.8%; }
}
@media (min-width: 800px) {
    body { font-size: 131.3%%; }
}
```

## Usar shorthands

Puedes reducir la cantidad de código considerablemente usando shorthands. Para elementos como padding, margin, font, etc, puedes combinar estilos en una sola línea. 

```css
.noShorthand {
    margin-top: 8px;
    margin-right: 7px;
    margin-left: 5px;
    
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.withShorthand {
    margin: 8px 7px 0 5px;
    
    font: 600 18px Arial, sans-serif;
}
```

## Conocer el display inicial de los elementos
Cada elemento HTML tiene un display inicial, dependiendo el tipo de  elemento, el valor inicial será diferente por ello es importante entender el valor inicial de cada uno.

Tener en cuenta este dato nos permitirá saber cuándo cambiar el display dependiendo el contexto. Algunas propiedades requieren de un display específico como block para ser aplicadas.

Estos son los elementos más comunes:


```css
/*Default display: inline*/
span, a, strong, em, img, br, input, abbr, acronym

/*Default display: block*/
div, h1...h6, p, ul, li, table, blockquote, pre, form
```
Encuentra la lista completa de los elementos [aquí.](https://www.w3schools.com/htmL/html_blocks.asp)

## Crear primero la estructura HTML
Algunos desarrolladores crean los estilos al mismo tiempo que van creando la estructura HTML. 

Es lógico crear ambos al mismo tiempo, pero actualmente podrías ahorrar tiempo si primero creas la estructura. La razón de esto es que ya tienes en mente la estructura de todos los elementos del sitio. 

Crear primero la estructura te permite visualizar el sitio entero. 


## Modularizar los estilos

Dependiendo de la complejidad del diseño y el tamaño del sitio es recomendable separar los estilos en módulos en diferentes archivos que después se incorporan en uno solo importando los módulos, será más sencillo de mantener y editar que una única hoja gigante. 

Permitirá gestionar los estilos que solo necesita una pagina especifica y evitará cargar estilos innecesarios para las diferentes vistas.

```css
/* This file: main.css */

@import url("components.css");
@import url("layout.css");
@import url("header.css");
@import url("footer.css");
```

## Usar metodologias CSS

Las [metodologías CSS](https://dev.to/marskdev/metodologias-css-2pg2) son una serie de indicaciones para escribir, modularizar, escalar y reutilizar código que permiten resolver problemas de implementación. Usarlo te ayudará a escalar el proyecto y mantenerlo en un futuro. Algunas metodologías son BEM, ITCSS, OOCSS, SMACSS, etc.

Incluso podemos combinar metodologías tomando lo mejor de cada una.


## Usar prefijos de los navegadores

Usar los prefijos creará mejor compatibilidad en el despliegue del sitio entre los diferentes navegadores. Omitir los prefijos es encontrarse con problemas de compatibilidad de las características implementadas en navegadores específicos.

Algunas de las propiedades no son compatibles con ciertos navegadores, las cuales necesitan de prefijos para ser usadas en algunos navegadores. Para ello tenemos que definir múltiples líneas a la vez para una misma propiedad.

Estos son los prefijos de los navegadores más comunes.

```css
iOS: -webkit-

Safari: -webkit-

Firefox: -moz-

Chrome: -webkit-

Opera: -o-

IE-Microsoft-Edge: -ms-
```

## Validar el codigo

Siempre puedes usar [W3C free CSS Validator](https://jigsaw.w3.org/css-validator/validator.html.en) para examinar si tu código ha sido organizado y estructurado apropiadamente. Otro beneficio de usarlo es ayudarte a encontrar errores dentro del código. Esto te ahorrará todo el tiempo que gastarías encontrando el problema de manera manual.

## Minificar el codigo

Si sientes que va lento mientras se cargan los estilos en los navegadores. Entonces es momento de intentar comprimir el tamaño del archivo css. Muchos elementos incluyen saltos de línea y espacios en blanco, que nos permiten hacer de la hoja de estilos legible no son necesarios, estos podrían crear un retraso al momento de cargar el sitio. 

Una forma de sacar el máximo potencial de una hoja de estilos es eliminando esos elementos que a nosotros como desarrolladores nos permite leer con facilidad los estilos, al navegador no le importara si no se encuentran. Una forma de hacerlo es minificar el código, esto hará que la carga de estilos sea más rápida.

## Utilizar preprocesadores

El uso de un procesador puede ser beneficioso de varias maneras. Un procesador es una herramienta que te deja usar características avanzadas que no existen en CSS. Estas pueden ser variables, loops e incluso funciones.

Los preprocesadores ayudan a organizar tu hoja de estilos de mejor manera. Tienen la habilidad de romper los estilos en pequeños archivos reutilizables. Los cuales pueden ser importados dentro de otros o implementarlos de forma separada.

### Anidar selectores

Otra gran ventaja es que mejora la legibilidad anidando los selectores. Es una simple y poderosa característica que CSS no tiene. La jerarquía estructural hace más sencillo de visualizar.
```sass
.wrapper {
    .sidebar {
        &.collapsed {
            ...
        }
        .list {
            &-item {
                ...
                &--active {
                    ...
                }
            }
        }
    }
}
```
### Vendor prefix automáticos

Esta es una característica experimental. Como más arriba explico, algunas propiedades no son compatibles con algunos navegadores.

Para que nuestros estilos tengan soporte para la mayoría de los navegadores, tenemos que definir múltiples líneas a la vez para una misma propiedad.

```sass
.gradient {
    background: rgb(30,87,153);
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
}
```

## Utilizar post procesadores

Una mejor opción es un port-procesador. Este puede crear un paso de optimización adicional una vez que el CSS fue generado por un preprocesador. Unos de los más populares post-preprocesadores son [postCSS](https://postcss.org) o [CSSnano](https://cssnano.co).

Puedes usarlo para colocar prefijos automáticamente a las propiedades, ya no tendrás que preocuparte por dar soporte a todos los navegadores. Ya no habrá excusas de "Eso no lo puedo usar".

## Conclusión

El uso de estas prácticas te ayudarán a optimizar y escribir estilos CSS que te brindarán ventajas y beneficios aumentando la calidad de tus proyectos. Además evitarán malas prácticas que podrían perjudicar tu proyecto.

Entre los beneficios se encuentran: una escritura rápida y lectura legible, mayor soporte entre navegadores, optimización de código, mejor escalabilidad y mantenimiento sencillo en el futuro.

Dime que opinas y si tienes otra buena práctica compartela.

Puedes encontrarme en otros sitios como [Twitter](https://twitter.com/marskdev/), [Instagram](https://www.instagram.com/marskdev/) y [Linkedin](https://www.linkedin.com/in/marskdev/)