Custom Properties and Inheritance

3.1 Custom Properties

CSS variables, also known as custom properties, provide a powerful tool for managing styles in web development. Their usage impacts performance and code organization, improving support and CSS flexibility. Let's dive deeper into how custom properties and inheritance can affect these aspects.

What are Custom Properties?

Remember, custom properties (aka CSS variables) are values you set in CSS and then use repeatedly throughout the stylesheet. They're declared with a double dash (--) and can be used with the var() function.

Declaring Custom Properties:

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

Using Custom Properties:

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

3.2 Impact on Performance

1. Optimization Through Reuse

Using CSS variables helps avoid code duplication, as the same value can be used repeatedly, reducing the code size and simplifying maintenance.

Example:

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

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

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

2. Caching and Rendering

Browsers can efficiently cache and process CSS variables, positively impacting performance. When a variable's value changes, the browser only needs to recalculate styles once, reducing rendering load.

3. Dynamic Updates

CSS variables can be dynamically changed using JavaScript, allowing styles to update without recalculating the entire page.

Example:

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

3.3 Impact on Code Organization

Centralized Style Management

Defining CSS variables in one place allows for centralized style management, simplifying maintenance and changes.

Example

Changing a variable's value in :root automatically updates all related styles throughout the document:

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

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

Inheritance and Context

CSS variables are inherited by child elements from their parents. This allows you to set values at a higher level and use them in more specific contexts.

Example:

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

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

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

Improving Code Readability

Using CSS variables enhances code readability because variables can be named according to their function, making the code more understandable.

Example:

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

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

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

Local and Global Variables

Variables can be declared globally (e.g., in :root) or locally for specific selectors. This allows for flexible and adaptive styles.

Example:

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

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

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

3.4 Full Implementation Example

Here's an example of using variables for inheritance and local overriding:

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

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

      .container .header {
        --primary-color: #e74c3c; /* Local variable override */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Uses root variable value */
      }
    
  

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

Explanation:

• In this example, --primary-color is used for styling text in the .content element, inheriting its value from the root
• In the .header element, the --primary-color variable is overridden, using the new value

1

Task

Frontend SELF EN, level 31, lesson 2

Locked

CSS Reuse

CSS Reuse

Open

1

Task

Frontend SELF EN, level 31, lesson 2

Locked

CSS Override

CSS Override

Open