La popularidad de PostCSS ha crecido a una velocidad increíble. Y no es por nada, pues realmente existe un concepto bastante innovador detrás de esta poderosa herramienta. La versatilidad y gran funcionalidad de PostCSS han hecho que poco a poco la comunidad del desarrollo web le vaya prestando más y más atención, mientras se comprueban todas las capacidades que tiene esta herramienta.
En este artículo te explicamos qué es PostCSS, para qué sirve y detallamos algunas de las características claves que han convertido a esta herramienta en una favorita de los desarrolladores web.
¿Qué es Post CSS?
En la descripción oficial del proyecto en su página de GitHub se describe a PostCSS como una herramienta para transformar estilos en CSS mediante el uso de plugins de JavaScript. Actualmente cuenta con más de 200 plugins con los que puedes optimizar tu código CSS y realizar muchas otras acciones. Las posibilidades son inmensas con PostCSS.
¿Cómo logra PostCSS combinar JavaScript y CSS? Pues toma el código CSS y lo transforma en un formato de datos (árbol CSS) que puede ser fácilmente manipulado mediante JavaScript. Para ello se hace uso de diversos plugins para PostCSS.
PostCSS no cambia tu código CSS, sólo “se abre camino” para que las manipulaciones que deseas realizar sean posibles. De manera general, no existen limitaciones en cuanto al nivel y tipo de manipulaciones que los plugins de PostCSS pueden aplicar a tu código. Básicamente, cualquier transformación que quieras realizar la puedes escribir tú mismo en JavaScript si es que no existe todavía.
Ya hemos definido lo que es PostCSS y para qué sirve. El concepto de PostCSS parece ser bastante innovador y por ello puede que hayan confusiones respecto a las funciones de PostCSS. Para dejar más en claro este concepto vamos a definir lo que PostCSS no es:
No es un pre-procesador
Aunque PostCSS se comporta como un pre-procesador y puedes utilizarlo como tal, no es un pre-procesador. Gracias a los plugins presenta las misma funciones que un pre-procesador, pero su rango de funcionalidad es mucho más extenso. De hecho, puedes seguir usando tu pre-procesador favorito en conjunto con PostCSS.
No es un post-procesador
Aunque PostCSS tiene el prefijo “post” en su nombre, tampoco es un post-procesador. En esta fase del desarrollo usualmente se toma la hoja de estilo finalizada con la sintaxis estándar de CSS. Si bien es cierto que PostCSS pueda realizar tareas propias de un post-procesador, debido a que no se limita sólo a éstas, tampoco se le puede considerar como un post-procesador.
No es una herramienta de optimización
Aunque PostCSS presenta plugins para optimizar código y hay uno en particular que ha encantado a la comunidad del desarrollo web llamado Autoprefixer, PostCSS no es una herramienta de optimización que se emplea para mejorar la velocidad y la compatibilidad entre navegadores. Como ya mencionamos, esta función es sólo una parte de lo que se puede lograr con PostCSS.
En conclusión, no hay una categoría para describir lo que es PostCSS pues su rango de funcionalidad es extremadamente amplio. Ilimitado, incluso, ya que puedes crear tus plugins personalizados para realizar modificaciones en tu código CSS.
Características y ventajas de PostCSS
PostCSS es un concepto bastante innovador y de gran utilidad que ha sido un grata sorpresa para la comunidad del desarrollo web. A continuación, exploraremos algunas de las características de esta herramienta.
Sus plugins ofrecen una mayor funcionalidad
La larga lista de plugins disponibles para PostCSS es uno de los mejores puntos que tiene a su favor. La gran variedad de plugins ofrece una funcionalidad realmente ilimitada. La lista de plugins está dividida por categorías, de modo que puedes fácilmente buscar y descargar el plugin que necesitas.
Algunas de las categorías que encontramos son manejo de sistemas de grillas, sintaxis futura, manejo de color, atajos y herramientas de análisis. Con los plugins de PostCSS puedes realizar tareas como transformar valores RGB a sistema hexadecimal, añadir prefijos a los selectores de clase, incluir hojas de estilos para imágenes de diseño adaptativo, etc.
Sin duda, no importa la modificación que desees realizar, seguramente encuentras el plugin necesario de PostCSS para lograrlo.
Funciona mediante módulos
Otra gran ventaja de estos plugins es que puedes usar tantos como desees. De esta manera, sólo debes descargar los que son necesarios para modificar tu código. Cada plugin de PostCSS sirve un propósito específico y pueden ser agrupados en un paquete de plugins de acuerdo a su función.
Con PostCSS sólo haces uso de los plugins que necesitas para cada propósito específico en tu código. Esto no sólo es cómodo para los desarrolladores, sino que también es económico en el uso de recursos. Esta es una de las características claves que aseguran la velocidad de PostCSS.
PostCSS es más rápido
Debido a que se emplean sólo los plugins necesarios para el proyecto, se genera un archivo que hace uso sólo de los recursos indispensables para el código. Esto implica un archivo de menor peso, que carga más rápidamente. Este es uno de los secretos por los cuales PostCSS es más rápido que los pre-procesadores más conocidos. Esta característica, sumado al hecho de que los plugins son desarrollados en JavaScript hace que PostCSS sea de 3 a 30 veces más rápido, dependiendo del pre-procesador con el que esté compitiendo.
Puedes crear tus propios plugins para modificaciones específicas
Como ya mencionamos previamente, los plugins para PostCSS son escritos en JavaScript de manera que cualquier persona que tenga conocimientos sobre este lenguaje puede desarrollar su propio plugin y aplicarlo a su código. Por supuesto, el tiempo de desarrollo depende de la complejidad de la modificación que quieras realizar. Así que si se da el caso de que no encuentras el plugin necesario para tu código en la extensa lista de PostCSS, puedes crearlo tú mismo.
En comparación con populares pre-procesadores como Sass que tienen características limitadas, PostCSS es una poderosa herramienta que puede tener tantas funcionalidades como tú quieras. Simplemente, las posibilidades que ofrece PostCSS son extraordinarias para cualquier desarrollador.
Puedes usarlo con archivos CSS comunes
Gran parte de los plugins para PostCSS no requieren una sintaxis personalizada y pueden ser aplicados a un archivo CSS común. De tal manera que puedes emplear cualquier archivo CSS que tengas en tu posesión para probar las capacidades de PostCSS. Esto también implica que puedes hacer uso de archivos CSS que han sido trabajados en diferentes pre-procesadores ya que sólo debes aplicar el plugin a la compilación CSS que se ha generado.
En conclusión…
PostCSS ofrece una gran funcionalidad y libertad para realizar modificaciones en tu código CSS. Debido a la gran cantidad de plugins que posee puedes ejecutar una gran variedad de transformaciones. Al parecer PostCSS se convertirá en una herramienta indispensable para los desarrolladores en un futuro cercano.
Ahora que ya conoces las maravillosas ventajas de PostCSS y sus plugins, te invitamos a probar esta increíble herramienta.
