Tutorial CSS: Sintaxis

Selección de elementos

En CSS, la selección de elementos es una tarea fundamental que se realiza mediante diversos selectores. Los selectores permiten aplicar estilos a elementos específicos en el DOM. Los principales tipos de selectores son los siguientes:

• Selectores de tipo: Se utilizan para seleccionar elementos por su nombre de etiqueta HTML. Por ejemplo, para seleccionar todos los elementos <p>:

p {
  color: blue;
}

• Selectores de clase: Se utilizan para seleccionar elementos con una clase específica. Se identifican con un punto (.) seguido del nombre de la clase. Por ejemplo, para seleccionar todos los elementos con la clase mi-clase:

.mi-clase {
  font-size: 16px;
}

• Selectores de ID: Se utilizan para seleccionar un único elemento con un ID específico. Se identifican con una almohadilla (#) seguida del ID del elemento. Por ejemplo, para seleccionar el elemento con el ID mi-id:

#mi-id {
  margin: 20px;
}

• Selectores de atributo: Permiten seleccionar elementos en función de la presencia o valor de un atributo. Por ejemplo, para seleccionar todos los elementos con el atributo type="button":

[type="button"] {
  border: none;
}

• Selectores de descendientes: Seleccionan elementos que son descendientes de un elemento específico. Por ejemplo, para seleccionar todos los <span> que son descendientes de un <div>:

div span {
  color: red;
}

• Selectores de hijo: Seleccionan elementos que son hijos directos de un elemento específico. Se utiliza el símbolo > entre el selector del elemento padre y el selector del elemento hijo. Por ejemplo, para seleccionar todos los <li> que son hijos directos de un <ul>:

ul > li {
  list-style-type: none;
}

• Selectores de hermano adyacente: Seleccionan un elemento que es adyacente a otro elemento específico. Se utiliza el símbolo +. Por ejemplo, para seleccionar el primer <p> que sigue inmediatamente después de un <h1>:

h1 + p {
  margin-top: 10px;
}

• Selectores de hermanos generales: Seleccionan todos los elementos hermanos que siguen a un elemento específico. Se utiliza el símbolo ~. Por ejemplo, para seleccionar todos los <p> que siguen a un <div>:

div ~ p {
  color: gray;
}

• Selectores de pseudo-clase: Seleccionan elementos en función de su estado o posición en el DOM. Ejemplos incluyen :hover para seleccionar elementos sobre los que se está pasando el cursor:

a:hover {
  text-decoration: underline;
}

y :nth-child(n) para seleccionar el n-ésimo hijo de su elemento padre:

li:nth-child(2) {
  background-color: yellow;
}

• Selectores de pseudo-elemento: Se utilizan para aplicar estilos a partes específicas de un elemento, como la primera línea o primera letra. Por ejemplo, para seleccionar la primera línea de un párrafo:

p::first-line {
  font-weight: bold;
}

Estos selectores pueden combinarse y anidarse para crear reglas más complejas y específicas, ajustándose a las necesidades del diseño web. Es fundamental entender cómo utilizar y combinar estos selectores para aplicar estilos eficientemente.

Declaración de estilos

Una declaración de estilos en CSS se compone de una o más propiedades y los valores correspondientes que se aplican a un elemento seleccionado. Cada declaración aparece entre llaves {} y está compuesta por pares de propiedad-valor separados por dos puntos :. Cada par de propiedad-valor finaliza con un punto y coma ;. La sintaxis básica es la siguiente:

selector {
  propiedad: valor;
}

Por ejemplo, para cambiar el color de fuente y el tamaño de texto de un párrafo:

p {
  color: blue;
  font-size: 14px;
}

Propiedades y valores

Las propiedades en CSS definen las características de los estilos que queremos aplicar, como color, margin, padding o font-size. Cada propiedad admite uno o varios valores específicos. Algunos ejemplos de valores incluyen medidas (px, %, em), colores (red, #fff, rgb(255, 0, 0)) y palabras clave (auto, none, solid).

Propiedades simples

En una propiedad simple, cada par de propiedad y valor es independiente. Por ejemplo:

h1 {
  color: green;
  text-align: center;
}

Propiedades compuestas

Algunas propiedades, como margin, padding y border, pueden aceptar múltiples valores que se aplican a diferentes lados del elemento (superior, derecho, inferior e izquierdo) en una única declaración. Los valores se aplican en el orden en que aparecen: superior, derecha, inferior, izquierda (en sentido horario).

Por ejemplo, para establecer un margen de 10px en todos los lados:

div {
  margin: 10px;
}

Para establecer márgenes diferentes, se pueden combinar valores:

div {
  margin: 10px 5px 15px 20px; /* superior, derecha, inferior, izquierda */
}

Propiedades abreviadas (shorthand properties)

CSS permite utilizar propiedades abreviadas para simplificar la escritura de estilos, combinando varias propiedades en una sola declaración. Por ejemplo, en lugar de escribir por separado cada lado del margin, se puede usar:

margin: 10px 5px 15px 20px;

Otra propiedad abreviada común es background, que puede incluir color, imagen de fondo, posición, tamaño, repetición, etc.:

background: #fff url('imagen.jpg') no-repeat center/cover;

Valores especiales

CSS incluye varios valores especiales que son útiles en diferentes contextos:

• inherit: Hereda el valor de la propiedad de su elemento padre.
• initial: Aplica el valor inicial (predefinido) de la propiedad.
• unset: Reversiona la propiedad a su valor heredado o inicial si no puede ser heredado.
• revert: Reversiona al valor que hubiera aplicado el navegador de no estar modificada la propiedad.

Por ejemplo, para establecer que el color de un div sea heredado de su padre:

div {
  color: inherit;
}

Comentarios en CSS

Para mejor organización y legibilidad del código CSS, se pueden añadir comentarios:

/* Este es un comentario */
p {
  color: blue; /* Esto también es un comentario */
}

Los comentarios en CSS no se muestran en el navegador y sirven únicamente para anotar y documentar el código, facilitando la colaboración y mantenimiento del mismo.

Comentarios

En CSS, los comentarios se utilizan para anotar el código y proporcionar un mejor entendimiento del mismo, tanto para el autor original como para otros desarrolladores que puedan trabajar con el código en el futuro. Los comentarios también pueden ser útiles para desactivar temporalmente líneas de código durante el proceso de depuración.

En CSS, los comentarios se delimitan por /* y */. Todo lo que se encuentre entre estos delimitadores será ignorado por el navegador y no afectará al comportamiento o apariencia del sitio web. A continuación, se presentan algunos ejemplos de cómo se pueden usar los comentarios en CSS:

Añadir un comentario en una nueva línea:

/* Este es un comentario en CSS */
body {
  background-color: #f0f0f0;
}

Añadir un comentario al final de una línea de código:

h1 {
  color: #333; /* Este color es para los encabezados */
}

Desactivar temporalmente una declaración de estilo:

p {
  font-size: 16px;
  /* color: red; Este color está desactivado temporalmente */
  line-height: 1.5;
}

Documentar bloques de código o secciones completas de un archivo CSS:

/* 
======================
Sección Principal 
======================
*/
main {
  width: 80%;
  margin: 0 auto;
}

Es importante mencionar que los comentarios no son anidados. Esto significa que no se puede iniciar un comentario dentro de otro comentario. Por ejemplo, el siguiente código desactivará todo el comentario exterior y no reconocerá el comentario interno:

/*
  Este es un comentario exterior
  /* Este es un comentario interior no permitido */
*/

Debido a que usar comentarios incorrectamente puede llevar a errores de sintaxis, es esencial utilizarlos adecuadamente para garantizar que el código CSS sea validado correctamente y mantenga la funcionalidad esperada. A pesar de que los comentarios no afectan el rendimiento del sitio web ya que son ignorados por el navegador, mantener un uso claro y conciso de los mismos ayuda a la mantenibilidad y colaboración en equipo.

Selectores

Los selectores en CSS permiten especificar los elementos HTML a los que se aplicarán determinadas reglas de estilo. A continuación, se abordarán algunos selectores más avanzados y combinaciones de los conceptos previamente mencionados.

Selectores de atributo avanzado

Los selectores de atributo pueden usarse de maneras más complejas para aplicar estilos a los elementos según la presencia y el valor de sus atributos.

• Selector de atributo con contenido específico: Este selector se utiliza para seleccionar elementos cuyo atributo contiene un valor específico. Usa el operador *=. Por ejemplo, para seleccionar todos los elementos a (enlaces) que contienen "ejemplo" en su atributo href:

a[href*="ejemplo"] {
  color: orange;
}

• Selector de inicio de atributo: Selecciona elementos cuyo atributo comienza con un valor específico. Usa el operador ^=. Por ejemplo, para seleccionar todos los enlaces a que empiezan con "http":

a[href^="http"] {
  text-decoration: none;
}

• Selector de fin de atributo: Selecciona elementos cuyo atributo termina con un valor específico. Usa el operador $=. Por ejemplo, para seleccionar todos los enlaces a que terminan con ".pdf":

a[href$=".pdf"] {
  font-weight: bold;
}

Selectores de pseudo-clases avanzados

Las pseudo-clases permiten seleccionar elementos en función de su estado dinámico, ofreciendo gran flexibilidad en el diseño CSS.

• :not(selector): Selecciona todos los elementos que no coinciden con el selector especificado. Por ejemplo, para seleccionar todos los input que no son de tipo submit:

input:not([type="submit"]) {
  border: 1px solid #ccc;
}

• :nth-of-type(n): Selecciona el enésimo hijo de su tipo dentro de su elemento padre. Por ejemplo, para seleccionar el tercer li de cada ul:

ul li:nth-of-type(3) {
  color: purple;
}

• :first-of-type y :last-of-type: Seleccionan el primer y último hijo de su tipo dentro de su elemento padre. Ejemplo para seleccionar el primer p de cada div:

div p:first-of-type {
  font-style: italic;
}

div p:last-of-type {
  font-weight: bold;
}

Selectores de pseudo-elemento avanzados

Los pseudo-elementos permiten aplicar estilos a partes específicas de un elemento, más allá de las típicas ::before y ::after.

• ::selection: Personaliza el aspecto de la parte seleccionada del texto dentro de un elemento. Por ejemplo, para cambiar el fondo de cualquier texto seleccionado:

::selection {
  background-color: #b3d4fc;
  color: #000;
}

Combinadores avanzados

Los combinadores se utilizan para seleccionar elementos que están en una relación específica con otro elemento.

• Combinador de columna (||): Se utiliza principalmente en CSS grid para seleccionar columnas específicas cuando se trabaja con estructuras de tablas o grids. Por ejemplo, para seleccionar las columnas adyacentes a colgroup:

colgroup || col {
  background-color: lightgrey;
}

Selectores de estado

Estos selectores ayudan a estilizar elementos en función de su estado, como :enabled o :disabled.

• :enabled y :disabled: Seleccionan elementos de formulario que están habilitados o deshabilitados, respectivamente. Por ejemplo, para estilizar todos los input habilitados:

input:enabled {
  background-color: #fff;
}

Y para estilizar todos los input deshabilitados:

input:disabled {
  background-color: #eee;
}

• :checked: Selecciona los elementos que están en estado marcado, como checkbox o radio:

input[type="checkbox"]:checked {
  background-color: #2196F3;
}

El conocimiento de estos selectores avanzados y combinaciones permite crear reglas CSS más precisas y eficientes, facilitando diseños más complejos y dinámicos. Es crucial entender su correcta aplicación para mejorar la mantenibilidad y la eficacia de los estilos en un proyecto.

Agrupación de selectores

La agrupación de selectores en CSS permite aplicar el mismo conjunto de reglas de estilo a múltiples elementos sin necesidad de repetir la declaración de estilos para cada elemento individual. Para agrupar selectores, se utiliza una coma , que separa cada selector.

Por ejemplo, si desea aplicar el mismo conjunto de estilos a todos los elementos <h1>, <h2> y <h3>, puede agrupar estos selectores como sigue:

h1, h2, h3 {
  color: darkblue;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

Esto es equivalente a:

h1 {
  color: darkblue;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

h2 {
  color: darkblue;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

h3 {
  color: darkblue;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

La agrupación de selectores no solo ayuda a mantener el código más limpio y conciso, sino que también facilita el mantenimiento, ya que cualquier cambio en el estilo solo necesita hacerse en un lugar.

Agrupación de selectores con distintas combinaciones

Puede agrupar selectores de diversos tipos y complejidad. Por ejemplo, se pueden agrupar selectores de clase, ID, tipo y atributivos:

#menu, .boton-expandir, div.articulo, [type="submit"] {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  padding: 10px;
}

En este ejemplo, se aplica el mismo estilo a un elemento con ID menu, a los elementos con clase boton-expandir, a todos los elementos <div> con clase articulo y a todos los elementos cuyo atributo type es "submit".

Agrupación de selectores de pseudo-clases y pseudo-elementos

También es posible agrupar selectores que utilizan pseudo-clases y pseudo-elementos para aplicar estilos consistentes a diferentes estados del elemento:

a:hover, a:focus, a:active {
  color: red;
  text-decoration: underline;
}

Aquí, a cada enlace (<a>) se le aplicará el mismo estilo cuando esté en estado :hover, :focus o :active.

Mejores prácticas

Legibilidad: Asegúrese de que la agrupación de selectores no comprometa la legibilidad del código. Agrupar selectores que tienen poca o ninguna relación puede dificultar el mantenimiento futuro.

Consistencia: Mantenga la agrupación de selectores consistente para mejoras globales del estilo de su código y facilitar los cambios masivos en el diseño.

Eficiencia: Aproveche la agrupación para reducir el tamaño del archivo CSS y aumentar la eficiencia al evitar la repetición innecesaria de reglas de estilo.

Agrupar selectores es una técnica sencilla pero muy útil que optimiza y simplifica la gestión de estilos en CSS, ofreciendo un código más limpio y fácil de mantener.

Unidades de medida

En CSS, las unidades de medida son fundamentales para definir dimensiones, márgenes, rellenos y otros aspectos relacionados con el tamaño y la posición de los elementos. Existen varias unidades que se pueden utilizar, divididas principalmente en dos categorías: unidades absolutas y unidades relativas.

Unidades absolutas

Las unidades absolutas se definen de manera fija y no cambian en relación con otros elementos o propiedades del documento. Algunos ejemplos son:

• px (píxeles): La unidad más común, basada en la visualización en pantalla. Un píxel es el tamaño más pequeño de una pantalla.

.caja {
  width: 200px;
  height: 150px;
}

• cm (centímetros): Utilizados principalmente en medios impresos.

.banner {
  width: 10cm;
}

• mm (milímetros): Similar a los centímetros, pero con mayor precisión.

.marco {
  border-width: 2mm;
}

• in (pulgadas): Común en medios de impresión.

.poster {
  width: 8.5in;
  height: 11in;
}

• pt (puntos): Hay 72 puntos en una pulgada. Utilizados en tipografía.

.texto {
  font-size: 12pt;
}

• pc (picas): Una pica equivale a 12 puntos.

.titulo {
  font-size: 1pc;
}

Unidades relativas

Las unidades relativas se definen en relación con otra propiedad o elemento del documento, ofreciendo más flexibilidad y adaptabilidad a diferentes tamaños de pantalla y dispositivos.

• % (porcentaje): Basado en el tamaño del elemento padre.

.columna {
  width: 50%; /* 50% del ancho del elemento contenedor */
}

• em: Relativo al tamaño de la fuente del elemento contenedor.

.parrafo {
  font-size: 1.5em; /* 1.5 veces el tamaño de la fuente del elemento padre */
}

• rem: Relativo al tamaño de la fuente del elemento raíz (html).

.boton {
  margin: 2rem; /* 2 veces el tamaño de la fuente definida en el elemento raíz */
}

• vw (viewport width): Unidades de ancho basado en el tamaño de la ventana gráfica (1vw = 1% del ancho de la ventana).

.ancho-completo {
  width: 100vw;
}

• vh (viewport height): Unidades de altura basado en el tamaño de la ventana gráfica (1vh = 1% de la altura de la ventana).

.alto-completo {
  height: 100vh;
}

• vmin y vmax: Relativos al tamaño mínimo o máximo entre el ancho y la altura de la ventana gráfica.

.cuadro {
  width: 50vmin; /* 50% del tamaño menor entre el ancho y la altura de la ventana gráfica */
}

.rectangulo {
  height: 80vmax; /* 80% del tamaño mayor entre el ancho y la altura de la ventana gráfica */
}

• ch: Relativo al ancho del carácter "0" en la fuente actual.

.codigo {
  width: 60ch; /* Ancho de 60 caracteres "0" */
}

Unidades avanzadas

• ex: Basado en la altura de la "x" minúscula de la fuente en uso.

.texto-peque{
  line-height: 2ex; /* Dos veces la altura de la letra "x" */
}

• fr (fracción): Exclusiva para CSS grid, donde 1fr representa una parte equitativa del espacio disponible.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1 parte y 2 partes del espacio disponible */
}

Consideraciones prácticas

Al seleccionar una unidad, es crucial considerar el contexto y el propósito del diseño. Las unidades relativas como em y rem son especialmente útiles para garantizar que el diseño sea escalable y accesible, adaptándose a diferentes dispositivos y tamaños de pantalla. Las unidades absolutas como px proporcionan un control preciso, pero pueden no ser tan flexibles en un diseño responsivo. Las unidades de viewport (vw, vh, vmin, vmax) son útiles para diseños que deben ajustarse dinámicamente al tamaño de la ventana gráfica.

!important

La declaración !important es una palabra que se puede añadir al final de una regla CSS para otorgar a esa regla la máxima prioridad, sobreescribiendo cualquier otra regla que pudiera entrar en conflicto, independientemente de su especificidad. Es una herramienta potente, pero debe usarse con precaución debido a que puede complicar el mantenimiento y la depuración del CSS.

Para aplicar !important, se coloca justo antes del punto y coma (;) que cierra la regla:

selector {
  propiedad: valor !important;
}

Ejemplo básico

Supongamos que tenemos las siguientes dos reglas para un elemento con clase .texto:

.texto {
  color: blue;
}

.texto {
  color: red !important;
}

En este caso, el texto aparecerá en color rojo debido a que la declaración con !important tiene la máxima prioridad.

Sobrescribir estilos inline

Incluso puede sobrescribir estilos inline que generalmente tienen una alta prioridad:

HTML:

<div class="texto" style="color: green;">Texto ejemplo</div>

CSS:

.texto {
  color: red !important;
}

El texto se mostrará en rojo, no verde.

Evitar uso excesivo

Aunque !important otorga prioridad, su uso excesivo es desaconsejado. Puede llevar a dificultades de mantenimiento, haciendo el código CSS más complicado de entender y modificar. Debe ser utilizado principalmente como último recurso en situaciones donde no se pueda cambiar el orden del CSS o ajustar la especificidad de los selectores.

Uso en media queries

!important se puede usar en media queries para asegurarse de que ciertos estilos específicos se apliquen en contextos de diferentes tamaños de pantalla:

@media (max-width: 600px) {
  .contenedor {
    font-size: 18px !important;
  }
}

Comportamiento con especificidad

Incluso con !important, la especificidad del selector sigue contando. Si dos reglas contienen !important, la que tiene mayor especificidad se aplica:

/* Regla con especificidad baja */
div {
  color: blue !important;
}

/* Regla con especificidad alta */
#contenedor .especial {
  color: red !important;
}

Si un <div> con id #contenedor y clase .especial existe, el color será rojo.

Evitar conflictos

Para facilitar el mantenimiento y evitar conflictos, suele ser mejor incrementar la especificidad de los selectores en lugar de usar !important indiscriminadamente:

/* En lugar de esto */
.elemento {
  color: blue !important;
}

/* Usar un selector más específico */
.padre .elemento {
  color: blue;
}

Formatos heredados y !important

!important afecta a las propiedades heredadas también. Si una propiedad que no suele ser heredada (p.ej., color) se marca como !important, cualquier hijo del elemento afectado también heredará esa propiedad con prioridad !important:

.contenedor {
  color: red !important;
}

.contenedor .hijo {
  color: inherit;  /* Heredará 'red' con !important */
}

Para evitar usos problemáticos, sigue estas buenas prácticas:

1. Documentación clara: Explica claramente en los comentarios cuándo y por qué se utiliza !important.
2. Uso limitado: Restringe su uso a casos verdaderamente excepcionales.
3. Modularidad: Revisa la estructura CSS para ver si un enfoque más modular puede resolver conflictos sin necesidad de usar !important.

En resumen, aunque !important es una herramienta válida en CSS, se debe utilizar con criterio y moderación para mantener el código manejable y predecible.

Media queries

Las media queries (consultas de medios) en CSS permiten aplicar estilos específicos dependiendo de las características del dispositivo o entorno donde se visualiza la página. Son fundamentales para el diseño responsivo, adaptando la presentación de los elementos según el tamaño de la pantalla, la resolución y otras propiedades del dispositivo.

La sintaxis básica de una media query utiliza la regla @media seguida de una o más condiciones y un bloque de estilo entre llaves {}. Por ejemplo, la siguiente media query aplica estilos solo si el ancho de la pantalla es de hasta 600 píxeles:

@media (max-width: 600px) {
  body {
    background-color: lightgrey;
  }
}

Estructura de media queries

Tipo de dispositivo (opcional): Puedes especificar el tipo de dispositivo, como screen (pantallas), print (impresoras) o all (todos los dispositivos).

@media screen and (max-width: 600px) {
  /* Estilos aquí */
}

Expresiones de media: Son condiciones que evalúan ciertas características del dispositivo, como width, height, aspect-ratio, resolution, orientation, entre otras.

@media (min-width: 800px) and (orientation: landscape) {
  /* Estilos aquí */
}

Tipos comunes de media queries

Ancho y alto del viewport

@media (max-width: 768px) {
  /* Estilos para pantallas de 768 píxeles o menos */
}

@media (min-height: 500px) {
  /* Estilos para pantallas de al menos 500 píxeles de alto */
}

Resolución de pantalla

@media (min-resolution: 300dpi) {
  /* Estilos para pantallas con al menos 300 dpi de resolución */
}

Modo de color

@media (prefers-color-scheme: dark) {
  /* Estilos para cuando el usuario prefiere un esquema de color oscuro */
}

@media (prefers-color-scheme: light) {
  /* Estilos para cuando el usuario prefiere un esquema de color claro */
}

Orientación

@media (orientation: landscape) {
  /* Estilos para pantallas en orientación horizontal */
}

@media (orientation: portrait) {
  /* Estilos para pantallas en orientación vertical */
}

Uso combinado de media queries

Las media queries pueden combinarse utilizando las palabras clave and, or, y not para crear condiciones más complejas. También se pueden agrupar media queries separándolas con comas para aplicar el mismo bloque de estilo en diferentes condiciones.

@media (max-width: 600px), (orientation: portrait) {
  /* Estilos para pantallas de hasta 600 píxeles de ancho o en modo retrato */
  body {
    font-size: 14px;
  }
}

@media not all and (min-width: 800px) {
  /* Estilos para todos los dispositivos excepto los de 800 píxeles de ancho o más */
  .sidebar {
    display: none;
  }
}

Ejemplo aplicado

Para ilustrar el uso práctico de las media queries, consideremos un diseño web que ajusta sus estilos en función del ancho del viewport:

body {
  font-family: Arial, sans-serif;
}

header {
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  header {
    background-color: #444;
  }

  nav ul {
    flex-direction: column;
  }
}

@media (min-width: 769px) {
  header {
    background-color: #222;
  }

  nav ul {
    flex-direction: row;
  }
}

En este ejemplo, la cabecera (header) y el menú de navegación (nav ul) cambian sus estilos dependiendo del ancho del dispositivo. Para pantallas con un ancho máximo de 768 píxeles, los estilos se adaptan para mejorar la experiencia en dispositivos móviles, mientras que para pantallas más grandes, se aplican estilos distintos.

Buenas prácticas

Mobile first: Diseñar primero para móviles y luego utilizar media queries para adaptar y optimizar el diseño para dispositivos más grandes.

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

Agrupación y orden: Agrupar media queries que afectan los mismos elementos y ordenarlos de manera lógica para facilitar el mantenimiento.

.elemento {
  color: black;
}

@media (max-width: 600px) {
  .elemento {
    color: blue;
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .elemento {
    color: green;
  }
}

Performance: Evitar el uso excesivo de media queries que pueden complicar el CSS y afectar el rendimiento del navegador.

Las media queries son esenciales en el diseño responsivo, permitiendo crear adaptaciones de estilo que mejoren la usabilidad y accesibilidad en una amplia gama de dispositivos y entornos.