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.