¿Preprocesadores, cuál y por qué?

[ValKiriann]

Hola!

Todavía no he aprendido ningún preprocesador y a la hora de hacerlo me gustaría saber cuál es el que vosotros habeis elegido y por qué. En principio pienso que Sass es el que debería aprender pero no estoy segura.

Gracias de antemano

[Angelmmiguel]

Hola @ValKiriann,

La gran ventaja del uso de preprocesadores es que te permiten ampliar las funcionalidades del lenguaje CSS sin que esto afecte al usuario final. El usuario final siempre recibirá un fichero CSS válido por lo que no hay que lidiar con la compatibilidad de las características de CSS en los navegadores. Algunas funcionalidades a destacar son:

• Variables (Aunque actualmente ya tenemos las CSS Custom Properties
• Funciones
• Arrays y maps (hash)
• Iteradores
• ...

Dentro del ecosistema CSS, cabe destacar tres preprocesadores:

• Less
• Stylus
• SASS

En mi caso, utilizo SASS en mis proyectos. Concretamente, la sintaxis definida en la versión 3: SCSS. Estos tres preprocesadores disponen de todas las funcionalidades más destacadas. Mirando la documentación no encuentro ninguna funcionalidad que eche en falta ninguno de ellos.

Mi decisión de utilizar SCSS va más orientada por la sintaxis del código. Vamos a poner de ejemplo la definición de una función y el uso en un selector para los tres preprocesadores:

Less

.left-border-radius (@radius) {
  border-radius: @radius 0 0 @radius;
}

.left-button {
  .left-border-radius(10px);
}

Stylus

left-border-radius()
  border-radius: arguments 0 0 arguments

// Los paréntesis son opcionales, al igual que el ;
.left-button {
  left-border-radius: 10px;
}

SCSS

@mixin left-border-radius($radius) {
  border-radius: $radius 0 0 $radius;
}

.left-button {
  @include left-border-radius(10px);
}

El resultado CSS es el mismo para los tres casos:

.left-button {
  border-radius: 10px 0 0 10px;
}

No obstante, la sintaxis es completamente diferente. En el caso de Less, la defición de una función es muy similar a la de una clase de CSS. El uso del . como elemento para definir y usar una función me parece muy confuso ya que es un símbolo fundamental de CSS.

El caso de stylus es parecido. La llamada a funciones es igual que la declaración de propiedades. Para alguien que llega al proyecto y no conoce la sintaxis de Stylus, esta le puede llevar a pensar que la declaración tiene un error tipográfico. Además, si se redefine una propiedad de CSS, lo cual es posible, el resultado puede ser un auténtico caos.

En cambio, la sintaxis de SCSS especifica de manera muy clara qué es CSS y qué es código SCSS. Además, la sintaxis es muy similar al resultado CSS (obviando la definición de la función), por lo que la curva de aprendizaje es más baja. Todo ello sin perder ventajas de otros preprocesadores.

Espero que esta respuesta te sirva de ayuda.

Bienvenida a Open Support :)

[Xaviju]

Por añadir a la magnífica explicación de @Angelmmiguel hay otra alternativa cuya ventaja es que poco más flexible que las anteriores. Es el caso de postCSS.

postCSS es un preprocesador de CSS que funciona a base de pequeños plugins de funcionalidad específicas. Hay un plugin para poder usar mixins, otro para importar, otro para transpilar CSS que aún no forma parte de la especificación oficial (pero que lo hará), etc...

La ventaja de postCSS es que los plugins se adaptan a tus necesidades y no son monolitos de funcionalidad como los más clásicos: SASS, LESS o Stylus. Es decir, que los puedes combinar como a tu equipo o proyecto le parezca mejor y los puedes extender. Sería parecido a la filosofía en FW de JS como react, vue...etc.

En mi caso llevando usando postCSS desde hace varios años con muy pocos plugins. Si quieres echarle un ojo, mi plugin favorito es cssNext. Pero hay muchos plugins más.

Además, si tienes conocimientos de JS, crearte tus propios plugins es realmente sencillo. También es cierto que nunca he tenido que crear ninguno porque ya lo ha hecho todos este señor.

En mi experiencia en un proyecto grande basta con el plugin de cssNext, otro para mixins y uno para imports

[aarongarciah]

Poco que añadir a las explicaciones de @Angelmmiguel y @Xaviju. Tan sólo añadir que yo uso una combinación de Sass + PostCSS. Realmente escribo en Sass y una vez compilado a CSS, de PostCSS sólo uso Autoprefixer. Es una maravilla de plugin que pasándole los navegadores que quieres soportar añade automáticamente los vendor prefixes a tu CSS.

En algunos proyectos he usado PostCSS, pero sólo los plugins que ha comentado @Xaviju: cssNext, postcss-mixins y postcss-imports. No me gusta usar plugins que transforman el código de manera poco transparente. Creo que puede ser un problema para los recién llegados a un equipo/proyecto o para desarrolladores que hereden el proyecto.

¡Suerte @ValKiriann!

[ValKiriann]

Gracias a todos por contestarme tan rápido y proporcionarme tanta información!

[mminguezz]

Mi turno @ValKiriann, yo uso principalmente Less, por requisitos del proyecto, y PostCss, por preferencias personales, pero he estado mucho tiempo usando Scss. También he probado stylus, myth y alguno mas que ha desaparecido. En casa hasta no hace mucho usaba Scss pero como me liaba mucho al estar usando Less en el trabajo ahora solo uso CSS que también se pude usar.

Te decidas por la herramienta que sea te recomiendo tres cosas:

• Piensa que es solo una herramienta para crear CSS, hasta que tengas el dominio de la herramienta deberías comprobar siempre el CSS que generas y después hacerlo con frecuencia, muchas veces nos olvidamos del resultado final y creamos grandes churros.

• Aprende a usar otro, a medida que aprendas cosas nuevas te animo a que busques como se hace en otro preprocesador, por ejemplo los bucles de Scss y Less son muy diferentes.

• Refresca tu CSS, no te olvides de seguir aprendiendo CSS e implementa lo en tu preprocesador favorito pero no lo olvides... muchas veces nos olvidamos de la sintaxis de CSS por que usamos funciones de los preprocesadores.

Y por último, una idea para aprender, coge un ejemplo de pagina, crea los estilos con un preprocesador después crea el CSS tan bien hecho como puedas y ahora compara los dos CSS, si no son iguales vuelve a probar con el preprocesador pensando en el CSS que quieres que produzca.

[nucliweb]

Hola @ValKiriann

Empecé con Less, gracias a @wakkos, he estado utilizando Sass durante mucho tiempo, y desde hace más de un año estoy trabajando con PostCSS. @Xaviju ya te ha detallado uno buenos recursos para empezar.

En mi caso, y creo recordar que también es el de @nabaroa, probé cssNext y va genial, pero me gusta tener el control de lo que pasa en el proceso de transpilación a CSS... así que lo que hice la primera vez que utilizé cssNext es analizar los plugins que incluye y en su lugar, instalar y configurar cada uno de los que necitabas (al igual no necesitas todos los que incluye).

Utilizar un paquete de plugins como cssNext te permite agilizar el inicio del proyecto, pero creo que hacerlo por separado es un ejercicio donde se aprende más de cada no de los plugins, ya que te ves en la necesidad de leer su documentación.

Mi apuesta por PostCSS se debe a que creo que en CSS vamos a acabar con un escenario similar a que hay actualmente en Javascript, donde se pueda desarrollar con las últimas especificaciones (aun no soportadas por los navegadores) y siendo transpiladas para convertirlo en un CSS compatible, como hace Babel para Javascript.

Una iniciatica muy interesante, también de Jonathan Neal, es cssdb... donde define una serie de STAGES (etapas) de desarrollo para las especificaciones de CSS como se está haciendo en Javascript.

Y como te comenta @mminguezz lo importante es conocer las especificaciones de CSS o lo nuevo que llegará siguiendo las publicaciones de CSS Working Group Editor Drafts, el resto son herramientas o convenciones que alguien crea como una necesidad para optimizar o mejorar el proceso y la comunidad acaba adoptándolas, pero nunca deben convertirse en el fin.

@Xaviju comenta que nunca ha necesitado crear un plugin PostCSS por la gran cantidad que hay disponibles, pero creo que es un buen ejercicio crear uno, por pequeño que sea, para entender mejor el funcionamineto interno de PostCSS.

[Wakkos]

Se ha dicho casi todo, así que mi granito de arena será pequeño (incluso para un granito de arena): Comunidad. Entre los preprosesadores existentes podría asegurar que Scss es el que tiene más soporte por parte de la comunidad.

[ValKiriann]

Gracias a todos por la dedicación y la atención de las respuestas!