Koyyiko
New member
- Joined
- Aug 22, 2022
- Messages
- 17
- Reaction score
- 0
Variables, best defined as CSS variables, reduce the same value across the website on different occasions. You can use it in cases opposite to using the !important keyword.
For example, we use !important when only a couple of properties need to be changed. At the same time, we use variables when only a couple properties are the same (font-size or color) and others differ according to their section. This is not a hard and fast rule but a good way to remember. So consider yourself applying 20px everywhere across the website for different sections as a font-size.
A change in this value can increase the maintenance and debugging cost and waste a lot of time. So instead, we can just declare a variable with a value of 20px and use that variable everywhere. Then, next time any changes occur, we can change the variable value, and all our changes will be reciprocated throughout the page.
The following HTML code implements the same use case as discussed above,
CSS variables are an extremely efficient method to make your code more maintainable.
For example, we use !important when only a couple of properties need to be changed. At the same time, we use variables when only a couple properties are the same (font-size or color) and others differ according to their section. This is not a hard and fast rule but a good way to remember. So consider yourself applying 20px everywhere across the website for different sections as a font-size.
A change in this value can increase the maintenance and debugging cost and waste a lot of time. So instead, we can just declare a variable with a value of 20px and use that variable everywhere. Then, next time any changes occur, we can change the variable value, and all our changes will be reciprocated throughout the page.
The following HTML code implements the same use case as discussed above,
Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Position Absolute</title>
</head>
<style>
:root {
--my_font: 20px;
}
.class1 {
font-size: var(--my_font);
}
.class2 {
font-size: var(--my_font);
}
</style>
<body>
<h2> I am Heading #1 </h2>
<h2 class = "class1"> I am Heading #2 </h2>
<h2 class = "class2"> I am Heading #3 </h2>
</body>
</html>CSS variables are an extremely efficient method to make your code more maintainable.