soy Kseso y esto EsCSS

Regreso a la raíces (back to the :roots)

Este artículo es mi traslación al español del original Back to the :roots de Simurai aka ᒼ(ᵔᴥᵔ)ᐣ @simurai sobre algunas prácticas para lidiar y minimizar el alcance de la cascada de Css y sus efectos a veces no deseados.

Regreso a la raíces (back to the :roots)

✎ 2
COLABORACIÓN AUTOR INVITADO

La cascada de CSS es una maldición y una bendición al mismo tiempo. Por lo general funciona bastante bien, pero tiene aspectos que llevan a la gente a plantearse cuestiones como Do We Even Need CSS Anymore.

Puedo entenderlo en parte, pero también creo que no es sólo la cascada, la pelea contra la especificidad está presente. No encontrarse con problemas con la especificidad es arduo. Casi tan difícil como la pronunciación de esta palabra.

En este artículo voy a tratar de mostrarte algunas maneras de utilizar la cascada en tu beneficio y tal vez reducir la necesidad de reescribir declaraciones y así tengas que pelearte menos con la especificidad.

Tip 1:

En cada propiedad que declares trata de escribirla tan arriba del DOM como puedas. En otras palabras: regresa a la raíz

Por ejemplo, nuestro sitio tiene un sidebar y queremos añadir una pequeña bío en él. Su marcado podría ser algo como lo siguiente:

<body> <main class='Posts”> <aside class='SideBar”> <nav class='Nav”> <p class='Bio”>

Y el Css:

.Bio { font-size: .8em; line-height: 1.5; color: #888; }

Ésto funcionará. Pero si nos fijamos en nav que está dentro de SideBar, es muy probable que compartan estilos (sean los mismos). En nuestro caso se trata de font-size y color. Así que vamos a quitar esas declaraciones de Nav y Bio y agregarlas al elemento padre común, el SideBar.

.SideBar { font-size: .8em; color: #888; }

Pero resulta que line-height: 1.5; ya fue declarado en Posts. Así que como parece que toda la página utiliza el mismo line-height, vamos a quitarla de los elementos Bio y Post y moverla hasta el nodo raíz.

:root { line-height: 1.5; }

Ésto, probablemente, sea de sentido común, pero a menudo resulta muy tentador estilizar cada nuevo elemento sin mirar a ver si en alguno de los elementos hermanos ya están definidos.

También ocurre al copiar y pegar estilos de otra sección o al pegar fragmentos encontrados por ahí.

Puede ser que lleve un poco más de tiempo refactorizar el código y parezca intimidante, pero mantendrá nuestro CSS en un estado saludable.

inline vs cascade
Estiliza las ramas, no cada hoja

Tip 2:

Estiliza ciertas propiedades conjuntamente.

Un buen ejemplo es la pareja color y background-color. A menos que sólo hagas pequeños retoques, probablemente sea una buena idea cambiarlos siempre a la vez. Al añadir un color de fondo a un elemento aunque no contenga texto es muy probable que algún hijo sí lo tendrá. Así que si declaramos los dos colores a la vez podemos estar seguros de que no vamos a tener problemas con cuestiones de legibilidad y contraste.

Además, la próxima vez que cambiamos un color de fondo, no tendremos que buscar todos los colores de texto que haya y cambiarlos también. Está todo junto en el mismo sitio.

contraste
Captura de Colorable

Tip 3:

Usa valores "dinámicos", como currentColor y em´s

A veces puede ser conveniente utilizar el color del texto de otras propiedades. Como para los bordes, sombras o para el relleno de los iconos SVG. En lugar de definirlo directamente se puede utilizar currentColor y será el mismo de la propiedad color. Y puesto que el color se hereda de forma predeterminada, sólo tendrás que cambiarlo en un único lugar.

Del mismo modo si se asignan em's a font-size que permite escalar todo con sólo cambiar el tamaño de la fuente en :root.

Más detalles sobre currentColor and EMs

ems
Reescalado de elementos en función del tamaño de la fuente en EMs

Tip 4:

Reescribe el estilo del navegador por el del padre con inherit

A elementos de formularios como botones e inputs cada navegador le aplica sus estilos. Reescribiéndolos con inherit hará que tomen tus estilos.

button, input, select, textarea { color: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; }

El ejemplo anterior está tomado de sanitize.css. normalize.css hace lo mismo, así que si lo usas estará a cubierto.

También puedes cambiar el estilo de otros elementos como controles deslizantes, radiobotones, checkboxes, etc. Y como hemos visto anteriormente, mediante el uso de currentColor, hacer que coinciden automáticamente con la propiedad color. Y tal vez cambiar un tema oscuro a uno claro sin cambiar nada más.

Coloreado del elemento raíz

Conclusión

Todo esto suena muy bonito, pero ¿a quién le puede ser de utilidad?. Bueno, está claro que no puede ser obligado usarlo en todas las ocasiones. Yo diría que en los sitios pequeños y sencillos serán los mejores candidatos. Pero incluso usando preprocesadores se puede reducir el Css generado e incluso reducir el número de variables necesarias.

También parece adecuado para planteamientos como el de Tachyons single purpose class. Puede reducir la complejidad y número de clases necesarias.

Otra cosa interesante serán la "futuras" propiedades personalizadas aka variables de CSS. A diferencia de las variables de los preprocesadores, al anular una propiedad personalizada el efecto quedaría limitado al selector actual. Así que en cierto sentido serán "variables en cascada". Pero todavía tengo que probar eso y ver cómo funciona en la práctica.

P.D.: Es posible que este post está inspirado en este tweet

Créditos y reconocimiento de autoría

simurai

La totalidad de este artículo así como las imágenes que lo ilustran es obra de Simurai aka ᒼ(ᵔᴥᵔ)ᐣ @simurai
Publicado originalmente en su blog bajo el título Back to the :roots el 9 de Septiembre de 2015.
Tienes más información sobre su autor en simurai.com/about