Guarradas CSS: Sobrescribir estilos inline desde CSS

CSS es un lenguaje de programación descripción del aspecto y formato de un documento escrito. Está formado por bloques de reglas a varios niveles. Por definición cada nivel de CSS sobrescribe al anterior, añadiendo o modificando funciones o comportamientos al anterior.

Existen muchas formas de hacer referencia a un mismo elemento y dependiendo de la que se use tendrá más o menos peso en el correspondiente nivel, variando así la posibilidad de rescribir esa clase a medida que bajamos niveles.

Por otro lado están los estilos embebidos en el código, aquellos escritos con una etiqueta style dentro del elemento correspondiente. Son de las que más peso jerárquico tienen y, hasta hace nada, pensé que eran imposibles de sobrescribir desde una hoja de estilos externa. Pero como tantas otras veces, estaba equivocado.

Supongamos que tenemos un div con un borde rojo rojo que, por el motivo que fuere, queremos sobrescribir desde archivo .css:

<div style="border: 1px solid red;">Lorem Ipsum...</div>

Tan sencillo como referenciar la propiedad [style] del elemento y escribir su nuevo comportamiento:

div[style] { border: 1px solid black !important; }

El uso de la etiqueta !important para dar prioridad a una regla css está desaconsejado y no entra dentro de las best practices, pero hay veces en las que su uso se justifica. Lo mismo puedo decir para los estilos embebidos en código, pero esto ya sería tema de otro debate.

El caso es que, si en algún momento tienes la necesidad de sobrescribir estilos embebidos style desde un archivo .css, sepas que técnicamente se puede aunque moralmente se debería optar por otra solución.

Referencia: css-tricks.

About the author

Óscar
has doubledaddy super powers, father of Hugo and Nico, husband of Marta, *nix user, Djangonaut and open source passionate.
  • Hola, perdona que te corrija, pero CSS es un lenguaje de descripción de página. Al igual que HTML, PostScript y PDF, por ejemplo.Y eso que en PostScript si hay auténticos programas que realizan cálculos con sus bucles for y demás, pero aún así es un lenguaje de descripción de página y no uno de programación.Al menos así lo veo yo.Por lo demás un post para guardar, como siempre.Un saludo
blog comments powered by Disqus