Debido a que CSS no es un lenguaje de programación, en cambio, es el archivo de configuración que contiene los datos variables para su programa.
Actualmente, CSS es tan poderoso que puede realmente programar en él, pero eso no es lo importante. En esencia, sigue siendo un lenguaje de hojas de estilo .
Demos un paso atrás. Imagina que tenemos un lenguaje de programación que puedes dibujar en una pantalla. Imagina que queremos programarlo para pintar una página web.
Al principio, ingresábamos toneladas de números mágicos en nuestro código. El ancho del margen, la altura del texto, las sangrías, etc., etc.
jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)
Así que extraemos los números mágicos y los colocamos en la parte superior de nuestro archivo.
int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)
Ahora esto es un poco feo. Preferimos leer nuestros números variables de un archivo de configuración.
margin 100
table 500
text size 12
Mm, eso no está claro ... ¿Qué significan esos números? ¿Qué significan esos nombres? Vamos a formalizarlo un poco.
margin_left 10em
table_width 500px
table_height 500px
font_size 12px
Pero ya sabes, queremos expandir nuestro programa un poco. También queremos que dibuje páginas con varias tablas, páginas sin tablas, páginas con párrafos o botones y mucho más. Agreguemos selectores a nuestro archivo de configuración para que podamos especificar qué párrafo debe tener una fuente más grande o un color de texto diferente, tal vez podamos admitir elementos anidados, quizás podamos usar una propiedad general en nuestro archivo de configuración y luego reemplazarlo con un específico uno en unos pocos elementos anidados.
Sientes a dónde va esto, eventualmente llegas como CSS. (Y un navegador para renderizarlo.)
¿Deberíamos entonces agregar capacidades a nuestro archivo de configuración para que podamos evitar los números mágicos nuevamente? Añadir variables? ¿Agregar un archivo de configuración para nuestro archivo CSS? Se siente un poco inútil si recuerda que nuestro archivo CSS es el mismo archivo de configuración ya.
Pero eso no es cierto, por supuesto; su archivo CSS se hace cada vez más grande y, finalmente, se encuentra con los mismos problemas que con los números mágicos originales, el mismo número que se repite en todo el lugar, a veces con pequeñas transformaciones, etc.
Sin embargo, el CSS moderno permite muchas formas de evitar esta repetición. Puedes usar clases que se aplican a muchos elementos, puedes establecer el estilo para todos los div
s, pero luego anula uno específicamente, y CSS 3 incluso permite algún tipo de uso variable.
Eso no significa que deba comenzar a usar la variable CSS en cada ubicación posible. Úselo donde tenga sentido y utilícelo donde evite la duplicación o cuando otras técnicas disponibles también se queden cortas.
Al final, tampoco desea tener demasiados números mágicos en su archivo de configuración :-)