Biblioteca de patrones primero: un enfoque para administrar CSS

En este artículo, basado en la charla que di en la Smashing Conference en Toronto, voy a describir un método de trabajo que he adoptado en los últimos dos años que me ayuda a administrar CSS en mis proyectos.

Le mostraré cómo usar la herramienta de biblioteca de patrones Fractal, para administrar su CSS componente por componente, mientras le permite usar las herramientas con las que ya está familiarizado. Si bien esto sirve como una introducción a Fractal, y por qué hemos seleccionado esta biblioteca de patrones en particular, es probable que esta forma de trabajar se transfiera a otras soluciones.

Nuestros proyectos

Mi empresa tiene un par de productos: Perch y Perch Runway CMS y Notist, una aplicación de software como servicio para oradores públicos. Estos productos son bastante diferentes, especialmente dado que Perch es un sistema autohospedado y Notist es SaaS; sin embargo, ambos tienen una gran cantidad de interfaz de usuario para desarrollar. También tenemos todos los sitios web asociados y la documentación de estos productos, además de otras cosas en las que trabajamos, como el sitio web de 24 Ways. Después de descubrir Fractal hace dos años, hemos trasladado todos los proyectos nuevos, grandes y pequeños, a Fractal.

Problemas que queríamos resolver

Comencé a investigar soluciones de biblioteca de patrones hace dos años cuando comencé a trabajar en la reconstrucción de la interfaz de usuario de Perch para la versión 3. Una característica de Perch es que las plantillas que crea para la salida de contenido en su sitio web se convierten en el esquema de la interfaz de usuario de administración. Esto significa que cualquier tipo de campo utilizado en una plantilla debe poder existir junto con cualquier otro tipo de campo. No sabemos cómo nuestros clientes pueden combinarlos, y hay una gran cantidad de combinaciones posibles. Tampoco es un "sitio web", y no quería intentar forzar la biblioteca de patrones en algo diseñado para organizar patrones de sitios web.

Como Perch es autohospedado (las personas lo descargan y lo alojan en sus propios servidores), necesitamos usar la pila de tecnología más simple posible para no colocar barreras de entrada adicionales frente a las personas, muchas de las cuales son nuevas en el uso de un CMS. Para agregar un nivel adicional de diversión, volvemos a admitir Internet Explorer 9, pero tenía la intención de usar mucho Flexbox, ya que esto era antes de que se enviara Grid Layout.

También estaba interesado en evitar el uso de herramientas que venían con mucho volver a aprender cómo trabajábamos y cambiar completamente nuestro proceso. Cualquier herramienta adicional o cambio en la forma en que trabajas en tus proyectos trae consigo nuevas fricciones. Puede resolver un problema, pero traer un conjunto completamente nuevo de problemas si realiza grandes cambios en la forma en que trabaja. En nuestro caso, estábamos usando Sass de una manera bastante limitada y procesándolo usando Gulp. Ninguno de nuestros proyectos utiliza un marco de Javascript, solo estamos escribiendo HTML, CSS y JavaScript.

Fractal se ajusta perfectamente a nuestras necesidades. Es agnóstico en cuanto a la forma en que desarrolla o las herramientas que desea utilizar. Es importante destacar que para nuestros propósitos, no asumimos que estábamos construyendo un sitio web. El experimento fue tan exitoso que nos encontramos usando Fractal para cada proyecto grande o pequeño, ya que hace que el proceso de trabajo en CSS sea mucho más sencillo. Incluso los sitios pequeños que creo por mi cuenta a menudo comienzan su vida en Fractal, porque hay más beneficios de los que podrías pensar en términos de trabajar con una biblioteca de patrones, y muchos de esos beneficios tienen tanto sentido para un equipo de uno como para un equipo grande. .

Antes de pensar en cómo desarrollar usando Fractal y por qué creo que tiene sentido tanto para proyectos pequeños como grandes, echemos un vistazo a cómo configurar el entorno.

Primeros pasos con Fractal

El enfoque más sencillo para trabajar con Fractal es ir al sitio web de Fractal y echar un vistazo a la Guía de inicio. Primero deberá instalar Fractal globalmente, luego puede seguir los pasos enumerados aquí para crear un nuevo proyecto Fractal.

Con su nuevo proyecto instalado, en la línea de comando cambie a la carpeta que acaba de crear y ejecute el comando:

 fractal start --sync

Esto iniciará un pequeño servidor en el puerto 3000, por lo que debería poder ir a https://localhost:3000 en un navegador web y ver su proyecto.

Ahora que su proyecto está en funcionamiento, abra la carpeta del proyecto en su editor de texto favorito y busque el componente de ejemplo en components/example . Encontrará un archivo de configuración y un archivo llamado ejemplo.hbs . La plantilla example.hbs es el HTML de tu componente, puedes agregarle algo más de HTML y Fractal lo recargará y lo mostrará automáticamente. Cambia el archivo a:

 <h1>This is my heading</h1> <p>{{ text }}</p>

Debería ver aparecer el encabezado en el navegador. El archivo de configuración se puede usar para agregar contenido y configurar su componente. Si desea leer el texto de su encabezado de ese archivo, edítelo para que se vea como el siguiente ejemplo:

 title: Example component context: text: This is an example component! heading: My heading

Ahora cambie su archivo example.hbs para leer en ese texto.

 <h1>{{ heading }}</h1> <p>{{ text }}</p>

Adición de componentes adicionales

Puede seguir el patrón del componente de ejemplo para agregar el suyo propio. Como mínimo, necesita una carpeta (el nombre del componente) y un archivo .hbs con el mismo nombre. Puede agregar el archivo de configuración si desea establecer las opciones de configuración.

Los componentes se pueden anidar en carpetas para que sea más fácil ubicar componentes particulares, y la forma en que estructura las carpetas depende completamente de usted.

Nota : es muy fácil pasar mucho tiempo preocupándose por cómo nombrar sus componentes. Al menos en Fractal, cambiar el nombre y también reorganizar los componentes en carpetas es sencillo. Puedes renombrarlos o moverlos y Fractal se actualizará para mostrar la nueva estructura. Encuentro que, a menudo, la estructura ideal solo se hace evidente a medida que me estoy desarrollando, así que no me preocupo demasiado al principio para reafirmarla más tarde.

Agregar un flujo de trabajo de CSS

Hasta ahora, podemos crear componentes HTML como plantillas de manillares y un archivo de configuración para insertar datos; sin embargo, no hemos agregado ningún CSS. Idealmente, queremos agregar el CSS para cada componente en la misma carpeta que el resto de los archivos del componente y luego combinarlo todo.

Mencioné que Fractal hace muy pocas suposiciones sobre su flujo de trabajo; Debido a esto, hace mucho menos de lo que haría si lo obligara a seguir una forma particular de trabajar. Sin embargo, podemos hacer que Fractal funcione con bastante facilidad con una configuración de Gulp.

Combinando Fractal, Sass y Gulp

A continuación, se describe una configuración mínima con Gulp y Sass para crear un único archivo CSS de salida. Con suerte, puede seguir este proceso para hacer cualquier otra cosa que normalmente haría en Gulp. La clave a tener en cuenta es que la mayor parte de esto no es específico de Fractal, por lo que una vez que la parte de Fractal funcione, puede agregar cualquier otra cosa siguiendo los mismos patrones. Si está familiarizado con otra herramienta de compilación, es probable que pueda crear un proceso similar; si lo hace, y está feliz de compartir, háganoslo saber en los comentarios.

Primero algo de configuración, lo siguiente le permitirá seguir junto con el código enumerado en este tutorial, las ubicaciones de sus archivos Sass y el CSS de salida podrían ser diferentes a los míos. La clave es que el archivo CSS de salida debe estar en algún lugar de la carpeta pública.

1. Dentro de la carpeta pública en tu instalación de Fractal, agrega una carpeta llamada css .
2. En la carpeta raíz de tu Fractal, instala y agrega una carpeta assets dentro de la cual hay una carpeta scss . Cree un archivo Sass llamado global.scss dentro de esa carpeta. Dentro de ese archivo agregue la siguiente línea:
   

    @import "../../components/**/*.scss";

3. Cree un archivo llamado ejemplo.scss en su directorio de componentes de example .
4. Cree gulpfile.js en la raíz de su proyecto Fractal y agregue el siguiente código.

 'use strict'; const gulp = require('gulp'); const fractal = require('./fractal.js'); const logger = fractal.cli.console; const sass = require('gulp-sass'); const sassGlob = require('gulp-sass-glob'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const path = require('path'); gulp.task('sass',function() { return gulp.src('assets/scss/**/*.scss') .pipe(customPlumber('Error running Sass')) .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('public/css')) }); gulp.task('watch', ['sass'], function() { gulp.watch([ 'components/**/*.scss', 'assets/scss/**/*.scss' ], ['sass']); }); function customPlumber(errTitle) { return plumber({ errorHandler: notify.onError({ title: errTitle || "Error running Gulp", message: "Error: <%= error.message %>", }) }); } gulp.task('fractal:start', function(){ const server = fractal.web.server({ sync: true }); server.on('error', err => logger.error(err.message)); return server.start().then(() => { logger.success(`Fractal server is now running at ${server.url}`); }); }); gulp.task('default', ['fractal:start', 'sass', 'watch']);

Luego instalo las dependencias enumeradas en la parte superior del archivo. Si tuviera que instalarlos en la línea de comando, ejecutaría:

npm install gulp gulp-sass gulp-sass-glob gulp-plumber gulp-notify

La función sass compila el Sass de los activos en un solo archivo y lo envía a la carpeta en public .

 gulp.task('sass',function() { return gulp.src('src/assets/scss/**/*.scss') .pipe(customPlumber('Error running Sass')) .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('public/css')) });

Luego creo una función de watch que observará mi Sass en assets y también en componentes individuales y lo compilará en la carpeta en público.

 gulp.task('watch', ['sass'], function() { gulp.watch([ 'components/**/*.scss', 'assets/scss/**/*.scss' ], ['sass']); });

Ese es mi edificio CSS. Ahora quiero hacerlo para que pueda ejecutar gulp y se iniciará la visualización del archivo CSS, así como el inicio de fractal. Hago esto creando una tarea de trago para ejecutar el comando de inicio de fractal.

 gulp.task('fractal:start', function(){ const server = fractal.web.server({ sync: true }); server.on('error', err => logger.error(err.message)); return server.start().then(() => { logger.success(Fractal server is now running at ${server.url}); }); });

Finalmente, necesito asegurarme de que el edificio Sass y Fractal comiencen a ejecutarse cuando ejecuto gulp y la línea de comando:

gulp.task('default', 'fractal:start', 'sass', 'watch');

Ese es mi gulpfile.js completo. Si agrega esto a su proyecto Fractal predeterminado, asegúrese de que las carpetas estén en su lugar para las rutas mencionadas. Debería poder ir a la línea de comando, ejecutar gulp y Fractal se iniciará.

Podemos probar nuestro Sass agregando una variable en el archivo global.scss ; deberá agregar esto arriba de la línea que incluye los componentes para que la variable esté disponible para esos componentes.

 $color1: rebeccapurple;

Luego, en example.scss , agregue una regla para el encabezado de nivel 1 que agregamos anteriormente:

 h1 { color: $color1; }

Si todo está configurado correctamente, debería encontrar que tiene un archivo .css en public/css que contiene la regla:

 h1 { color: rebeccapurple; }

Necesitamos hacer una cosa más para poder obtener una vista previa de nuestros componentes usando el CSS que estamos construyendo. Necesitamos crear un archivo de vista previa, que se vinculará en la hoja de estilo de la carpeta pública.

Dentro de su carpeta de componentes, cree un archivo llamado _preview.hbs .

El archivo de vista previa es esencialmente un documento HTML, enlazado en nuestro CSS y cualquier otra cosa que necesite incluir. En el cuerpo hay una etiqueta {{ yield }} , y aquí es donde se colocará un componente.

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Preview Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="{{ path '/css/global.css' }}"> </head> <body> {{{ yield }}} </body> </html>

Nota : la carpeta pública también puede albergar cualquier otro activo que necesite mostrar en componentes como imágenes, fuentes, etc.

La biblioteca de patrones como fuente de la verdad

Como hemos visto, Fractal puede construir nuestro CSS. En nuestros proyectos, hacemos que Fractal sea el único lugar donde construimos y procesamos CSS y otros activos para el sitio. Lo que esto significa es que nuestra biblioteca de patrones y nuestro sitio o aplicación no se desvían. La deriva ocurre después de implementar el sitio si las personas comienzan a editar el CSS del sitio y no devuelven esos cambios a la biblioteca de patrones. Si puede hacer que la biblioteca de patrones sea el lugar donde se procesa CSS, entonces los cambios deben comenzar allí, lo que evita la deriva entre el sitio en vivo y la biblioteca.

Construimos todo en Fractal y luego copiamos esos activos públicos en los sitios en vivo para implementarlos. Además de evitar la deriva entre los sistemas, también facilita mucho la gestión de CSS en el control de código fuente. Cuando varias personas trabajan en un archivo CSS, los conflictos de fusión pueden ser razonablemente difíciles de manejar. Con personas trabajando en componentes individuales en la biblioteca de patrones, generalmente puede evitar que dos personas realicen cambios en el mismo archivo a la vez, y si lo hacen, solo se trata de un archivo pequeño para ordenar y no de todo su CSS.

Uso de un primer enfoque de la biblioteca de patrones para administrar los respaldos

Descubrí que la biblioteca de patrones de trabajo primero hace que lidiar con las fallas en su código sea mucho más sencillo y menos abrumador que intentar arreglar un sitio o una aplicación completos a la vez. También nos permite concentrarnos en el mejor de los casos posibles y ser creativos con nuevas técnicas, en lugar de limitar lo que hacemos debido a la preocupación de cómo lograremos que funcione bien en navegadores no compatibles.

Podemos ver un caso simple de un componente de objeto de medios para ver cómo podría funcionar. Para continuar, cree una carpeta de medios dentro de los componentes en Fractal y agregue los archivos media.hbs y media.scss .

Comience con un buen marcado

Su punto de partida siempre debe ser un marcado bien estructurado. En la biblioteca de patrones, es posible que use este componente con un rango de marcas, por ejemplo, podría usar un componente con contenido marcado como una figura en un lugar y solo con divs en otro. Sin embargo, su contenido debe estar estructurado de una manera que tenga sentido y pueda leerse de arriba a abajo.

Esto asegura que su contenido sea accesible a un nivel muy básico, pero también significa que puede aprovechar el flujo normal. El flujo normal es la forma en que los navegadores muestran su contenido de forma predeterminada, con elementos de bloque que avanzan uno tras otro en la dimensión de bloque y elementos en línea, como palabras en una oración, que se ejecutan a lo largo del eje en línea. Para una gran cantidad de contenido, eso es exactamente lo que desea, y al aprovechar el flujo normal en lugar de luchar contra él, hace que su trabajo sea mucho más fácil al crear su diseño.

Por lo tanto, mi componente tiene el siguiente marcado que agrego a media.hbs .

 <div class="media"> <div class="img"> <img src="/img/placeholder.jpg" alt="Placeholder"> </div> <h2 class="title">This is my title</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"> An optional footer goes here. </div> </div>

Puedes ver cómo esto se muestra dentro de Fractal:

Una vez que tengo el marcado que quiero, voy a trabajar en la pantalla de escritorio que tengo en mente. Voy a utilizar CSS Grid Layout y el método grid-template-areas para hacerlo. Agregue lo siguiente a media.scss .

 img { max-width: 100%; } .media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; } .media { margin-bottom: 2em; display: grid; grid-column-gap: 20px; grid-template-columns: 200px 3fr; grid-template-areas: "img title" "img bd" "img ft"; }

Ahora tenemos un diseño de objeto de medios simple:

Algo que puedes hacer en Fractal es agregar variaciones de un componente. Es posible que desee voltear el objeto multimedia para que la imagen quede a la derecha.

Ahora agregue el CSS a media.scss para voltear el diseño:

 .media.media-flip { grid-template-columns: 3fr 200px ; grid-template-areas: "title img" "bd img" "ft img"; }

Hay dos formas de crear variantes: basadas en archivos y basadas en configuración. Basado en archivos es más simple y también es útil si su variante tiene un marcado diferente. Para crear una variante basada en archivos, haga una copia de su componente en la carpeta multimedia con el nombre media --flip.hbs (son dos guiones en el nombre del archivo).

Este componente debe tener un marcado idéntico al de la clase media-flip agregada a la primera línea, y luego podrá ver ambas versiones.

 <div class="media media-flip">

Alternativamente, como en este caso todo lo que necesitamos hacer es agregar una clase, puede crear una variante usando un archivo de configuración.

Si desea hacer esto, elimine su archivo de variante y, en su lugar, agregue un archivo de configuración llamado media.config.json que contenga el siguiente código:

 { "title": "Media Object", "context": { "modifier": "default" }, "variants": [ { "name": "Flipped", "context": { "modifier": "flip" } } ] }

Luego modifique la primera línea de media.hbs de la siguiente manera:

<div class="media media-{{ modifier }}">

Nota : puede agregar tantas variantes como desee (eche un vistazo a la documentación de las variantes para obtener más información).

Ahora podríamos pensar en agregar algo de CSS para cambiar el diseño según el tamaño de la pantalla. Envolviendo el diseño que hemos creado en una consulta de medios y, por encima de eso, creando un diseño de una sola columna para dispositivos más pequeños.

 img { max-width: 100%; } .media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; } .media { display: grid; grid-column-gap: 20px; grid-template-areas: "title" "img" "bd" "ft"; } @media (min-width: 600px) { .media { margin-bottom: 2em; display: grid; grid-column-gap: 20px; grid-template-columns: 200px 3fr; grid-template-areas: "img title" "img bd" "img ft"; } .media.media-flip { grid-template-columns: 3fr 200px ; grid-template-areas: "title img" "bd img" "ft img"; } }

Luego, así como administramos la vista para dispositivos más pequeños dentro de nuestro componente, podemos administrar el diseño para navegadores más antiguos que no admiten la cuadrícula.

En este caso, voy a crear un respaldo basado en flotadores (esto funcionará para prácticamente cualquier navegador heredado). Solo me preocuparé por tamaños de pantalla más amplios y dejaré que el componente se muestre con el flujo normal para dispositivos móviles más antiguos.

Justo dentro de la consulta de medios, agregue el siguiente CSS:

 .media:after { content: ""; display: table; clear: both; } .media > .media { margin-left: 160px; clear: both; } .media .img { float: left; margin: 0 10px 0 0; width: 150px; } .media.media-flip .img { float: right; margin: 0 0 0 10px; } .media > * { margin: 0 0 0 160px; } .media.media-flip > * { margin: 0 160px 0 0; }

Esto debería resolver la visualización en navegadores que no son de cuadrícula. Para los navegadores que admiten grid, no necesita preocuparse por los elementos flotantes, es decir, cuando el elemento flotante se convierte en un elemento de cuadrícula, se elimina el elemento flotante. Lo que será un problema son los márgenes. El diseño en los navegadores compatibles con la cuadrícula ahora estará completamente espaciado debido a los márgenes adicionales.

Aquí es donde podemos agregar una consulta de características, eliminando los márgenes si sabemos que nuestro navegador admite cuadrícula.

 @supports(display: grid) { .media > *, .media.media-flip > * { margin: 0; } .media .img, .media.media-flip .img { width: auto; margin: 0; } .media:after { content: none; } }

Ese es nuestro pequeño componente terminado. Si bien es un ejemplo simple, y se podría argumentar que es uno que realmente no necesita cuadrícula si necesita tener un respaldo, demuestra el enfoque que estoy adoptando en todos mis proyectos, grandes y pequeños.

Para que mi archivo CSS entre en producción, podemos tomar el archivo CSS de la carpeta pública y agregarlo a nuestro sitio de producción. Incluso podría escribir este proceso para copiarlo en la carpeta de su sitio a medida que se construye.

Primer desarrollo de caso de prueba reducido

Algo que he descubierto como un beneficio clave al trabajar de esta manera es que realmente hace que la compatibilidad con el navegador sea una pieza más fácil del rompecabezas. No solo es más fácil ver qué CSS alternativo se incluye con este componente, sino que también si tenemos problemas con un navegador, hace que sea mucho más fácil depurarlos.

Cuando está luchando con un problema del navegador, lo que generalmente se le pedirá que haga es crear un caso de prueba reducido. Reducir el problema a la cosa más pequeña que presenta el problema. Un componente en una biblioteca de patrones a menudo ya está muy cerca de ese caso de prueba reducido. Ciertamente, mucho más cerca que si está tratando de depurar un problema mientras mira todo su sitio web.

Además de facilitar la depuración del navegador, tener sus respaldos incluidos junto con el resto del CSS facilita la eliminación del código de respaldo una vez que ya no es necesario, es obvio que este código de respaldo es para este componente. Sé que eliminarlo no cambiará la forma en que se muestra todo lo demás.

Esta facilidad para organizar nuestro código es realmente la razón por la que Fractal tiene sentido incluso en proyectos pequeños. Dado que tendemos a usar Gulp y Sass de todos modos (incluso en proyectos más pequeños), agregar Fractal a la mezcla no es una gran sobrecarga. No necesitamos verlo solo para nuestros proyectos más grandes, ya que incluso un sitio pequeño puede tener una cantidad razonable de CSS.

Ver el código

Creé un Proyecto GitHub que tiene todo el código mencionado en el artículo. Sugeriría configurar Fractal como se describe en el artículo y luego obtener cualquier fragmento, como el archivo gulpfile o el diseño de vista previa, de mi repositorio.

Como referencia adicional y para ver algunos proyectos de Fractal publicados, tenemos la versión publicada de Perch Pattern Library, y también Pattern Library for 24 Ways (construida por Paul Robert Lloyd), que puedes consultar. Estos son buenos ejemplos de una biblioteca de patrones que no es un sitio web y una más tradicional utilizada para un sitio.

¿ Cómo se administra CSS?

Me gusta mucho esta forma de trabajar; me permite escribir CSS de una manera sencilla y progresivamente mejorada. Dependiendo del proyecto, podemos incluir muchas más herramientas y procesamiento de archivos. O bien, puedo estar creando un sitio simple, en cuyo caso la configuración será más o menos como hemos visto en este artículo, con un procesamiento ligero de Sass. El hecho de que Fractal signifique que podemos tener el mismo proceso para sitios grandes y pequeños, para aplicaciones web o sitios web. Significa que siempre podemos trabajar de una manera familiar.

Esto funciona para nosotros, y espero que este artículo pueda brindarle algunas cosas con las que experimentar. Sin embargo, me encantaría saber las formas en que usted y su equipo han abordado la gestión de CSS en sus proyectos y las fortalezas y debilidades de los enfoques que han probado. Estaría especialmente interesado en escuchar a cualquiera que haya desarrollado un proceso similar utilizando otra solución de biblioteca de patrones. Añade tus experiencias en los comentarios.