¿Por qué algunas personas usan preprocesadores CSS?

Cuando construyes una casa, ¿quieres usar un martillo, una sierra manual y algunos clavos, o prefieres usar un taladro eléctrico, una sierra ingletadora y algunos tornillos?

Escribí CSS durante muchos años antes de adoptar un preprocesador. Para sitios más pequeños, e incluso micrositios, puede ser innecesario usar un preprocesador. Pero para proyectos grandes, donde el sitio web es complejo y tienes compañeros de equipo, un preprocesador es una buena herramienta para usar.

Complicado se refiere a un alto nivel de dificultad. Complejo se refiere a los componentes del sistema.

Un buen preprocesador de CSS, como Stylus, puede ser complejo , pero no es complicado .

Variables
Ser capaz de crear variables y referirse a ellas, en lugar de reescribir el valor de la propiedad, le permite desarrollarse más rápido. Cuando necesita cambiar o actualizar un valor, lo actualiza en un lugar, en lugar de 20 o 30.

Mixins
Ser capaz de crear un conjunto de propiedades y valores, y reutilizarlos, es enormemente valioso. Nuevamente, puede actualizar un pequeño componente de la presentación de múltiples elementos en un solo lugar, en lugar de muchos

Soporte de navegador complejo
Stylus tiene una biblioteca llamada NIB que proporciona soporte para navegadores cruzados. Es más que una herramienta de prefijo de proveedor, también analiza propiedades y modifica la sintaxis. Esto me permite concentrarme más en escribir un CSS estándar y dejar que una herramienta se asegure de que sea compatible con el navegador.

Arquitectura y escalabilidad
La arquitectura CSS es una cosa. Debe pensar cómo está escribiendo CSS para que pueda escalar a medida que crece la aplicación web o el sitio web. ¿Qué pasa si el proyecto necesita ser receptivo? ¿Qué sucede si necesita agregar nuevos puntos de ruptura? ¿Qué pasa con las hojas de estilo de impresión? ¿Qué pasa si la marca cambia? ¿Qué pasa con el diseño?

Puede escribir un buen HTML y CSS que sea modular y orientado a objetos. También podría adoptar un método HTML como BEM. Pero cuando solo está escribiendo CSS, su flexibilidad se limita a su capacidad de hacer una búsqueda y reemplazar en una hoja de estilo.
Valores dinámicos
En un preprocesador, puede almacenar colores como variables. Pero, ¿qué pasa si las cosas necesitan ser un poco más oscuras o más claras? En unos como Stylus, puede cambiar el tono, la saturación o la claridad de un color.

No solo eso, puede calcular el alto y el ancho de una variable almacenada. Podría establecer el ancho del cuerpo y luego escribir mi diseño como un cálculo a partir de una variable mantenida centralmente. Entonces, en lugar de usar% como medida y limitarme a un diseño líquido, puedo usar un diseño elástico o fijo que aún puede cambiar dinámicamente al cambiar una variable.

Solo por ejemplo, considere que está trabajando para una gran empresa con un sitio web cuyo Color del tema sea, supongamos que es rojo y tiene cientos / miles de páginas para mantener, pero en un desafortunado día su jefe llama a su puerta y dice “Hola, hombre, estás haciendo un buen trabajo, pero decidimos cambiar el color del tema de nuestro sitio web a azul “.

Y su reacción seguramente sería “¡Qué diablos!”

¡Tengo miles de páginas que mantener y ahora mi jefe quiere cambiar el color de todas las páginas a otro color!

En serio, ahora tienes que navegar a todas las páginas individualmente y cambiar el color del tema.

Trabajo asombroso !!!

El preprocesador CSS como LESS proporciona características de hacer variables, mixins y mucho más que resolverán este problema muy fácilmente …

¡Ahora solo tiene que establecer una variable para el color del tema y todo lo demás está hecho por usted!

Una vez que comiences a usarlo, verás por qué te equivocaste.

Una pregunta similar sería, ¿por qué escribir plantillas web modulares y no escribir un montón de HTML? CSS ha sido bastante complicado todo el tiempo, principalmente debido a su tolerancia a fallas, naturaleza en cascada y compatibilidad con versiones anteriores. Los preprocesadores como LESS y SASS han cambiado eso.

Los puntos clave a destacar son:

1. Repitiéndote a ti mismo . En CSS, escribir código limpio y eficiente puede ser difícil debido a su mecanismo de tolerancia a fallas. Con la técnica de preprocesamiento modular (consulte: Arquitectura escalable y modular para CSS y sistemas de diseño atómico de construcción), puede escribir CSS escalable, limpio y utilizable con mucho menos dolor de cabeza.
2. Soporte para cosas nuevas . Es difícil hacer un seguimiento de CSS3 con todos sus cálculos complejos y prefijos de proveedores. Un enfoque funcional para eso siempre ayuda.

La lista es mucho más grande, pero entiendes el punto.

Si bien hay muchos beneficios de usar un preprocesador CSS, aquí hay algunos que creo que son importantes:

1. Tendrás un código organizado y limpio.
2. Al usar Mixins, tendrá componentes reutilizables que le ahorrarán tiempo y costos.
3. Tendrá flexibilidad para hacer cosas dinámicamente utilizando las funciones, variables, sumas, restas, etc. que la mayoría de los preprocesadores CSS ofrecen.
4. Obtendrá muchos fragmentos compartibles debido a la gran comunidad de código abierto.
5. La compatibilidad del navegador se convierte en una tarea fácil.
6. Las páginas se vuelven más claras, especialmente si estaba usando un marco CSS y estaba tratando de anular sus propiedades usando un archivo CSS adicional suyo.
7. La función de importación lo ayudaría a dividir módulos o componentes en diferentes archivos y, por lo tanto, ayudaría a mantener un sitio grande organizado.
8. La escalabilidad se vuelve mucho más fácil.

Hay mucho más para los preprocesadores CSS. Puede leer más en ¿Qué son los preprocesadores CSS? El | MoreOnFew.com

Utilizamos preprocesadores, específicamente Stylus , en BuyBitcoin.ph para crear nuestra biblioteca CSS. Hace que escribir CSS sea menos repetitivo.

Por ejemplo:

CSS normal

.btn {
color: # c0ffee;
acolchado: 10px 14px;
borde: 3px solid # c0ffee;
}

Se puede escribir como:

Aguja

$ color = #café
.btn
color $ color
acolchado 10px 14px
borde 3px color sólido $

¡Para hacerlo más reutilizable, podemos transformar eso en un mixin!

btn ($ color)
color $ color
acolchado 10px 14px
borde 3px color sólido $

.btn-azul
btn (azul)

.btn-rojo
btn (rojo)

.btn-negro
btn (negro)

Creo que solo eso es un incentivo para que usemos preprocesadores para ayudar a acelerar las cosas.

Hay varias razones por las que lo uso.

1. Es molesto ingresar un código hexadecimal para cada estilo que lo necesita. Es más fácil simplemente especificar el color en términos humanos.
2. Mixins En lugar de reescribir una propiedad con el prefijo de vendedor apropiado, puedo hacer una mezcla y nunca tener que preocuparme por eso nuevamente.
3. Mantenibilidad Volviendo a la cuestión del color, si por alguna razón necesito cambiar un color de un verde verdadero a un verde ligeramente más oscuro, todo lo que necesito hacer es cambiar el código hexadecimal en un lugar y se puede aplicar a todos los lugares mencionados.

Hay varias otras razones por las cuales alguien podría usar un preprocesador, pero esto es solo por mi experiencia.

Aunque conozco el desarrollo web desde hace mucho tiempo. No aprendí el pensamiento SASS de la misma manera.

Una vez que lo aprendí, me sentí muy mal por haberlo perdido desde el principio. Es simplemente maravilloso Si lo intentas una vez, nunca lo volverás a dejar.

El código es muy fácil de mantener y está limpio.

Bien, lo sabía al menos ahora.

Todavía no conozco los marcos de Javascript como el nodo js y otras cosas como el paquete web. No sé lo que me falta hasta que lo aprenda. Espero tener tiempo para aprenderlo.