Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Quick Intro to CSS variables

CSS custom properties can be set and used as variables. Let’s learn the basics of CSS variables, and how cool they can be.

They look like this:

:root {
	--accent-color: #123123;
}

And when you need to use that dark green anywhere on the site, you use the custom property inside a var() as a variable like this:

h2 {
	color: var(--accent-color);
}

It works exactly like a CSS value, but controlled in one spot, and that means you can change it any time to change all instances where it’s used. It’s super useful. Especially in the long run when you are developing repeated templates, following strict color schemes, or even making your own development workflow.

Just one thing we need to cover before we move on.
PLEASE NOTE: CSS custom properties do not work on IE11. If your client’s user base is less than 2% for IE11 on smaller sites or less than .5% for sites with huge traffic, then you’re ok (those are just the numbers I’ve seen large companies use when making that decision). Otherwise, you’re going to have to use regular values. If you still want to be able to make your own CSS frameworks, then consider learning SASS. You can change the variables and then compile it to work on IE11. (Regardless of IE11, SASS is also a great syntax to learn, so consider learning it. It works with CSS variables as well.)

OK, back to the modern web.

Now for the rest of the world who either used IE11 to install Chrome or Firefox, we can talk about CSS variables.

The video

Global properties

When defined in the :root, the properties apply literally to the root. Which means the whole html document, or simply put, the whole page. For most websites, including WordPress, the CSS file will probably be loaded in the and will be in the first few lines of the file, so there’s no problem getting it to apply to every part of the whole website.

Let’s have a look at a quick example.

:root {
	--body-color: blue;
	--accent-color: red;
	--line-height: 1.2;
	--margin-unit1: 6rem;
}
h2 {
	font-size: 2rem;
	margin-top: var(--margin-unit1);
	margin-bottom: calc(var(--margin-unit1) * .25);
}
p {
	font-size: .9rem;
	margin: 1em 0;
}
h2, 
p {
	line-height: var(--line-height);
}
.txt-color_accent {
	color: var(--accent-color);
}
.txt-color_body {
	color: var(--body-color);
}

Let’s break that down.

A certain color has been defined in the root dubbed “accent color,” and “body color.” The default line height (leading in typography terms) is defined alongside as my favorite unit, the 6rem, as a base unit 1.

We then proceed to use those custom properties as variables in h2, p, and some classes.

Please note that the variables can even be used inside a calc.

If at any time, we need to change any styling, such as the accent color, then all we need to do is change it in the root, and voila, done.

So that’s pretty simple, right? How does that work in real-life WordPress page builder terms? I know most of my readers use a page builder of some kind or another, so let’s see how it works there.

For Beaver, Divi, and Elementor, you can use a child theme to load up the CSS file, and you can just add the custom properties at the beginning of the file. For Oxygen, you can enqueue the CSS file with a plugin, or you can add a whole file in the builder.

Once you have the custom properties and the classes that use them as variables so you can easily toggle multiple styles all set up, it’s time to implement it.

Let’s say you have the HTML set up like this:

<section class="ai-section ai-padding_v1">
	<div class="ai-row ai-container ai-flex">
		<div class="ai-col ai-col_1-2 ai-col_img">
			<img src="/url/image_name.jpg" alt="yo image">
		</div>
		<div class="ai-col ai-col_1-2 ai-col_txt">
			<h2 class="txt-color_accent">
				This is the h2
			</h2>
			<p class="txt-color_body">
				This is the body text. Lorem ipsum something something dolor, yada yada yada. 
			</p>
		</div>
	</div>
</section>

Here’s the JSfiddle that will show how it looks. (note: I added some extra bits for the image to show as a gray block, and the layout stuff is not added so it just stacks.)

Then you can probably see that the h2 and p will all be colored as per their assigned classes.

You can see that once you write the CSS to be controlled with selectors (in this case, classes), you can easily add the classes to the modules throughout the builder of your choice, and have a centralized (and very detailed) settings panel.

Feel free to fork the fiddle and… fiddle around with it.

So that’s great.

However, you can take it a step further and do even cooler stuff with…

Local properties

Yeah, you read that right. CSS variables can have local properties. Simply put, you can define them inside other selectors besides :root. Have a look at this CSS:

:root {
	--body-color: #222;
	--body-color-inv: #eee;
	--accent-color: red;
	--accent-color-inv: yellow;
	--light-bg: #eee;
	--dark-bg: #000;
}
.section-color_reg {
	--section-bg: var(--light-bg);
	--section-accent-color: var(--accent-color);
	--section-body-color: var(--body-color);
	background-color: var(--section-bg);
}
.section-color_inversed {
	--section-bg: var(--dark-bg);
	--section-accent-color: var(--accent-color-inv);
	--section-body-color: var(--body-color-inv);
	background-color: var(--section-bg);
}
.txt-color_accent {
	color: var(--section-accent-color);
}
.txt-color_body {
	color: var(--section-body-color);
}

Soooooo… this is a bit more interesting , isn’t it?

We’ll only be focusing on colors at the moment, but everything else would work the same.

Let’s break it down.

In the root, we define all the colors we’ll need later down the road.
There are two separate classes, each with new custom properties defined, and they use a predefined custom property as a variable.
The text colors are defined with the variables that would have been defined in its parent element.
And the children inherit the custom property from its parent.

Here’s the html that you can try it with:

<section class="ai-section section-color_reg">
	<div class="ai-row ai-container ai-flex">
		<div class="ai-col ai-col_1-2 ai-col_img">
			<img src="/url/image_name.jpg" alt="yo image">
		</div>
		<div class="ai-col ai-col_1-2 ai-col_txt">
			<h2 class="txt-color_accent">
				This is the h2
			</h2>
			<p class="txt-color_body">
				This is the body text. Lorem ipsum something something dolor, yada yada yada. 
			</p>
		</div>
	</div>
</section>
<section class="ai-section section-color_inversed">
	<div class="ai-row ai-container ai-flex">
		<div class="ai-col ai-col_1-2 ai-col_img">
			<img src="/url/image_name.jpg" alt="yo image">
		</div>
		<div class="ai-col ai-col_1-2 ai-col_txt">
			<h2 class="txt-color_accent">
				This is the h2
			</h2>
			<p class="txt-color_body">
				This is the body text. Lorem ipsum something something dolor, yada yada yada. 
			</p>
		</div>
	</div>
</section>

Have a look at the preview (again, nothing for layouts except a quick img block)

Just run that with the css in a style tag and you’ll be able to see it run. Or just check out this fiddle and fork it.

Did you get it to work? Coolio.

What this means for us

Now what kinds of awesome potential does this open up for us? Well, this means that we can define whole sections and layouts using second-tier variables that are once removed from the root and all we need to do is change things in the root to drastically change whole layouts and color schemes.

Think of it like this:
Define everything you need in root > mid-level element defines its children’s styles > children are only defined with properties inherited from mid-level elements

You can easily define stuff like font families, flex properties, spacing/sizing units, etc, and they can all be controlled with one class!

Even better, you can write your CSS to inherit styles directly from the theme or plugin, and that means the settings from the plugin/theme will also control your custom code styles! That’s pretty awesome, right?

If you need to override the builder’s CSS that defines what you’re writing to be able to write local properties, you can use an id in front of the mid-level elements like this:

#builder .section-color_reg {
	--section-bg: var(--light-bg);
	--section-accent-color: var(--accent-color);
	--section-body-color: var(--body-color);
	background-color: var(--section-bg);
}

That’ll usually take care of things. Of course, change the #builder to whatever id the theme or page builder is using. If you need help finding the right one, have a look at the bottom of this post about setting responsive typography, or learn how to inspect the frontend with this (virtually) free course.

Want to learn more?

Want to learn how to read and write CSS in record time? The CSS crash course can do that for you.

Want to learn some CSS, but you’re not sure how to start? I have a course that covers everything from beginner to expert.

I have a lot of courses covering lots of topics at different price points so come have a look.

Would you like to focus on just the design part?

Come check out my web development agency. We can be your in-house web development team, and you can focus on your design, and we can solve all your problems for you. Super easy peasy lemon squeezy.

You charge the client for your design work and our development work. Add some management time, and you make your money without the development stress, and the client gets a great site.

That's what most people would call a win-win-win situation.

Come Check Us Out

    Join us on Discord!

    Come join us on Discord. It's a very safe space for designers and developers to hang out and share info and ideas!

    Click this link to start!

    The Occasional Newsletter

    Hi! Please consider signing up for my newsletter for... the occasional email about news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

    You will also get a 10% discount coupon in your inbox as soon as you sign up!




    Default image
    PK

    Hi, I'm a front-end WordPress developer, and UI/UX designer living in Australia, and I made this website to share thoughts and tips about web design and everything related to it. If you want to work with me come check out my web development agency.

    Articles: 82

    Leave a Reply

    Your email address will not be published.