Siempre que digo que no uso preprocesadores de CSS obtengo extrañas miradas de gente que no imagina escribir CSS sin un preprocesador como Less o Sass. Así que tengo que defender mi elección y explicar los porqués una y otra vez. Alguna gente lo entiende, la mayoría no. O no quieren. Así que aquí está un intento de explicar el razonamiento de mi elección.
El propósito siempre tiene que ser simplificar el trabajo. En el momento en que un preprocesador es "necesario" es señal de que algo va mal, sea en la estrategia del diseño o en limitaciones de CSS. A la larga es un parche que debería desaparecer.
Yo los llevo empleando desde hace unos 5/6 años y realmente los considero una herramienta útil pero con matices, que luego explicaré.
Empecé con el diseño web lidiando con CSS v2 y, la verdad, la cuesta de aprendizaje fue bastante pronunciada pero poco a poco fui conociendo los entresijos y truquitos para sacar un diseño adelante.
Un buen día vi un vídeo de iniciación a SASS y quedé totalmente fascinado. Así que me animé e hice mi primer 'gem install' en el ordenador.
Al probarlo me convenció, sobre todo, la posibilidad de usar variables. Por ejemplo, con CSS a pelo cambiar una paleta de colores es un verdadero coñazo (todo el día con ':%s:#BADA55:#FATA55:g' en el VIM) y propenso a errores. Pero además valen para mantener proporciones en las medidas, anchos en las tipografías sin tener que recalcular todo cada vez... ¡todo ventajas!.
A finales del año pasado el W3C publicó el documento (como candidate recommendation) sobre las variables en CSS v3 pero tienen una sintaxis que no me parece nada práctica (leí y en cierta manera entiendo las razones para ello pero acceder a una variable con 'var(--nombreVar)' me parece algo farragoso) así que no creo que las use aún cuando se extienda su implementación en los navegadores.
También me gustaba el poder prescindir de los corchetes y sangrar el código para hacer anidamientos. Tanto me gustaba esto que cuando el desarrollador de SASS decidió que la sintaxis SCSS (con corchetes) era la que iba a tener prioridad me cambié a Stylus (y hasta hoy).
El peligro del anidamiento es que puedes crear un mounstro de difícil manejo. Yo procuro no hacer más de 3 niveles de anidamiento para que de un simple vistazo me de cuenta de la estructura.
Por último, las funciones (o mixins) también pueden ser muy útiles. No es algo que use mucho pero las que me creé casi siempre están en mi hoja de estilos.
Con los mixins también se observa el vicio del abuso. Mucho desarrollador carga bibliotecas enteras de ello (bourbon, neat, kouton...) y emplea a cascoporro sus funciones cuando, a veces, con una función tuya tienes más que suficiente.
En fin, que los preprocesadores me parecen un invento cojonudo pero, como siempre, no hay que permitir que la capa de abstracción nos ciegue y ya no recordemos lo qeu hay por debajo.
Uno de los principales motivos por los que se usan preprocesadores es para evitar tener que cambiar los códigos de colores por toda la hoja CSS. Sin embargo esto es extremadamente simple de evitar, por ejemplo de este modo:
.blue
.red
Hola
qué tal
Otra razón de su uso es por el tema de las proporciones en pantalla, pero en realidad da igual escribir: width: 33% que width: 1/3.
Coincido plenamente con el autor del artículo. Es preferible evitar soluciones intermedias que complican más que solucionan.
Comentarios
El propósito siempre tiene que ser simplificar el trabajo. En el momento en que un preprocesador es "necesario" es señal de que algo va mal, sea en la estrategia del diseño o en limitaciones de CSS. A la larga es un parche que debería desaparecer.
Lo próximo: un preprocesador de preprocesador de CSS que preprocese el CSS.
En mi opinión: lo mejor es lo simple, incluso creo que a veces se usan "herramientas de más" para presumir de saberlas usar.
Yo los llevo empleando desde hace unos 5/6 años y realmente los considero una herramienta útil pero con matices, que luego explicaré.
Empecé con el diseño web lidiando con CSS v2 y, la verdad, la cuesta de aprendizaje fue bastante pronunciada pero poco a poco fui conociendo los entresijos y truquitos para sacar un diseño adelante.
Un buen día vi un vídeo de iniciación a SASS y quedé totalmente fascinado. Así que me animé e hice mi primer 'gem install' en el ordenador.
Al probarlo me convenció, sobre todo, la posibilidad de usar variables. Por ejemplo, con CSS a pelo cambiar una paleta de colores es un verdadero coñazo (todo el día con ':%s:#BADA55:#FATA55:g' en el VIM) y propenso a errores. Pero además valen para mantener proporciones en las medidas, anchos en las tipografías sin tener que recalcular todo cada vez... ¡todo ventajas!.
A finales del año pasado el W3C publicó el documento (como candidate recommendation) sobre las variables en CSS v3 pero tienen una sintaxis que no me parece nada práctica (leí y en cierta manera entiendo las razones para ello pero acceder a una variable con 'var(--nombreVar)' me parece algo farragoso) así que no creo que las use aún cuando se extienda su implementación en los navegadores.
También me gustaba el poder prescindir de los corchetes y sangrar el código para hacer anidamientos. Tanto me gustaba esto que cuando el desarrollador de SASS decidió que la sintaxis SCSS (con corchetes) era la que iba a tener prioridad me cambié a Stylus (y hasta hoy).
El peligro del anidamiento es que puedes crear un mounstro de difícil manejo. Yo procuro no hacer más de 3 niveles de anidamiento para que de un simple vistazo me de cuenta de la estructura.
Por último, las funciones (o mixins) también pueden ser muy útiles. No es algo que use mucho pero las que me creé casi siempre están en mi hoja de estilos.
Con los mixins también se observa el vicio del abuso. Mucho desarrollador carga bibliotecas enteras de ello (bourbon, neat, kouton...) y emplea a cascoporro sus funciones cuando, a veces, con una función tuya tienes más que suficiente.
En fin, que los preprocesadores me parecen un invento cojonudo pero, como siempre, no hay que permitir que la capa de abstracción nos ciegue y ya no recordemos lo qeu hay por debajo.
Acabo de quedarme de piedra. Así como un preprocesador de HTML sí tiene sentido, no entiendo para qué uno de CSS.
Uno de los principales motivos por los que se usan preprocesadores es para evitar tener que cambiar los códigos de colores por toda la hoja CSS. Sin embargo esto es extremadamente simple de evitar, por ejemplo de este modo:
.blue
.red
Hola
qué tal
Otra razón de su uso es por el tema de las proporciones en pantalla, pero en realidad da igual escribir: width: 33% que width: 1/3.
Coincido plenamente con el autor del artículo. Es preferible evitar soluciones intermedias que complican más que solucionan.