Estilos en linea

Una de las formas de añadir estilos en CSS que siempre ha generado cierta controversia es la de los Estilos en línea o inline styles. Vamos a hablar de esta forma, sus ventajas y desventajas en este artículo.

¿Qué son los estilos en línea?

Dentro de las formas que tenemos de escribir CSS, existe un concepto llamado Estilos en linea (inline styles). Esta forma de añadir estilos se basa en escribir el CSS directamente en la etiqueta HTML a través del atributo style:

<h1 style="color:white;background-color:red">Esto es un título rojo</h1>

Como se puede ver, el estilo está incrustado en la propia etiqueta HTML, lo que ya proporciona algunas características interesantes y otras que no lo son tanto:

Ventajas

💖 No requiere archivos adicionales: Se hace desde el mismo HTML
💖 Es cómodo desde Javascript: Usando .style.color se puede obtener o cambiar

Desventajas

💔 Es fácil olvidar: Tienes que revisar el HTML para saber los estilos que aplica
💔 Es difícil reutilizar: Debes volverlo a escribir en otro .html
💔 No soporta pseudoclases ni pseudoelementos: Por ejemplo :hover o ::before
💔 No soporta reglas: media queries @media, @import o @font-face, entre otras
💔 Viola la regla de separación de responsabilidades: El HTML debe ser estructura y contenido
💔 Si necesitas sobreescribir un estilo, tienes que usar !important (o Javascript)
💔 Es poco legible si requerimos muchas propiedades
💔 Incrementa el tamaño del HTML

Cuando usar estilos en línea

Como hemos visto, las desventajas superan a las ventajas. Sin embargo, no hay que demonizar los mecanismos que tenemos a nuestra disposición, ya que en ciertas ocasiones nos pueden venir realmente bien.

Los estilos en línea son ideales en las siguientes situaciones:

1️⃣ Si necesitas estilos para un caso muy particular (una excepción)
2️⃣ Si necesitas hacer prototipos rápidos (son cómodos e instantáneos para pruebas)
3️⃣ Si necesitas valores dinámicos o sensibles a cambios (usando variables CSS)

Vamos a detenernos en este último ejemplo. Las variables CSS son ideales para utilizar en los estilos en línea, porque proporcionan información sensible a cambios, que además, depende del elemento del DOM donde han sido definidas:

<div class="container">
  <h1>Titular del elemento</h1>

  <ul>
    <li style="--color: tomato">Primer punto</li>
    <li style="--color: orangered">Segundo punto</li>
    <li style="--color: darkred">Tercer punto</li>
  </ul>
</div>

li {
  background: var(--color, grey);
  list-style-type: none;
  padding: 10px;
  color: white;
}

Observa que en este caso, hemos utilizado los estilos en línea para definir un color para cada elemento <li> del DOM. Esto simplifica mucho el código CSS y nos permite también que desde Javascript podamos cambiar el valor de alguno de ellos:

const items = document.querySelectorAll(".container li");

// Cambiamos el color del primer elemento <li>
items[0].style.setProperty("--color", "gold");

Obtenemos la lista de elementos <li> y cambiamos la variable CSS del primero a gold.

Si quieres más información sobre ellas, consulta el artículo Custom Properties: Variables CSS.

Estilos en línea vs clases de utilidad

Es importante remarcar que los estilos en línea no son lo mismo que las clases de utilidad, aunque mucha gente los confunde o piensa que son lo mismo porque comparten muchos detalles y son bastante similares.

Cuando hablamos de clases de utilidad (utility classes), nos referimos a utilizar una serie de clases CSS para aplicar un estilo particular que tiene un objetivo concreto. Por ejemplo:

1️⃣ text-center: Centra el texto
2️⃣ text-white: Color de texto blanco
3️⃣ bg-indigo: Color de fondo morado

<div class="container">
  <p class="text-center text-white bg-indigo">Hello from Manz.dev!</p>
</div>

.text-center { text-align: center; }
.text-white { color: white; }
.bg-indigo { background-color: indigo; }

Observa que aunque en este ejemplo, cada clase equivale a una sola propiedad con un valor específico, no necesariamente tiene que ser así. Las clases de utilidad pueden contener más de una propiedad (depende de quién las define) pero si que suelen ser atómicas en concepto.

Pero volviendo al tema, observa que donde hay un cambio profundo, es que tanto en las clases de utilidad como en los estilos en linea, estamos creando estilos utilitarios, es decir, pequeñas unidades que dan un estilo particular. Esto es algo que contrasta mucho con el estilo semántico que suele tener HTML y CSS, donde en lugar de esto, utilizamos clases para simbolizar conceptos o entidades y definir la apariencia y/o comportamiento visual.