Regreso a la raíces (back to the :roots) 14.9.15
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)
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.
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.
Tip 3:
Usa valores "dinámicos", comocurrentColor
yem
´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
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.
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
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
:root {} es lo mismo que *{} ??
ResponderEliminargracias...
Hola Dick
EliminarNo. Son selectores Css diferentes.
Selector universal *
El asterisco '*' representa a cualquier elemento del DOM. Al ser utilizado como selector aplicará a cualquier elemento contenido en el documento.
Selector :root
Representa el elemento raíz del documento. El primer nodo (o nodo ancestro) de todo el árbol.
En un documento html el selector :root para algunas propiedades equivale al selector html, pero en otras representa al viewport (o espacio en el que "se dibuja" el documento.
:root tiene mayor especificidad que el selector html.
Creo recordar que fue definido en el documento de nivel 3 de los selectores Css. La razón es que en la web hay otros tipos de documentos además del html. Como XML, SVG..
Un saludo