PostCSS, otra forma de trabajar en CSS

Diseño Web 28 marzo 2017

PostCSS

El mundo web se encuentra en continua evolución, y el CSS sigue evolucionando. Esta forma de trabajar ha sufrido una gran evolución. Y mucha gente se ha sumado al carro, siendo una gran evolución en las descargas que ha tenido.

Para poder situar de forma más fácil a quien no sabe mucho de esta herramienta, se podría hacer una primer esta primera definición:

PostCSS es una herramienta que transforma CSS a través de JavaScript.

Por lo que para poder utilizar PostCSS tienes que tener unas nociones básicas de JavaScript, por lo menos que te pueda sonar un poco.

Si quieres poder trastear con él, también tienes la opción de hacerlo en Codepen, ya que tiene incorporado postCSS, por lo que podrás trabajar con él a tiempo real y ver cómo funciona.

Qué es PostCSS

Ya que tenemos una definición un poco amplia vamos a afinarla un poco, ya que PostCSS transforma el CSS a través de JavaScript, pero para ser más concretos, se hace a través de plugins de JavaScript.

Puede que te suene el término “preprocesador” que son la forma de trabajar que tienen SASS, Less o Stylus, pero PostCSS es más un “procesador” de CSS, una forma de trabajar sobre el CSS. Ya que lo que hace es analizar el CSS y lo convierte un documento que se puede llegar a hacer modificaciones con los plugins de JavaScript.

Para qué se utiliza POSTCSS

Es la forma de trabajar más cómoda que puedas llegar a encontrar si lo que quieres es crear nuevas cosas, ya que te ofrece multitud de opciones. Algunas de ellas son:

  • Podrás trabajar junto a preprocesadores
  • O bien, podrás trabajar únicamente con PostCSS
  • Te podrás basar en los estándares W3C
  • O bien no, y trabajar con los borradores de los estándares de W3c, te da las dos opciones

Cómo instalar PostCSS

Par esta parte te hará falta tener instalado Node.js en tu ordenador. Pero si utilizas Grunt, Gulp o Brocoli, la instalación es mucho más sencilla.

Una vez instalado puedes llegar a seguir todas las directrices que podrás encontrar en el siguiente enlace, que está en Github y te marca paso a paso como hacerlo.

Es la guía oficial, de esta forma podrás seguir sus indicaciones sin poder perderte.
Guía Oficial

Plugins de PostCSS

PostCSS se basa en plugins para poder dar los servicios que ofrece. Por ello vamos a ver algunos de los más conocidos.

Autoprefixer

Es el plugin por excelencia de PostCSS, al igual que hace en los openSource que tenemos lo que hará es añadir las extensiones que necesite nuestros CSS. Pero aparte de añadir las extensiones que sean necesarias, también eliminará aquellas que no lo sean, algo muy positivo.

Aquí tienes el enlace de Autoprefixer en github.

CSSNext

Es un paquete de plugins que se pueden instalar de forma conjunta. En este paquete se condensan plugins como:

  • Autoprefixer
  • Custom Properties & var
  • Reduced calc
  • Custom Media Queries
  • Media Queries Ranges
  • Custom Selectors

Puedes obtener más información aquí.

Hay muchos más opciones de plugins, pero puedes comprobar todos los que hay en esta url http://postcss.parts/ ya que se trata de un catálogo de todos los plugins que hay para PostCSS.

Conclusión

Espero que te hayas hecho una idea más concreta de qué es PostCSS http://postcss.org/, y cómo se puede llegar a utilizar. De todas formas hay que tener en cuenta que es una forma de trabajar compleja, y que hay que dedicarle muchas horas y cafés delante del ordenador.

Pero espero que te haya ayudado, y recuerda que es una forma de trabajar que parece que ha llegado para quedarse, asique al código.

Datos del artículo
PostCSS, otra forma de trabajar en CSS
Título
PostCSS, otra forma de trabajar en CSS
Descripción Breve
Qué es PostCSS, cómo se utiliza, cómo instalarlo y los mejores plugins para postCSS.
Autor
Publicado en:
aexpositogonzalez.com
Logotipo:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *