Propiedades personalizadas y herencia

3.1 Propiedades personalizadas

Las variables CSS, también conocidas como propiedades personalizadas, ofrecen una herramienta poderosa para manejar estilos en desarrollo web. Su uso afecta el rendimiento y la organización del código, mejorando el soporte y la flexibilidad del CSS. Vamos a ver más en detalle cómo las propiedades personalizadas y la herencia pueden influir en estos aspectos.

¿Qué son las propiedades personalizadas?

Recordemos, las propiedades personalizadas (también llamadas variables CSS) son valores que se pueden definir en CSS y luego usar repetidamente en todo el archivo de estilos. Se declaran utilizando dos guiones (--), y pueden usarse con la función var().

Declaración de propiedades personalizadas:

    
      :root {
        --main-color: #3498db;
        --padding: 10px;
      }
    
  

Uso de propiedades personalizadas:

    
      background-color: var(--main-color);
      padding: var(--padding);
    
  

3.2 Impacto en el rendimiento

1. Optimización del reuso

Usar variables CSS ayuda a evitar la duplicación de código, ya que el mismo valor se puede usar repetidamente, lo que reduce el tamaño del código y simplifica su mantenimiento.

Ejemplo:

    
      :root {
        --main-color: #3498db;
      }

      .header {
        background-color: var(--main-color);
      }

      .footer {
        background-color: var(--main-color);
      }
    
  

2. Caché y renderizado

Los navegadores pueden almacenar en caché y procesar las variables CSS de manera eficiente, lo que impacta positivamente en el rendimiento. Al cambiar el valor de una variable, el navegador solo necesita recalcular los estilos una vez, lo que reduce la carga de renderizado.

3. Actualización dinámica

Las variables CSS se pueden cambiar dinámicamente con JavaScript, lo que permite actualizar estilos sin recalcular toda la página.

Ejemplo:

    
      document.documentElement.style.setProperty('--main-color', '#e74c3c');
    
  

3.3 Impacto en la organización del código

Gestión centralizada de estilos

Definiendo las variables CSS en un solo lugar, puedes gestionar estilos de manera centralizada, lo que facilita su mantenimiento y modificación.

Ejemplo

Cambiar el valor de una variable en :root actualiza automáticamente todos los estilos relacionados en todo el documento:

    
      :root {
        --font-size: 16px;
        --line-height: 1.5;
      }

      body {
        font-size: var(--font-size);
        line-height: var(--line-height);
      }
    
  

Herencia y contexto

Las variables CSS se heredan a los elementos hijos desde los padres. Esto permite definir valores en un nivel superior y usarlos en contextos más específicos.

Ejemplo:

    
      :root {
        --base-font-size: 16px;
      }

      .container {
        font-size: var(--base-font-size);
      }

      .container .heading {
        font-size: calc(var(--base-font-size) * 1.5);
      }
    
  

Mejorando la legibilidad

Usar variables CSS mejora la legibilidad del código, ya que las variables se pueden nombrar de acuerdo a su función, haciendo el código más entendible.

Ejemplo:

    
      :root {
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
      }

      .primary-button {
        background-color: var(--primary-color);
      }

      .secondary-button {
        background-color: var(--secondary-color);
      }
    
  

Variables locales y globales

Las variables se pueden declarar tanto a nivel global (por ejemplo, en :root) como localmente para selectores específicos. Esto permite crear estilos flexibles y adaptables.

Ejemplo:

    
      :root {
        --global-padding: 10px;
      }

      .section {
        --section-padding: 20px;
        padding: var(--section-padding);
      }

      .item {
        padding: var(--global-padding);
      }
    
  

3.4 Ejemplo de implementación completa

Aquí tienes un ejemplo de uso de variables para herencia y reemplazo local:

    
      :root {
        --main-padding: 10px;
        --main-margin: 20px;
        --primary-color: #3498db;
      }

      .container {
        padding: var(--main-padding);
        margin: var(--main-margin);
      }

      .container .header {
        --primary-color: #e74c3c; /* Reemplazo de variable para uso local */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Usa el valor de la variable desde la raíz */
      }
    
  

    
      <div class="container">
        <div class="header">This is the header</div>
        <div class="content">This is the content</div>
      </div>
    
  

Explicación:

• En este ejemplo, --primary-color se utiliza para estilizar el texto en el elemento .content, heredando el valor desde la raíz
• En el elemento .header, la variable --primary-color se sobreescribe y se usa un nuevo valor