CSS Variables - Using them in the real world and a cool trick

CSS Variables rock, and in this video I take a look at why. First by looking at how they make organizing and controlling your site possible all within one location of your CSS, and then second by overwriting a variable for one part of my site, making SUPER easy to change the colors on something with only one line of CSS.
CodePen: codepen.io/kevinpowell/pen/OO...
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

[@alexanderschirmer4593]

I'd suggest you go with the basic plan. It's got all the features of the more expensive ones

[@logicunleashed]

lol

[@HeitorYT]

Lmfao

[@shayanfaghihi]

I'm at work and was feeling bored! Then I remembered I have to continue your amazing "Conquering Responsive Layout" course! And that was the time I've become full energy. Thanks again and huge regard from Iran

[@zedmeinhardt3404]

Best explanations I have found, along with practical uses. Thank you for the education!

[@manytrickpony695]

These are great videos! I'm learning so much. Thank you.

[@nonchalant8473]

Great tutorials Kevin thanks!

[@maxlawrie81]

Really cool. All beginning to make more sense!

[@mohattia]

Awesome series...can't wait till the next video

[@KevinPowell]

Thanks Mohamed!

[@rumecollins7492]

Wow i love this. Thanks sir Kelvin..

[@yisingpoo1695]

Hi kevin, I don't normally write comments but I just want to let you know that your content is AMAZING, so please continue what you are doing. Cheers!

[@KevinPowell]

Thank you so much, and don't worry, I don't plan on stopping anytime soon!

[@bambooindark1]

Yi Sing Poo yeah your are so true, I have collected many tutorial channels, but this is the few most comfortable one for me.

[@dennis2104]

The declaration of css variables is very handy. Thanks

[@KevinPowell]

They really are, glad you liked it :)

[@AmandaLucaseu]

Wow this is great - variable are so powerful

[@Emeny]

This helped me very much, thank you!

[@crooker2]

I'm always looking for ways that my clients can manipulate css through CMS settings. It was practically impossible before this (limited control with inline css but nothing really global), but css variables seems to be a good way to do this. Can't wait to play with it a bit.

[@Sam-vz7pf]

Thanks, Kevin You are one in a billons.

[@seemsas]

I like that it is native css and no tool or framework is needed. I will use this in my next project instead of gulp. Thank you.

[@KevinPowell]

Yeah, it's pretty great. Just watch out, because browser support isn't amazing (I'll be covering that with 2 videos next week), sitting at about 78% - caniuse.com/#feat=css-variables

[@misterhtmlcss]

Kevin Powell 89% now and climbing quickly I'm guessing since this video is only a few months old yeah?

[@theozonesongozone7324]

Very useful and clearly explained.

[@KevinPowell]

Glad you liked it :)

[@rhoschellyn3240]

Very useful!

[@techshab9060]

you are the my best , super , excellent , teacher

[@aikaurmat7409]

Thank you!

[@johnconnor9787]

Nice material

[@vlqz1982]

This is usefull!! Thanks

[@shayanfaghihi]

Great!!! Thank you sir

[@dennis2104]

Very usefull kevin

[@stevenwilson5556]

I know this is a super old topic but it is still relevant and it would be super-great if you could make playlists for grouped content like this because KZbin's search is so bad that it is really hard to use it to find all the videos in this series. If you could be bothered to do this, I would really appreciate! Thanks

[@DavidBailey_aka_Tigger]

That's too cool!

[@sonamuhialdeen7866]

So good tutorial

[@ritsk4338]

Awesome videos

[@isaacbaptista6207]

Can you use a custom properties to style a label that as a checkbox inside?

[@bill4824]

Thanks for the video! Should there be a comment of the variables or is :root known for the spot of var? Something like /*variables*/ above :root?

[@carpediem73]

thank you

[@Samir-50082]

Okay thank you for the tutorial, but should I use always variables in CSS or could you explain me when i need to use it.

[@nathansnow]

Great tutorial Kevin! I have one query though... Naming the variables as you did, I assume that's considered bad practice in real-world front-end development environments? Do you add comments to describe the abbreviation names etc? I know in my experience, naming things in a way that wouldn't be immediately clear to other devs is a big no no, simply because you can't guarantee you'll be the only person working on that code. For example --fw-b might be intended as "font weight bold" but could be confused for "fixed width _?_"

[@uragaiduk]

So I am currently in the middle of CSS Demystified by Kevin Powell awesome course by the way one thing I don't completely get is the variable naming convention for example --clr-neutral-900: #171717; --clr-neutral-700: #333; What do the numbers mean what's the difference between 900 and 700?

[@garvani]

-Can - and how - we store content text as a --variable in order to use it for ::before or ::after later on? -Is there a limit of how many variables to use? Oh and congrats for your very helpful videos!

[@KevinPowell]

Never thought of storing something like text.... but I just tried it out and it works... codepen.io/kevinpowell/pen/rqEeMv

[@gabiold]

It's actually a very clever idea for example for defining icons for various actions, like on delete, edit, save, cancel or similar generic action buttons or context menus in a web app.

[@jelenakrstic7203]

Hi Kevin, I like your videos, they are so good. :) I have question about: "grid-template-columns: repeat(3, 1fr)" line, if saw right...Have you some your videos about grids or some suggestion where I can learn it best? I will be grateful if you can send me this information. :)

[@KevinPowell]

I've got a handful of videos about the CSS Grid: kzbin.info/aero/PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998 That playlist is my one-off videos, which mostly explore the individual parts of how the grid works (plus a live session where I'm playing around with it for the very first time). I also have this series where I build out a one-page site with it: kzbin.info/aero/PL4-IK0AVhVjNRKd4KBrXHpNtmMvR0qYz4

[@dzintarsmagons]

I have a question. What is the purpose of redefining these variables? I mean. Why write --primary-clr: var(--secondary-clr); if you can just write color: var(--secondary-clr); ? :) thanks for the videos by the way :)

[@aetosaso]

I'm not sure, but it seems that you can change just one line of css and modify different elements. You can go with color:, but you'll need to do this in various places. (i'm new to this, so, i can be wrong)

[@syediqbalahmed3176]

great ...

[@toma1610]

You are pure CSS, right? Do you hav any video about Bootstrap? For example, how to combine properly the bootstrap css with your custom css?

[@markvador6667]

Really good job Kevin, you have an other subscriber from France! Try just to speak more slowly for me pleaaaase 😉

[@KevinPowell]

Sorry that I speak too fast! Some people complain I'm too fast, others too slow, so it's a hard to balance! I'll keep trying to keep it in mind though, I'd rather talk slower and let people speed the video up with the settings (it sounds really weird when you run it at a slower playback).

[@markvador6667]

@@KevinPowell At the speed of 0.25 you seem sooooo tired !!!! ^_^ ... but .50 is almost perfect for me :) Thanks for the tip !

[@weshuiz1325]

I dont use css out of my site but i fucked up my display name at the bowling center made a h1 b name didn't fit on screen

[@KevinPowell]

lol

[@techshab9060]

please you make a html template follow this code please mind blowing code and i dont no of this code.

[@BnBn-cf3vo]

Leave a comment

[@floraposteschild4184]

If you're "up" in the root, is CSS the Upside-Down? :D

[@younggderra-_-5094]

Could you do java tutorials i can find tutorials but i think you could teach better

[@KevinPowell]

Java, or JavaScript? I don't have any experience with Java, so I wouldn't be able to help there, sorry.

[@alancourtney476]

So who is plagiarizing you or Brad.?

[@KevinPowell]

Brad from Code College? I'd imagine we have some similar content since we focus on, more or less, the same general topic. I'd love to know which video specifically you're talking about though!

[@alebatata_]

I wish I could watch this on 2x, but 4x is too fast.