There are more than a billion websites on the web and this number is swelling with each passing day. Human attention spans are at an all-time low. Users want a personalized experience. If they are unable to find the information they are looking for, they will abandon your website and visit your competitor’s website. Users can not wait for your website to load and you should not make them wait either. Even if you have a WordPress website, you can ensure that by getting the best-managed WordPress hosting.
How can you make your website stand out from the crowd? How can you keep your website visitors on your website for longer? These are the questions that businesses are asking and as a web designer you need to address them. Cascading Style Sheets better known as CSS help you do that by adding visual appeal to your website and make it stand out from the crowd.
If you use CSS correctly to beautify your website, you can also keep the users engaged. CSS variables and custom properties are usually used to store property values but can do much more than that. In this article, you will learn about seven different ways in which you can use CSS custom properties that you wished you knew earlier.
Complex Calculations
Professional web designers and web developers are familiar with using custom properties for storing property values, but did you know that you can also use it to store calculated values as well. You can create a calc function for this purpose. You can also use it to calculate complementary colors. If you want to calculate a relative path or relative to know variables, you can use custom property with clip-path. It can handle complex calculations easily.
.element {
–top: 20%;
–bottom: 80%;
–gap: 1rem;
–offset: calc(var(–gap) / 2);
}
.element::before {
clip-path: polygon(
calc(var(–top) + var(–offset)) 0,
100% 0,
100% 100%,
calc(var(–bottom) + var(–offset)) 100%
);
}
.element::after {
clip-path: polygon(
calc(var(–top) – var(–offset)) 0,
calc(var(–bottom) – var(–offset)) 100%,
0 100%,
0 0
);
}
Staggered Animations
Animations are a great way to keep your website visitors hooked but it is not easy to control these animations in CSS. CSS custom solve this problem for you by letting you create staggered animation and use it for multiple child elements. What’s more, you can also set the animation delay on every child element according to your needs. All you must do is to define a custom property as element index.
The problem with this approach is that you will have to assign the variable explicitly, which can become cumbersome if you are using many child elements. Two new CSS functions called sibling-count() and sibling index() are also in the pipeline, which will not only resolve this issue but can also open up new opportunities for what you can do with CSS. Although, it might take a bit longer until we see most popular browser support this feature, but you should keep an eye on it. Don’t want to wait? You can use a JavaScript library known as Splitting JavaScript.
Color Functions
Custom properties can not only store property values but can also use it store partial values. Web developers can get more control when it comes to mixing colors. Custom properties do a great job when it comes to handling CSS color functions. You can even calculate complementary colors and manipulate colors with custom properties. Here is how you can create a color function HSLA.
.some-element {
background-color: hsla(
var(–h, 120),
var(–s, 50),
var(–l, 50),
var(–a, 1)
);
}
.some-element.darker {
–l: 20;
}
Responsive Grids
What makes CSS custom properties special is its ability to make complex grid layout easier to manage. Let’s say you created a 4-column grid and want to change it to 8 column grid. The good news is that you won’t have to update the number of columns every time and you can use custom properties instead. This even works well if you are working with more complex grid. What’s more, it is not limited to grids either as you can implement it for item placement and for tracking the size.
:root {
–noOfColumns: 4;
}
@media (min-width: 60em) {
:root {
–noOfColumns: 8;
}
}
.grid {
display: grid;
grid-template-columns: repeat(var(–noOfColumns), 1fr);
}
Vendor Prefixes
Some web browsers forces developers to enter vendor prefixes when using properties like clip-path. If you are stuck in a situation where you must write vendor prefixes, you will have to change the property value but also change it in prefixed property too. Custom CSS properties save you from this hassle and you will have to only change the property value once. This makes your life easy and save a lot of your time too. Just make change at one place and it will be reflected everywhere.
.some-element {
–clip: polygon(0 0, 100% 0, 50% 100%, 0 100%);
-webkit-clip-path: var(–clip);
clip-path: var(–clip);
}
Repeated Values
CSS elements that has consistent value at the top padding but same values for other sides are difficult to write, especially if you must change the padding values manually. By using custom properties, you only must make changes to padding at one place. If there is a single value that can be used throughout your website, you can assign the value to a variable partially, config file or our design tokens.
Here is how you can adjust padding values:
.some-element {
padding: 150px 20px 20px 20px;
}
@media (min-width: 50em) {
padding: 150px 60px 60px 60px;
}
Shorthand Properties
Web developers who are using a shorthand property like animation will have to change one value for a different element then write the property from scratch. This will increase the chances of errors and makes maintenance complicated. CSS custom properties help you overcome this issue by letting you change only one value in shorthand property which is much easier than changing values at multiple places.
How do you use CSS custom properties? Let us know in the comments section below.
