Formas avanzadas de agregar estilos

css vainilla

Tiempo de lectura:

Publicado:

Existen algunas maneras básicas de agregar estilos1 a nuestros proyectos web.

Conforme creamos proyectos más avanzados debemos usar algunas características extra:

  • Disponer de varias hojas de estilos
  • Importarlas en un orden particular
  • Aplicarlas sólo en ciertos escenarios.

@import

Dentro de cualquier hoja de estilo podemos importar otras hojas utilizando la notación @import "RUTA".

Donde RUTA es la dirección donde se encuentra la otra hoja de estilos que queremos usar.

Por ejemplo, teniendo la siguiente estructura de proyecto:

📦mi-pagina
 ┣ 📜desktop.css
 ┣ 📜index.html
 ┣ 📜main.css
 ┣ 📜style.css
 ┗ 📜utils.css

Podríamos hacer algo como lo siguiente:

index.html
<head>
  <!-- Más etiquetas -->
  <link rel="stylesheet" type="text/css" href="./style.css" />
</head>

style.css
@import "./main.css";
@import "./utils.css";
@import "./desktop.css";

De esta manera podemos controlar el orden de importación.

E inclusive agregar media queries para que sólo se activen en ciertos escenarios:

style.css
@import "./main.css";
@import "./utils.css";
@import "./desktop.css" screen and (min-width: 1024px);

Algo que debemos tener en cuenta es que este tipo de importaciones siempre deben aparecer hasta arriba en nuestra hoja de estilos.

Dentro de la cabeza de nuestro documento (<head>) podemos utilizar múltiples etiquetas <link> en el orden en el que deseemos que sean cargadas.

index.html
<head>
  <!-- Más etiquetas -->
  <link rel="stylesheet" type="text/css" href="./main.css" />
  <link rel="stylesheet" type="text/css" href="./utils.css" />
  <link rel="stylesheet" type="text/css" href="./desktop.css" />
</head>

Adicionalmente podemos utilizar el atributo media para agregar media queries y controlar los escenarios en los que será usada dicha hoja.

index.html
<head>
  <!-- Más etiquetas -->
  <link rel="stylesheet" type="text/css" href="./main.css" />
  <link rel="stylesheet" type="text/css" href="./utils.css" />
  <link
    rel="stylesheet"
    type="text/css"
    href="./desktop.css"
    media="screen and (max-width: 1024px)"
  />
</head>

Notas

  1. Formas de agregar estilos

Comentarios