Quantcast
Channel: HTML5 Fácil » CSS
Viewing all articles
Browse latest Browse all 31

Empezando con PostCSS

$
0
0

Así es amigos mios, existe otra herramienta interesante para trabajar con CSS pero con muchas diferencias a los pre-procesadores que estamos acostumbrados.

PostCSS

¿Qué es PostCSS?

Supongo que por el nombre creen que es un post-procesador de CSS y quizás algunas veces haga ese tipo de función pero en realidad es solo una herramienta en JavaScript para transformar los estilos como lo explica el sitio web oficial de PostCSS, yo lo veo mas como una extensión para las funcionalidades de CSS.

¿Qué puedo hacer con PostCSS que no pueda hacer con mi pre-procesador?

Realmente puedes seguir trabajando con tu pre-procesador favorito tranquilamente pero es bueno probar cosas nuevas, si hay cosas que un pre-procesador no puede hacer o no de la mejor forma como lo haría PostCSS, por ejemplo, plugins como Autoprefixer el más conocido y que permiten mantener el CSS libre de prefijos o CSS MQPacker que sirve para juntar media queries similares en una sola. Puedes revisar más en la sección de plugins.

¿Es fácil de usar?

Claro!, nada como unos comandos por aquí, otros por allá  y listo. Si usas algún task runner como Gulp, ya tienes el terreno listo para empezar, por ejemplo:

npm install --save-dev gulp-postcss

 

 ¿Y los plugins?

La comunidad últimamente ha estado muy activa creando y compartiendo sus plugins con el mundo, ya hay más de 200 plugin y va en aumento, los más comunes son el Autoprefixer, CSS Next, PreCSS, PostCSS Utility y muchos más.

Para instalarlos solo ejecutas:

npm install --save-dev your-plugin-name

 

¿Aún no te ha convencido?

Realmente es muy buena idea usarlo, incluso puedes usarlo en conjunto a un prep-procesador si aún no quieres dejarlo del todo. Aquí la idea es que no te pierdas las buenas caracteristicas que ofrece:

  • Gusta mucho la idea de tener todo a base de plugins, solo instala lo que ocupas
  • Es mucho más rápido que los preprocesadores más famosos (https://github.com/postcss/benchmark)
  • Puedes crear tus plugins
  • Seguirás escribiendo el CSS de siempre, a excepciones donde quieras usar mixins y demás funcionalidades.
  • No importa si usas Grunt, Gulp, Broccoli, etc.

 

Si quieres saber más, te invito a ver si sitio web oficial http://postcss.org/.

 


Viewing all articles
Browse latest Browse all 31

Latest Images



Latest Images