This is the 14th day of my participation in Gwen Challenge

background

Complex sites have a lot of CSS code and often have a lot of duplicate values.

For example, the same color value may be used in hundreds or thousands of places. If the value changes, it needs to be searched globally and replaced one by one, which is inefficient and error-prone.

Custom properties store a value in one place and reference it in many other places. Another benefit is semantic identification. For example, –main-text-color is easier to understand than #00ff00, especially if the color value is used in other contexts.

concept

Custom attributes (sometimes referred to as CSS variables or cascading variables) are defined by CSS authors and contain values that can be reused throughout the document.

Set values by custom attribute tags (e.g. –main-color: black;) Var (–main-color)**; .

advantage

When building large sites, authors often face maintainability challenges. The amount of CSS used in these pages is enormous, and in many cases a large amount of information is reused.

For example, maintaining a color scheme in a web page means that some colors appear multiple times in a CSS file and are reused. When you modify a color scheme, whether it is to adjust a color or completely modify the entire color scheme, it becomes a complex problem that cannot be made wrong, and it is far from enough to simply find and replace.

This is especially bad if you are using a CSS framework, where changing the colors requires changing the framework itself.

Using a preprocessor like LESS or Sass can be very helpful in these situations, but this approach, by adding extra steps, can add complexity to the system.

CSS variables give us some preprocessor benefits without requiring additional compilation.

The second advantage of these variables is that the name itself contains semantic information. CSS files become easy to read and understand. Main-text-color is easier to understand than #00ff00 in a document, especially if the same color appears in different files.

usage

Here are the steps to use CSS variables.

Declare variables in the CSS

We all know that before we can use a variable in JS, we must declare the table variable. The same is true in CSS.

Declare a custom property whose name starts with two minus signs (–) and whose value can be any valid CSS value. Like other attributes, custom attributes are written into the rule set as follows:

body {
    --bg-color: #7F583F;
    --color: #F7EFD2;
}
Copy the code

In the code above, two variables are declared in the body selector: –bg-color and –color.

They are no different from formal attributes like color and font size, except that they do not have a default meaning. CSS variables are also called **”CSS custom properties “** (CSS custom properties).

The selector specified by the rule set defines the visibility scope of the custom property. A common best practice is to define it under the root pseudo-class :root so that it can be accessed anywhere in the HTML document:

:root{-main-bg-color: #eee;
}
Copy the code

Custom attribute names are case sensitive, and –my-color and –my-color are considered to be two different custom attributes.

CSS uses variables

Variables are read through the var() function. The syntax is as follows:

var(custom-property-name, value)
Copy the code

  • Name (required) Variable name (begins with two dashes).

  • Value (Optional) Indicates the default value of a variable. If the variable does not exist, the default value is used.

Variable names must begin with two dashes (–) and be case sensitive!

Usage:

element {
  background-color: var(--main-bg-color);
}
Copy the code

Variables can also be used in variable declarations:

:root {
  --primary-color: #eee;
  --primary-bg-color: var(--main-bg-color);
}
Copy the code

A variable value can only be used as an attribute value, not an attribute name.

JS operates on CSS variables

In JS code, we might need to read the value of a CSS variable as follows:

const root = document.querySelector(":root");
// Set CSS variables
root.style.setProperty("--main-bg-color"."red");
// Read CSS variables
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// Delete CSS variables
root.style.removeProperty("--main-bg-color");
Copy the code

conclusion

These are some basic concepts about CSS variables and how to use them, more details to follow!

Flexible use of CSS variables not only improves productivity, but also makes your code more readable and maintainable.

~

~

To finish this article

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Everybody is good! I am the author of programming Samadhi, yi Wang, my public account is “programming Samadhi”, welcome to pay attention to, I hope you can give me more advice!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!