Herramientas y buenas prácticas para el desarrollo de CSS
CSS es un lenguaje fundamental para el desarrollo y diseño de sitios web, que recibe actualizaciones periódicas y con una extensa comunidad que constantemente evoluciona adoptando más y mejores herramientas. En este post vamos a enumerar y explicar algunas de las herramientas y buenas prácticas más importantes de CSS en la actualidad.
Retos de CSS
CSS es un lenguaje sencillo de aprender y aplicar. Sin embargo, si no aplicamos una mínima estructura en nuestros documentos y buenas prácticas, es fácil que un proyecto se convierta en un caos, sobre todo cuando se trata de sitios grandes y complejos. Por tanto, el principal objetivo de cualquier buena práctica es mejorar la mantenibilidad del código CSS. Para ello debemos ser especialmente cuidadosos con factores como:
- Modularidad
- Organización
- Reutilización
- Sin perder de vista la optimización.
Buenas prácticas CSS esenciales
Para concretar un poco más, vamos a establecer una lista de buenas prácticas esenciales en CSS, que todo desarrollador debería tener en cuenta.
Evitar el CSS inline
El CSS inline es el que se escribe dentro de las etiquetas HTML.
<a href='#' style='text-decoration: none'>Enlace</a>
Cuando usamos CSS inline estamos echando por tierra el primer objetivo del lenguaje, la separación del contenido y la presentación. Además estamos perdiendo la capacidad de reutilizar el código. Por supuesto, es preferible usar una clase y definirla en el código CSS del proyecto.
<a href='#' class='no-underline'>Enlace</a>
Usar clases en lugar de id
Los identificadores solamente se pueden usar una vez por documento HTML, por lo que cualquier estilo aplicado a un elemento a partir de su identificador, pierde toda la posibilidad de reutilizarse.
Usar unidades relativas
Las unidades relativas permiten la definición de tamaños atendiendo a la herencia de las etiquetas, en el árbol del HTML.
- Mejoran la accesibilidad
- Permiten ajustarse mejor a las diferentes pantallas de ordenadores y dispositivos
- Mejoran las posibilidades del zoom
Usar propiedades abreviadas
Siempre que podamos, es preferible usar las propiedades que nos permiten disminuir el código y por tanto mejorar la optimización del CSS.
El siguiente código usando propiedades abreviadas:
.alert {
padding: 1rem;
border: 2px solid red;
}
Equivale al siguiente código usando las propiedades específicas, sin sus shortcuts.
.alert {
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
border-width: 2px;
border-style: solid; border-color: red; }
Evitar código redundante
Cuando definimos estilos es muy habitual que dos o más elementos compartan determinadas reglas de CSS. Es importante crear clases que sean capaces de aplicarse en conjunto para llegar a especializaciones de estilos de un mismo componente.
Esto se ve muy bien con un ejemplo. Pongamos que tenemos botones con diversas especializaciones, como «button-primary» y «button-danger». Podríamos tener el CSS de este modo:
.button-primary {
background-color: #009;
padding: 0.5rem 1rem;
border-radius: 1rem;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.button-danger {
background-color: #900;
padding: 0.5rem 1rem;
border-radius: 1rem;
font-weight: bold;
color: #fff;
text-decoration: none;
}
Habrás podido observar que se trata del mismo componente botón, pero con dos colores de fondo distinto. En este caso sería mucho mejor usar el CSS de este modo:
.button {
padding: 0.5rem 1rem;
border-radius: 1rem;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.button-danger {
background-color: #900;
}
.button-primary {
background-color: #009;
}
Entender el funcionamiento de CSS
A veces pensamos que por ser CSS un lenguaje asequible, nos podemos olvidar de estudiar los detalles relevantes, que nos puedan ayudar a usarlo con más rigor. Incluso, muchos decidimos pasar de puntillas e ir directamente a un framework. Infórmate sobre temas relevantes como:
- Conocer la regla !important y por qué es preferible no usarla
- Entender la regla de la cascada
- Entender cómo la especificidad del CSS puede vencer la regla de la cascada
Cada componente en su archivo
Es importante que cuando escribes CSS mantengas los estilos de tus elementos o componentes separados en diversos archivos. Así conseguirás una arquitectura de tu CSS y serás capaz de localizar fácilmente cada uno de los estilos que necesites mantener. Sin embargo, si manejas decenas de archivos CSS en un proyecto, te tienes que asegurar de usar alguna herramienta que los permita fundir en un único archivo y, de paso, minimizar el código si es posible.
Herramientas principales de CSS
Si hubiésemos abordado el tema de las herramientas de CSS hace de 3 a 5 años habríamos empezado por mencionar los preprocesadores de CSS. En 2021 es posible que los use todavía una mayoría de desarrolladores, pero quizás ha llegado ya el momento de plantearse si realmente son necesarios.
Preprocesadores
Son herramientas que nos permiten escribir CSS con mayor velocidad, resumidamente y de manera estructurada. El más conocido es Sass. Son una excelente herramienta para optimizar tu tiempo de desarrollo con las CSS y, si no usas ninguna otra utilidad semejante los beneficios que obtendrás son muy importantes y deseables.
¿Por qué no son tan necesarios hoy en día? porque muchas de las posibilidades más relevantes que nos aportan los preprocesadores, como el uso de variables, ya las ofrece el propio lenguaje CSS. Además porque existe un set de herramientas más recomendable en este momento, PostCSS.
PostCSS
Es un set de herramientas basadas en Javascript (sobre la plataforma Node) que nos permiten hacer transformaciones en el código CSS. Con PostCSS tienes todas las mejores utilidades para trabajar con CSS, como CSSNext, Import-css, optimizadores que limpian tu código de CSS no usado y minimificadores. Si no conoces PostCSS es importante que lo tengas en cuenta para tus próximos proyectos.
Frameworks CSS
Hoy el framework CSS más conocido y usado sigue siendo Bootstrap, sin embargo, una creciente comunidad está apostando por otro estilo de frameworks, basados en clases de utilidad y «atomic CSS». El que más está sonando con diferencia, dentro de la nueva hornada de frameworks CSS, es Tailwind CSS, basado en PostCSS y clases de utilidad. Sin embargo Tailwind levanta tantas pasiones como profundos rechazos. Los motivos son diversos y tanto partidarios como detractores tienen argumentos con fundamento. Lo mejor que puedes hacer es echarle un vistazo y probarlo para formar tu propia opinión.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.