A big part of building an application is making it aesthetically pleasing and easy on the eyes. This ensures that users will have an easy time navigating the application as well as just overall having a good time looking at the contents.
Issue to address
A common issue in using CSS to style applications is that there are plenty of ways to specify things.
Size
For example, we can use px, em, rem and % to address sizes. If we aren't careful, we will end up with px for some text and em for others. And when we have nested div's we may also have uncontrollable em sizes too!
colors
When creating an application, the colors we choose to use will have a great impact in the overall theme and feeling a user experiences when looking at the contents. Picking the right sets of colors is very important, and keeping the colors consistent is even more important.
This brings us to the topic of theming in CSS. Theming essentially means using a set of reusable values throughout our stylesheets, offering flexibility, maintainability and consistency. Not only does it make our applications look clean and intentionally designed, it also makes it easier to manage new changes and be more dynamic.
Creating CSS Variables
To create CSS variables, we simply have to use the following code
:root {
/* Colors */
--background-color: #5C6F68,
--primary-color: #A4F9C8,
--secondary-color: #A7FFF6,
--tertiary-color: #95D9C3,
/* Sizes */
--s1: 12px,
--s2: 16px,
--s3: 20px,
--s4: 32px,
--s5: 48px
}
With these CSS variables setup, we are now able to stick to a set of standardized colors and fonts. To access the variables, all we have to do is call these variables from elsewhere when we need it. For example,
<!-- html -->
<body>
<h1> Hello </h1>
<p> Hello World </p>
</body>
/* css */
h1 {
color: var(--primary-color);
font-size: var(--s4);
}
p {
color: var(--secondary-color);
font-size: var(--s2);
}
By using CSS variables, our css code will look very neat and easy to read. With an much larger CSS file, using CSS variables will allow us to change the entire theme of the application if we had decided to change the color schemes. An example of such use case is the dark mode feature for certain applications, where a toggle will change the whole color scheme of all the components.
Additional CSS variables tips
When styling with CSS, we often run into problems with viewport sizes, which can ruin or distort the contents of or components. A strategy that I have learned to help mitigate these issues is the clamp() method in CSS. The clamp method takes in three arguments clamp(a minimum value, a preferred value, a maximum value). This allows the sizes of our contents to dynamically change depending on the size of the viewport, which can help us write less media-query code, and ultimately make our application look more consistent.
A quick and easy tool that we can use to create these custom CSS font size variables is the type calculator by Utopia. (https://utopia.fyi/type/calculator)
Clicking into the link, we will be able to designate the minimum and maximum viewport size, as well as how many steps of font-sizes we desire. Utopia would generate a block of CSS code that we can simply copy and paste into our CSS :root.
Make sure to check the "use CLAMP" box!
With this, we now have a curated set of font-size CSS variables we can use in any of our projects!
Benefits!
If the simple process hasn't sold you on using custom CSS variables yet, here's a list that reiterates the uses that comes with them:
- Theming and branding
- Responsive designs
- Consistent design language
- Dynamic styles
- Media queries
- Accessibility
- Dark/Light mode
- Scoped styles
- Ease of maintenance
- Grid and flex-box layouts
- Reusable components
- Debugging and customizations
Hopefully, this tutorial has been helpful for you in creating more dynamic and cleaner CSS code. Thank you for reading my blog post!
Top comments (5)
There are no such thing as Custom CSS Variables. You have CSS Variables and Custom Properties. You just mixed those two names. All CSS Variables are custom.
You're right, I made a mistake with the names! Thanks for letting me know!
Awesome that you admit it and it's great that you did change the title.
Can you add variables anywhere other than in
:root?Yes! If you add variables in the :root, it will be accessible everywhere else in the document. However, if you choose to have variables in different locations, those will only apply to its respective child elements. For example :
The P tags within container1 will be 10px while the P tags in container2 will be 20px.