Resuelve tus dolores de cabeza específicos con los módulos CSS

Spanish (Español) translation by CYC (you can also view the original English article)

Los "Módulos CSS" no tienen nada que ver con la W3C, sino que son parte de un proceso de construcción sugerido. Compila tu proyecto, cambiando el nombre de los selectores y las clases para que se vuelvan únicas, con alcance a componentes individuales. Los estilos se bloquean en esos componentes y no se pueden utilizar en otra parte, ¡a menos que lo digas específicamente!

Preámbulo

Hoy en día estamos bastante acostumbrados a la idea de que las tecnologías web sean la fuerza impulsora detrás de las aplicaciones; aplicaciones web, móviles y aplicaciones de escritorio. Pero a diferencia de los simples sitios web estáticos, las aplicaciones suelen ser más dinámicas, complejas y a menudo consisten en componentes incluso más allá de lo que ofrece Bootstrap o ZURB Foundation. A medida que una aplicación crece en complejidad, la gestión de su CSS puede ser una tarea infernal.

Con el tiempo, se han desarrollado múltiples estrategias, como OOCSS, ITCSS, BEM, Atomic CSS, etc. para mantener el CSS organizado, reutilizable y (crucialmente) escalable. Estas estrategias requieren que tú y todos en tu equipo sigan las convenciones diligentemente.

Sin embargo, tarde o temprano, la complejidad se volverá a infiltrar de nuevo y encontrarás reglas de estilo como las siguientes:

html.progressive-image.js [data-progressive-image],html.progressive-image.js [data-progressive-image] * {
    background-image: none !important;
    mask-image: none !important;
    opacity: 0
}
.main #section-enhanced-gallery-heroes.homepage-section.enhanced-gallery .with-single-item {
    transform: translate(0, 0) !important
}

El problema con CSS en muchos sitios web de gran escala y aplicaciones es que es tan difícil mantener la especificidad baja que, en algún momento, la adición de !important no se puede evitar. Y refactorizar CSS en una base de código grande es complicado ya que la eliminación de estilos podría romper otros componentes.

En este tutorial, vamos a ver "Módulos CSS" y cómo puede ayudarnos a minimizar estos notorios problemas CSS.

Nota: Mira el repositorio en Github para ver ejemplos de códigos.

Usando módulos CSS

En pocas palabras, los "Módulos CSS" son una herramienta que cambia el nombre de las clases y los identificadores CSS en selectores únicos, permitiéndote aislar las reglas de estilo localmente a los elementos o componentes asignados. Asumiendo que tenemos un botón, podríamos escribir sus reglas de estilo de la siguiente manera:

.button {
    background-color: #9b4dca;
    border: 0.1rem solid #9b4dca;
    border-radius: .4rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
}
.button:focus,
.button:hover {
    background-color: #606c76;
    border-color: #606c76;
    color: #fff;
    outline: 0;
}

Con los Módulos CSS, estas reglas de estilo se renombrarán en algo como:

._12We30_button {
    background-color: #9b4dca;
    border: 0.1rem solid #9b4dca;
    border-radius: .4rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
}
._12We30_button:focus,
._12We30_button:hover {
    background-color: #606c76;
    border-color: #606c76;
    color: #fff;
    outline: 0;
}

Si echas un vistazo a sitios grandes como Facebook, Instagram o Airbnb a través de DevTools de tu navegador, verás que las clases CSS y los ID se nombran con este tipo de patrón. He aquí un ejemplo de la página de inicio de Airbnb:

Airbnb look through the DevTools — ¿Quién nombró a la clase con números aparentemente aleatorios?

Componentes múltiples

El uso de módulos CSS no tendrá mucho sentido si sólo tenemos un componente, así que vamos a ampliar nuestro ejemplo a tres componentes y veremos cómo configurar nuestro proyecto para implementar Módulos CSS.

Creando un componente

En este segundo ejemplo, vamos a construir tres componentes; un botón con tres estilos diferentes. Los llamaremos el "botón principal", el "botón de contorno" (también conocido como "botón fantasma") y el "botón de borrar". Pondremos estos botones en un directorio aparte. Cada directorio contendrá index.css e index.js.

En el index.js, creamos el elemento y asignamos las clases al elemento, de la siguiente manera:

// 1. Import the styles from index.css file.
import styles from './index.css';

/**
 * 2. Creating a button element and add the class from index.css.
 * @type {String}
 */
const button = `<button class="${styles['button']}">Save Changes</button>`;

// 3. Export the button to be used in the other files.
export default button;

Utilizando la nueva directiva import (de importación) en ES6, importamos la hoja de estilo y leemos las clases y las ID como un objeto de JavaScript. Ahora, creamos un elemento y agregamos la clase denominada .button utilizando el JavaScript nativo que también se introdujo en ES6. Por último, exportamos nuestro elemento para que el elemento también pueda ser importado y reutilizado dentro de los otros archivos JavaScript.

Al momento de escribir este artículo, no todos los navegadores han implementado las últimas características y sintaxis JavaScript de la especificación ES6. Por lo tanto, necesitaremos que Babel transforme esos snippets en sintaxis JavaScript para que sean compatibles con la mayoría de los navegadores.

Nuestra hoja de estilos, index.css, es CSS simple. Esta contiene varios selectores para diseñar el elemento de botón.

/* 1. Primary Button */
.button {
    background-color: #9b4dca;
    border: 0.1rem solid #9b4dca;
    border-radius: .4rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    height: 3.8rem;
    letter-spacing: .1rem;
    line-height: 3.8rem;
    padding: 0 3.0rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
/* More styles of the Primary Button here */

Una de las ventajas del uso de Módulos CSS es que no tenemos que preocuparnos por las convenciones de nomenclatura. Puedes utilizar todavía tus metodologías preferidas del CSS como BEM u OOCSS, pero no se aplica nada; puedes escribir las reglas de estilo de la forma más práctica para el componente, ya que el nombre de la clase eventualmente se pondrá en namespaced.

En este ejemplo, nombramos todas las clases de nuestro componente de botón .button en lugar de .button-primary o .button-outline.

Trabajando con CSS en Shadow DOM, todavía tengo el viejo hábito de usar notación BEM aunque no es *necesario*. ¡Estilo de encapsulación FTW!
— Razvan Caliman (@razvancaliman) Julio 31, 2017

Compilando módulos con Webpack

Cuando cargamos el index.js en una página HTML, nada aparecerá en el navegador. En este caso, tendremos que compilar el código para hacerlo funcional. Necesitaremos instalar Babel, Babel Preset para ES2015 (ES6) y Webpack junto con los siguientes "cargadores" para permitir que Webpack procese nuestros archivos de origen.

Babel-loader: para cargar archivos .js y transformar el código fuente con el módulo básico de Babel.
Css-loader: para cargar archivos .css.
Style-loader: para inyectar estilos internos tomados del css-loader en nuestra página HTML usando el <style>.

Instalamos esos paquetes con NPM y los guardamos en el archivo package.json como nuestras dependencias de desarrollo.

Configuración del Webpack

De forma similar a Grunt con su gruntfile.js o Gulp con su gulpfile.js, ahora necesitamos configurar Webpack usando un archivo llamado webpack.config.js. A continuación presentamos la configuración completa de Webpack en nuestro proyecto:

var path = require('path');

module.exports = {
    entry: './src/main.js', // 1.
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'main.js'
    },
    module: {
        loaders: [ // 4.
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    }, {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[hash:base64:5]__[local]'
                        }
                    }
                ]
            }, {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015']
                        }
                    }
                ]
            }
        ]
    }
}

La configuración le indica a Webpack que compile nuestro archivo principal de JavaScript, main.js, al directorio /dist/js. También hemos habilitado la opción modules en css-loader, así como hemos establecido la clase y el patrón de nomenclatura de ID en [hash: base64: 5]__[local]. Empleamos babel-loader para compilar nuestros archivos JavaScript ES6.

Una vez que tengamos las dependencias instaladas y configuradas, importaremos nuestros tres botones en el archivo main.js.

// Import the button elements;
import ButtonPrimary from './button-primary';
import ButtonOutline from './button-outline';
import ButtonClear from './button-clear';

// Add the element to the content;
document.getElementById('content').innerHTML = `${ButtonPrimary}${ButtonOutline}${ButtonClear}`;

Ahora ejecuta el comando webpack de la siguiente manera:

1	./node_modules/.bin/webpack

Cuando cargamos /dist/js/main.js en el navegador, debemos ver que nuestros botones se agregan con las clases que se nombran siguiendo el patrón que establecemos en css-loader. También podemos encontrar los estilos añadidos a la página con el elemento styles.

Elements Tab on Google Chrome DevTools — ¡Funciona!

Composición

Los preprocesadores CSS como LESS y Sass nos permiten reutilizar estilos extendiendo otras clases o IDs de otras hojas de estilo. Con los Módulos CSS, podemos usar la directiva compose para hacer lo mismo. En este ejemplo, he puesto en otro archivo las reglas de estilos comunes que se comparten a través de nuestros tres botones e importé la clase del nuevo archivo, de la siguiente manera:

.button {
        
    /* Extend .button class to apply the basic button styles */
    composes: button from "./button.css";
    
    color: #fff;
    background-color: #9b4dca;
    border: 0.1rem solid #9b4dca;
}

Una vez que el código es compilado y cargado en el navegador, podemos encontrar que el botón es procesado con dos clases. También hay cuatro elementos style inyectados en la página que incluyen la clase _3f6Pb__button que contiene las reglas de estilo común de nuestros componentes.

Usando módulos CSS en Vue

En un proyecto real, es probable que no usemos módulos CSS utilizando JavaScript. En su lugar, utilizaríamos un framework de JavaScript como Vue. Afortunadamente, los Móludos CSS han sido integrados a Vue a través de la vue-loader; un cargador Webpack que compila el .vue. Vamos a mostrar un ejemplo de cómo colocaríamos nuestro botón principal en un componente .vue.

<template>
<button v-bind:class="$style.button"><slot></slot></button>
</template>

<script>
export default {
    name: 'button-primary'
}
</script>

<style module>
.button {
    
    /* Extend .button class to apply the basic button styles */
    composes: button from "./button.css";
    
    color: #fff;
    background-color: #9b4dca;
    border: 0.1rem solid #9b4dca;
}

.button[disabled] {
    cursor: default;
    opacity: .5;
}

.button[disabled]:focus,
.button[disabled]:hover {
    background-color: #606c76;
    border-color: #606c76;
}

.button:focus,
.button:hover {
    background-color: #606c76;
    border-color: #606c76;
    color: #fff;
    outline: 0;
}
</style>

En Vue, agregamos el atributo module al elemento style, como se muestra arriba, para habilitar los Módulos CSS. Cuando compilamos este código obtendremos casi el mismo resultado.

Terminando

Para algunos de ustedes, esto será algo completamente nuevo. Es perfectamente comprensible si el concepto de Módulos CSS es un poco rascador de cabeza a primera vista. Así que vamos a recapitular lo que hemos aprendido acerca de los Módulos CSS en este artículo.

Los "Módulos CSS" nos permite encapsular las reglas de estilos renombrando o namespacing (clasificando) los nombres de las clases, minimizando los choques en la especificidad del selector a medida que crece la base de código.
Esto también nos permite escribir los nombres de las clases más cómodamente en lugar de atenernos a una metodología en particular.
Por último, como las reglas de estilo se acoplan a cada componente, los estilos también se eliminarán cuando ya no utilices el componente.

En este artículo, apenas arañamos la superficie de los Módulos CSS y otras herramientas modernas de desarrollo web como Babel, Webpack y Vue. Por lo tanto, he reunido algunas referencias para que busques más sobre estas herramientas.

Referencia adicional

Echa un vistazo a la demo en Github
Empieza a codificar en ES6 con Babel: Curso en Tuts+
Comenzando con Vue: Curso en Tuts+
Webpack 2 inmediato: Curso en Tuts+
Estrategias para mantener baja la especificidad CSS
Daniel Eden: Moverse lento y arreglar cosas