Share
Como habrá recopilado de las entradas anteriores de esta serie, PostCSS tiene que ver con los complementos. Los complementos que elija definirán completamente su experiencia con PostCSS.
Dado que son tan integrales y fundamentales, antes de pasar a la producción de hojas de estilo a través de PostCSS, veremos cómo puede explorar el ecosistema de complementos de PostCSS. A través de esto, también obtendrá una visión de lo poderoso que es PostCSS, y cómo ofrece una funcionalidad que no se puede crear por igual a través de cualquier otro medio existente..
Cubriremos dónde puede ir para controlar los últimos y mejores complementos, las categorías en las que generalmente se encuentran y las consideraciones sobre cómo cargar todos estos complementos en proyectos de una manera lógica..
Cuando empiece a trabajar con PostCSS, hay tres ubicaciones que querrá vigilar para encontrar excelentes complementos..
La página principal del repositorio de Github de PostCSS actualmente mantiene una lista categorizada de complementos. Esta lista tiende a actualizarse con frecuencia, por lo que es un lugar bastante confiable para ir y ver qué complementos están disponibles para diferentes aspectos del desarrollo..
https://github.com/postcss/postcss#pluginsUna adición relativamente nueva, y muy bienvenida, al mundo de PostCSS es el sitio postcss.parts, que proporciona un catálogo de complementos de PostCSS con capacidad de búsqueda..
http://postcss.partsEn este momento, PostCSS está viendo una serie de complementos nuevos e interesantes que se lanzan de forma regular. Las dos ubicaciones anteriores no resaltan nuevos complementos, por lo que de un vistazo no sabrá si hay elementos que no ha visto antes. Por esa razón, es una gran idea seguir o visitar con frecuencia @PostCSS en Twitter.
https://twitter.com/postcssLa amplitud de la funcionalidad de los complementos que pueden funcionar con PostCSS es enorme, por lo que es una gran idea tener una introducción a la información general. tipos de los complementos que es probable que encuentres antes de pasar a probar cualquiera de ellos.
La naturaleza fundamental de PostCSS es que proporciona procesamiento modular de CSS. Como tal, se recomienda a los complementos individuales que cubran solo un conjunto de funciones pequeño y estrechamente definido. Se desalientan los complementos multifuncionales megalíticos que hacen todo de una vez..
Dicho esto, a veces desea incorporar una larga lista de funciones en un proyecto, y prefiere no tener que instalar y configurar individualmente veinte complementos diferentes. Aquí es donde los "packs" entran en juego. Los paquetes reúnen varios complementos modulares bajo un paraguas temático, lo que permite que todos se instalen y se implementen a la vez.
Por ejemplo, el paquete PreCSS combina nueve complementos de PostCSS separados para crear una funcionalidad similar a Sass. El paquete cssnano utiliza una veintena de complementos de PostCSS para proporcionar la minificación y optimización de CSS. Al usar estos paquetes, se ahorra tener que instalar y cargar cada uno de los complementos manualmente.
El CSS futuro consiste en dejarte escribir la sintaxis que sabemos que viene en la especificación W3C, pero puede que aún no sea totalmente compatible con los navegadores.
Por ejemplo, es posible que desee utilizar la próxima notación hexadecimal de ocho o cuatro dígitos para crear colores opacos. Para generar un azul ligeramente transparente puede usar un código de color como # 0000ffcc, o su forma abreviada # 00fc, y ejecute el plugin postcss-color-hex-alpha para convertirlo en el formato ampliamente compatible rgba (0, 0, 100%, 0.8).
La presencia más destacada en el futuro CSS de PostCSS es el paquete cssnext, que aporta una gran cantidad de futuros CSS compatibles con las especificaciones a la tabla. Sin embargo, en la actualidad, su desarrollador Maxime Therouin está llevando el paquete a través de una importante transición en la forma en que funciona. Como tal, nos mantendremos al tanto de ofrecerle un futuro tutorial de CSS hasta que se complete la transición..
Donde el futuro CSS se trata de hacer que el código del mañana funcione en los navegadores de hoy, las alternativas son esencialmente acerca de que el código de hoy funcione en los navegadores de ayer. En un mundo perfecto, nunca tendríamos que pensar en navegadores antiguos y obsoletos, pero la realidad es que todavía hay algunos proyectos para los cuales es esencial el soporte de los navegadores antiguos. La categoría de fallbacks de los complementos de PostCSS puede ayudar donde sea el caso.
Todos estos complementos se ejecutan en modo manos libres, por lo que me refiero a que escriba su código de acuerdo con los estándares actuales, y los complementos encontrarán el código que necesita resguardos heredados y los insertarán automáticamente según sea necesario..
Por ejemplo, puede agregar colores planos como puntos de respaldo para rgba () colores por el complemento postcss-color-rgba, o agregue complementos compatibles con IE8 para opacidad a través del plugin postcss-opacity. El más conocido de estos complementos es Autoprefixer, que agrega prefijos de proveedores según sea necesario, basado en datos de CanIUse.com.
Aprenderá más sobre los complementos de respaldo en el próximo tutorial de "Compatibilidad con varios navegadores" de esta serie..
Los complementos de extensión de idioma agregan funcionalidad a CSS que de otra manera no estaría allí. En comparación, puede considerar que la mayoría de los preprocesadores están completamente compuestos por extensiones de lenguaje. De hecho, los usuarios de Sass, Stylus y LESS probablemente se sentirán como en casa con muchas extensiones de lenguaje PostCSS, como las que agregan mixins, variables, condicionales, bucles, anidamientos, extensiones, etc..
Sin embargo, debido a que PostCSS es completamente flexible, también hay extensiones de idioma que ofrecen funciones que no se encuentran comúnmente en los preprocesadores. Por ejemplo, el complemento postcss-bem agrega sintaxis específicamente para crear CSS que sigue la metodología BEM / SUIT (más sobre esto en un tutorial posterior). El plugin postcss-define-property le permite crear sus propias propiedades personalizadas o redefinir las propiedades nativas. Y el complemento postcss-match le permite usar no solo condicionales, sino también lógica de coincidencia de patrones en su código.
Con esta variedad, todo indica que PostCSS madurará hasta el punto en que pueda proporcionar gran parte de la funcionalidad que muchos de nosotros buscamos en los preprocesadores, pero también una funcionalidad considerable más allá de eso..
Muchos de los complementos de color actualmente disponibles para PostCSS tratan con la transformación de colores de un formato a otro, por ejemplo, desde #hexa a rgba (), hcl (H, C, L) a #rgb, o pantone a #rgb. Además, algunos de los complementos más útiles manejan la manipulación del color, como mezclar dos colores o escalar la claridad u oscuridad de los mismos..
Uno de mis favoritos en particular le permite tomar su esquema de color existente, luego emitir una versión como se vería a las personas con formas específicas de ceguera al color. No hay nada como experimentar algo de primera mano para ayudarte a medir qué tan accesibles son tus diseños..
Vamos a entrar en más detalles sobre los complementos de color en nuestros tutoriales posteriores de preprocesamiento, taquigrafía y "golosinas varias".
Esta categoría de complementos maneja muchas tareas de optimización, como empaquetar datos Base64, generar hojas de sprites CSS y optimización SVG. También encontrará varios otros tipos de herramientas de imagen y fuente, como la conversión automática de SVG a PNG para IE8, la generación automática de imágenes WebP y la inclusión para los navegadores compatibles, @Perfil delantero Atajos, atajos de soporte de retina y más.
Descubrir que los sistemas de cuadrícula podrían escribirse en PostCSS, sin necesidad de cargar hojas de estilo preescritas o usar mixins de preprocesador, fue lo primero que realmente me abrió los ojos en cuanto a lo poderoso que es PostCSS. Anteriormente había pensado que PostCSS se trataba principalmente de filtrar y modificar el CSS existente, sin embargo, los sistemas de cuadrícula muestran que se puede usar para crear bibliotecas completas de estilos externos.
Actualmente hay tres sistemas de rejilla disponibles para PostCSS:
Los complementos de optimización de PostCSS se dividen en dos categorías generales: minificación y modificación de código. A través de estos complementos, puede realizar tareas de minificación como eliminar espacios en blanco y comentarios, y también puede hacer modificaciones más complejas como combinar consultas de medios coincidentes, alinear @importar hojas de estilo, optimización de pesos de fuentes, eliminación de reglas vacías o duplicadas, etc..
Cubriremos más sobre esta categoría de complementos de PostCSS en el próximo tutorial “Para minificación y optimización”.
Como usuario de preprocesador, siempre encontré que uno de los mayores beneficios era la capacidad de reducir la cantidad de código que tenía que escribir usando variables y combinaciones. A través de PostCSS he descubierto medios aún más extensivos para hacer que la escritura de códigos sea más eficiente a través de la larga lista de complementos abreviados y abreviados disponibles.
Puede elegir usar la taquigrafía para las propiedades, ya sea definiendo la suya o usando la taquigrafía existente, por ejemplo w en lugar de anchura, h en lugar de altura y así. Puedes salir @Perfil delantero código, transformar Código, triángulos y círculos todos en una línea cada uno. Y puede hacer un acceso directo a todo tipo de tareas comunes, incluido el diseño de enlaces, el centrado, la resolución de problemas, la posición, el tamaño, el espaciado y la salida de códigos de color.
Entraremos en estos complementos con mayor profundidad en el tutorial "Atajos y taquigrafía".
PostCSS también se puede usar para más que transformar CSS, también se puede usar para proporcionar comentarios a medida que desarrolla su CSS. Algunos de los complementos de análisis e informes disponibles incluyen una guía para el código BEM / SUIT, un complemento para proporcionarle un desglose de su código a través de CSSstats, "DoIUse" para informarle cómo se alinea su código con los datos de Can I Use y un generador de archivos Modernizr.
Hay algunos excelentes complementos de PostCSS que no se ajustan a una categoría específica, pero son demasiado buenos para pasarlos por alto. Por ejemplo, tenemos una guía de estilo postcss que genera automáticamente una guía de estilo basada en su CSS. También está el complemento rtlcss, utilizado por WordPress, que genera una versión de derecha a izquierda de su hoja de estilo..
Cubriremos algunos de estos excelentes complementos en el tutorial "Varios extras".
La categoría "diversión" incluye gemas como postcss-spiffing que le permite usar la ortografía del Reino Unido, por ejemplo color en lugar de color, y la sintaxis bien educada como !Por favor en lugar de !importante.
Es poco probable que vea alguno de los complementos de esta categoría utilizados en un proyecto real, sin embargo, un beneficio genuino que ofrecen es actuar como ejemplos fácilmente comprensibles para los aspirantes a desarrolladores de complementos. Siendo bastante simples y breves, son perfectos para echar un vistazo al interior y ver lo esencial de cómo se hacen los complementos de PostCSS.
Una de las principales consideraciones que debe realizar al cargar la matriz de complementos de PostCSS es el orden en el que los ejecuta. Tendrá que hacer una pausa y pensar en su lista, determinando si un complemento podría necesitar ejecutarse después de otro para hacer lo que usted desea..
Por ejemplo, puede usar un plugin como postcss-simple-vars que agrega soporte para variables, y puede usarlo para almacenar un rgba () valor como tal:
/ * código fuente * / $ color: rgba (0, 0, 0, 0.5); .style fondo: $ color; / * compila a: * / .style background: rgba (0, 0, 0, 0.5);
También es posible que desee utilizar un complemento como postcss-color-rgba-fallback para agregar un código hexadecimal plano como respaldo, lo que le brinda:
/ * compila a: * / .style background: # 000; fondo: rgba (0, 0, 0, 0.5);
En este caso, debería asegurarse de ejecutar el complemento de variables antes de el complemento de reserva.
Si ejecuta el complemento de respaldo primero, simplemente encontrará fondo: $ color; en su CSS y no sabía que había una rgba () valor para que funcione.
Sin embargo, ejecutando primero el complemento de variables, cuando se ejecute el complemento alternativo, encontrará fondo: rgba (0, 0, 0, 0.5); y seguir adelante y agregar el respaldo requerido.
El orden de carga de los complementos es algo que cambiará con cada conjunto de complementos, por lo que es posible que tenga que hacer una pequeña experimentación a veces para que todo funcione bien..
Para resumir explorando los complementos de PostCSS:
Hemos completado nuestra guía de "Inicio rápido" para PostCSS y estamos listos para saltar a la práctica y comenzar a producir un código CSS real.
En el siguiente tutorial, comenzaremos con el uso de PostCSS para generar código compatible con varios navegadores mediante la inserción automatizada de prefijos de proveedores y una serie de alternativas para las propiedades con navegadores heredados, en particular IE8.
Nos vemos en el siguiente tutorial.!
Accentsconagua