Have you ever got to a point where you had to write a lot of CSS, and you got lost in your own code? If you are like me, sometimes you have to keep the hex codes of colours or text-size at a place that you can access and reuse. In this post, I will share knowledge on how to optimise your CSS using CSS Variables. CSS variables are values we define to be re-used throughout a CSS document. CSS variables also referred to as custom properties are set in one place and referenced at many places like you will set a variable and reference it in other programming languages. Declare a Custom Variable The catch here is how to declare a variable and how to access them. A variable in CSS is defined by starting it with two dashes, followed by the name of the variable. This is an example how to declare a custom variable in CSS. { : ;
} :root --main-color #54BBCE Setting a variable in the root selector is useful as it gives us the ability to access it throughout the entire document. We could define it in a selector but it will be only available to that selector, which will not be useful. How to use a custom variable? Once a custom variable has been defined, the next thing we could do is to use it in another part of the code. To use a custom variable, we use the keyword var(). { : ; : (--main-color);
} .menu width 100% background-color var The var keyword that we use to access a custom variable takes two parameters. The first one is the name of the custom property to be substituted, the second is a fallback value, which is used when the referenced custom property is invalid. { : ; : (--main-color, #999AAA);
} .menu width 100% background-color var Invalid properties and fallbacks When we substitute a property that is not valid like in the example below, the initial or the inherited value of the property is used. { : ; : ;
}
... { : red;
}
... { : (--tag-text);
} :root --main-color #da68aa --tag-text 12px .author color .author-tag color var The colour of the element with .author-tag class will be red because, the property provided to the var is invalid. Below we have an example written with CSS custom variables and without. There is a significant reduction in the number of line in code that was written. CSS with Custom properties { : ; : ;
} { : sans-serif;
} { : ; : (--main-color);
} { : ;
} { : inline-block; : ; : ;
} { : (--main-color);
} { : red;
} { : ; : solid ;
} { : (--tag-text);
} { : none; : ; : solid (--color, black);
} { : (--color);
} { : blue;
} { : red;
} { : (131, 245, 1);
} { : (1, 135, 245);
} :root --main-color #da68aa --tag-text 12px body font-family .menu width 100% background-color var .menu ul width 100% .menu ul li display color #ebeae6 width 20% .welcome h1 color var .author color .author img width 20% border 2px #0269adc5 .author-tag color var button border padding 5px border 1px var button :hover background-color var .php --color .ruby --color .js --color rgb .react --color rgb CSS without Custom properties { : ; : ;
} { : sans-serif;
} { : ; : (--main-color);
} { : ;
} { : inline-block; : ; : ;
} { : (--main-color);
} { : red;
} { : ; : solid ;
} { : (--tag-text);
} { : none; : ; : solid blue;
} { : none; : ; : solid red;
} { : none; : ; : solid (131, 245, 1);
} { : none; : ; : solid (1, 135, 245);
} { : blue;
} { : red;
} { : (131, 245, 1);
} { : (1, 135, 245);
} :root --main-color #da68aa --tag-text 12px body font-family .menu width 100% background-color var .menu ul width 100% .menu ul li display color #ebeae6 width 20% .welcome h1 color var .author color .author img width 20% border 2px #0269adc5 .author-tag color var button .php border padding 5px border 1px button .ruby border padding 5px border 1px button .js border padding 5px border 1px rgb button .react border padding 5px border 1px rgb .php :hover background-color .ruby :hover background-color .js :hover background-color rgb .react :hover background-color rgb We could reduce the size of our CSS files when we make good use of Custom properties. It also facilitates the ease of access and change across large documents. Using a value is as easy as referencing the property name. There is little we can do with CSS variables, but, because it is part of CSS you won't have to install anything to make use of it.

Optimize Your CSS Length with CSS Variables

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Advanced Testing Techniques in React: Enhancing Test Resilience and Efficiency

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Advanced Testing Techniques in React: Enhancing Test Resilience and Efficiency

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps