▶️ #15 APRENDE a usar VARIABLES en CSS 😱 Curso CSS

Key Concepts:

• CSS Variables (Custom Properties)
• root selector
• var() function
• Code maintainability
• Color management in CSS

1. Problem Statement: Tedious Color Changes in CSS

• The video addresses the problem of manually changing colors throughout a website's CSS code.
• Example: A website has a specific color used for headings, links, and buttons.
• Traditional Approach: To change this color, the developer has to find every instance of the color code in the CSS and update it individually.
• This process is described as "tedious," especially in large and complex projects.

2. Solution: CSS Variables (Custom Properties)

• CSS variables (also known as custom properties) offer a more efficient solution.
• Definition: A CSS variable is a named entity that stores a value (e.g., a color code) that can be reused throughout the stylesheet.

3. Creating CSS Variables

• Variables are declared within the :root pseudo-class.
  • :root represents the root element of the document (usually the <html> element).
  • This ensures that the variable is globally accessible.
• Syntax: --variable-name: value;
  • Variable names must start with two hyphens (--).
  • Example: --dark-text: green; (defines a variable named dark-text with the value green).
• Multiple variables can be defined within the :root block.

4. Using CSS Variables

• The var() function is used to access the value of a CSS variable.
• Syntax: var(--variable-name)
• Example: color: var(--dark-text); (sets the text color to the value of the dark-text variable).
• The var() function can be used in any CSS property that accepts a value.

5. Step-by-Step Process

1. Declare the variable: Inside the :root selector, define the variable with a name and a value (e.g., --primary-color: #007bff;).
2. Apply the variable: Use the var() function to apply the variable's value to the desired CSS properties (e.g., background-color: var(--primary-color);).
3. Update the variable: To change the color, simply modify the value of the variable in the :root selector. All elements using that variable will automatically update.

6. Example Scenario

• The video uses a simple webpage with a heading, a link, and a button that all share the same text color.
• Initially, the color is hardcoded in the CSS for each element.
• The video demonstrates how to replace these hardcoded values with a CSS variable.
• By changing the variable's value in the :root selector, the color of all three elements is updated simultaneously.

7. Benefits of Using CSS Variables

• Maintainability: Easier to update and maintain the stylesheet. Changes only need to be made in one place (the variable declaration).
• Consistency: Ensures that the same color is used consistently throughout the website.
• Readability: Makes the CSS code more readable and understandable.
• Theming: Simplifies the process of creating different themes for a website.

8. Notable Quotes/Statements

• "Si tú necesitas cambiar este color a verde por ejemplo tienes dos opciones la primera es hacer el cambio en los tres lugares dentro del código debemos recorrer el código buscando dónde está el color y actualizarlo a verde y este ejemplo sencillo no implica mucho esfuerzo pero cuando estés trabajando en una empresa seguramente tendrás que programar páginas más complejas con más código y hacer el cambio se va a volver mucho más tedioso aquí es donde entran en juego las variables que es la segunda opción y la más recomendable" (If you need to change this color to green, for example, you have two options: the first is to make the change in the three places within the code. We must go through the code looking for where the color is and update it to green, and this simple example does not involve much effort, but when you are working in a company you will surely have to program more complex pages with more code and making the change will become much more tedious. This is where variables come into play, which is the second option and the most recommended.)

9. Technical Terms

• CSS Variable (Custom Property): A named entity that stores a value that can be reused throughout a CSS stylesheet.
• :root: A CSS pseudo-class that matches the root element of the document (usually the <html> element).
• var(): A CSS function that retrieves the value of a CSS variable.

10. Logical Connections

• The video starts by presenting the problem of manual color changes.
• It then introduces CSS variables as the solution.
• It explains how to create and use CSS variables with clear examples.
• Finally, it highlights the benefits of using CSS variables for code maintainability and consistency.

11. Synthesis/Conclusion

CSS variables provide a powerful and efficient way to manage colors and other values in CSS. By using variables, developers can significantly improve the maintainability, consistency, and readability of their stylesheets, especially in large and complex projects. The video effectively demonstrates the benefits of CSS variables and provides a clear and concise explanation of how to use them.