I see that I have been on the right track with using custom properties. I am a full stack developer that currently has a task of remaking all of the front end design so I'm still learning CSS and it's been wonderful. Your videos have been very helpful for me on this new design journey
I'm quite new to using CSS custom properties. So it took me a while to see where you were going with this. But the payoff was awesome. Thanks for your consistently great content.
Sorry if I’ve missed it, but you should do a video on the power of custom properties in media queries. I’ve been using them in my production code and blowing my peers’ minds! I love how much markup and time they save me. It’s so simple yet powerful! I love the idea in this video, by the way. It’s such a simple yet advanced technique.
Finally, CSS videos which discuss more advanced concepts! Thank you! I have tried to find content like this for a while and kept running into basic tutorial content from other channels.
Took me a while (about 1h30) to understand what you meant, honestly. I watched the video twice to understand - first just watching, second after trying to code it myself. Basically what you mean is: have your default colors set to properties, but actually never use them directly in your code. Instead, set aliases to them and use those - this way, you can easily change the theme of whatever you want and make the code more reusable. I'm gonna have to play with that more to really get used to it, especially with properly naming my properties to make my code more readable. That's so amazing, honestly! Thank you for showing this!
hmm, learned something new again. I just found this css would work, which is kind of counter intuitive to me. :root { --bgColor: green } body { background-color: var(--bgColor); --bgColor: red; } In the body, the background color did change to "red", because of "--bgColor: red". I thought, or I misunderstood that css is line by line, like other programming language, which "--bgColor: red" would not work as it comes after "background-color: var(--bgColor). It looks like we reassigned a new value to a variable after it is being used, which should not work in other programming language. I would have it well remembered. Thanks Kevin.
great video! custom props are super useful and this is a good explanation of a relatively complex use case for them. one note, [class*="theme-"] would match elements with classes with 'theme-' in the middle (e.g. foo-theme-bar) as well as classes that start with it. i think using [class^="theme-"], [class*=" theme-"] would fix that (note the space in the last string)
I'm a big fan of your channell and wanted to tell you that today I got to use this at work, while creating a light/dark theme styling. Using custom properties and a single class that I add to the body I managed to take care of all the styling I needed. Thank you for all of your wonderful work
[class*="theme-" ] great use of attributes. I did theme changes by using js to add remove stylesheets containing lists of custom properties, but your way looks a lot more efficient.
Thank you for teaching the VS Code shortcuts as well. It's never important enough for me to look them up, but it's nice to be told how - I'll tend to remember it better.
Can you do a comparison between this approach and just a regular class approach when using LESS or SASS? Because the way I see it, it's just the same thing, reusable variables except you don't need to use a CSS pre-processor. I got this impression because I've done the same thing in SASS. The idea is that each theme is under a class, theme-dark, theme-dim, theme-light
I would have used a data-attribute for the theme, so it's more specific. Plus, for the text color, in contraposition with background, I like to use foreground: it makes really easy to work with abbreviations (i.e.: --brand-fg, --brand-bg) and helps with memory because don't have to remember if called it color, text, text-color or whatever the name is!
I love your videos, I always learn new things. While custom properties are very useful, the property naming that you used in this video didn't make sense to me at all. As you noted, you can use these for colors, font-sizes, etc... so why not prefix any of the color properties with "--cls-". Not doing so just makes those property names pretty confusing. I feel like that better property naming would make this video more relatable/understandable.
well, that's the nice thing is you can do them however you want! I am of a fan of prefixing colors and other things, but I just sort of freelanced it on this one.
Hi there Kevin, I really appreciate all your content. I think I am missing something here, probably too tired, but in the example you showed, did we just basically used custom properties to rename some actual properties and that's it? I mean, other than using other custom properties as values, which is the only use case I ever considered until now (anything like property: var(--something)).
I think the key is that you're redefining properties within the context of an element. ALL .tier elements have the --bg background but the value of --bg is changed depending on the theme. Thus avoiding redefining .tier styles for every variant. Note that the ::root custom properties used here could be described as the 'palette' and the ones defined in body are the implementation of the palette. With this method we can define our colour palette, then construct our themes. We can then use the themes wherever by simply adding the class name to the element. You are right to point out that we can skip the palette step and just define the colours in each theme but the separation is convenient plus there might be cases where you want to use a ::root property outside of a themed element.
I really would enjoy a video diving deeper into these and as another commenter said, power of custom props in media queries. Not sure why but for this vid it has not really clicked for me yet 😅
Huh, turns out I accidentally kinda implemented this already! I love dark themes as much as possible so I used that first but inspired by your video on the dark/light mode button on Google's websites I made a few themes and then used js to switch which ones were used (jankily I'll admit), also adding media queries for system prefs. I didn't know you could define one custom prop as another though, I'll go back and streamline everything with that! The that wildcard class selector is very cool though, could you do a video on really rare and out there selectors at some point, that seems really powerful!
Thanks so much for explaining these custom properties Kevin. I have a small query: I'm not quite joining the dots understanding where the system identifies the basis of the custom properties. For example, your custom properties are in the 'body', but where is var(--color-black); or var(--color-brand), (for example), identified so the system (CMS) knows what the actual color is to be; ie hex or hsl etc? Is that all defined at the :root in the CSS?
great!! didn't know that you can do that on CSS, what do you think about pure CSS vs SCSS for example, is better doing this instead of nesting selectors like on SCSS?
ok was trying to make a component library using the method and i have go some problems like if you pick a theme, you have one box color one text color but what if there are other boxes inside that box, and other boxes in those boxes they need to have an some how inverted theme i was managed to to and made css toggle between them at every nested level i still had some problems like it wasnt flexible this time, like the person who is codding had to know names of many custom variables to edit them so it wasnt a good option but im also thinking about other solution, using display: contents and i think i found the solution while typing these, thanks
Hello, is there a build tool to detect misspelled or undefined CSS custom properties within a entire large project using a JS Framework in a similar fashion Sass fails? So far I can only detect same component undefined variables using StyleLint and VSCode. Any alternatives, to spot them?
Powerful concept. The same can be applied to JavaScript to switch on and off a certain custom properties with certain clicks or conditions. Can you do a video explaining how we can easily switch the webpage view from light mode to dark mode and vice versa? I think custom properties will also be helpful in this case.
Not sure to get the point of why to set var in var when you can do the same thing with the [class*=" "] { ... } just with the var coming from root {} so without an extra "var layer" that dont seem to have any point tbh
A few days ago you uploaded a video about SASS, but I have a doubt, how do I do to not have the files so heavy, only with the node_modules folder is very big.
Kevin, I have learned a lot about CSS from your videos so thank you. I have one request for you can you make a video about theming in CSS and SASS? What is your opinion do we need to load a separate file in DOM for every theme, or we can have it all in our styles.css file. Do we need to use mixins if we are using SASS and do you use "prefers-color-scheme" for your works? Thank you in advance.
It depends on the level of theming that you're after. If it's light/dark, then I think a media query is perfect, but you should still allow users to switch it if they want to. Sass does make that very easy to do which is nice :) I'd tend to have a single CSS file with everything for that, so a new file doesn't have to load on theme switch or something. It is a bigger CSS file, but it shouldn't be that much bigger really, when it's just colors.
Is having to many classes on one element considered bad practice? For example 5-6 or even up to 10 utility classes on one element. And why is every hosting plan called "free" (marketing trick)?
As Pietro said, it's not "bad practice" in any way, it's more personal preference. I have some things I like using utilities for, and then having regular classes for fleshing things out from there, if not it feels a bit like writing inline css, heh. And there are good free hosts out there, like Netlify and Vercel, and probably a few others :)
I have been programming for over 2 decades now... Started out in 2001. HTML, CSS, Javascript, PHP... I have watched tons of videos about CSS custom properties... read about it... even used it a bit... and I STILL do not understand the use of this... why to use it... what good it is for... I fail to understand a single benefit with it. And this and other videos are not convincing to me. I guess I must be stupid or something.
I love your work but I am not sure about this one, it feels overly complicated and I am struggling to see the benefits and how this reduces complexity.
I think if the abstract pattern here is this: you have one „component“, say a form, which consists of many DOM nodes below it you want to style, say inputs, labels, hints, etc.pp. Now if this component exists in multiple variants which change a very similar set of properties (say a spacy, a normal, and a very compact variant of this form), you might want to be able to specify these varying properties at a central location instead of having a rule for every input, label, etc for each variant. So you create a class which encapsulates these properties (e.g. .form-compact) and then just point every individual element to the properties you've defined. That way you have one location to look for when tweaking a form style and one rule to define when you want a new variant. That being said, it achieves the centralization by indirection, so there is a cost attached to it. So for structurally simple components with not a lot of variants to them, e.g. when you have two kinds of buttons with a span inside them and that's it, the cost of setting up the indirection will likely outweigh the benefit of having a slightly more centralized location for the styling rules. I hope this made sense.
Kevin, I love your stuff, but? I didn't get the payoff. I'm going to have to re-watch when I've had a nights rest and focus again. Just like everything else in dev world, everything can be done 100 ways and there are probably 10 "right" ways. The issue being so WILDLY interpretative that right for you, makes ZERO sense to me. It's nuts, but, it is what it is. I'm going to ask this, in the end, when your work is done, and I as the next dev, encounters your layout and coding style (with comments of course)... Will I understand what you were doing and what I need to do to make any changes, or apply any fixes.
your videos are interesting, but you got the CSS a bit more complicated each time to me. Why use var etc when you can just write the color code or name it gets your CSS page heavier ..I see don't get why this is becoming more complex when it was already quite well done with CSS3. Most you are doing this on a small block I imagine on a whole site if you use only CSS..
I see that I have been on the right track with using custom properties. I am a full stack developer that currently has a task of remaking all of the front end design so I'm still learning CSS and it's been wonderful. Your videos have been very helpful for me on this new design journey
I'm quite new to using CSS custom properties. So it took me a while to see where you were going with this. But the payoff was awesome. Thanks for your consistently great content.
Sorry if I’ve missed it, but you should do a video on the power of custom properties in media queries. I’ve been using them in my production code and blowing my peers’ minds! I love how much markup and time they save me. It’s so simple yet powerful!
I love the idea in this video, by the way. It’s such a simple yet advanced technique.
Finally, CSS videos which discuss more advanced concepts! Thank you! I have tried to find content like this for a while and kept running into basic tutorial content from other channels.
Took me a while (about 1h30) to understand what you meant, honestly. I watched the video twice to understand - first just watching, second after trying to code it myself.
Basically what you mean is: have your default colors set to properties, but actually never use them directly in your code. Instead, set aliases to them and use those - this way, you can easily change the theme of whatever you want and make the code more reusable.
I'm gonna have to play with that more to really get used to it, especially with properly naming my properties to make my code more readable. That's so amazing, honestly! Thank you for showing this!
Nice idea! Using levels of indirection to organize and modularize theme settings. I see how this could really reduce complexity.
This is amazing. It totally changes my thoughts on how pure css can never actually be readable when it gets big. Thank you for sharing this
hmm, learned something new again. I just found this css would work, which is kind of counter intuitive to me.
:root {
--bgColor: green
}
body {
background-color: var(--bgColor);
--bgColor: red;
}
In the body, the background color did change to "red", because of "--bgColor: red". I thought, or I misunderstood that css is line by line, like other programming language, which "--bgColor: red" would not work as it comes after "background-color: var(--bgColor). It looks like we reassigned a new value to a variable after it is being used, which should not work in other programming language.
I would have it well remembered. Thanks Kevin.
My 8 Years with CSS and Still getting new perspectives on things and learning new stuff. That's the beauty of it all. Amazing content as always Sir.
great video! custom props are super useful and this is a good explanation of a relatively complex use case for them.
one note, [class*="theme-"] would match elements with classes with 'theme-' in the middle (e.g. foo-theme-bar) as well as classes that start with it. i think using [class^="theme-"], [class*=" theme-"] would fix that (note the space in the last string)
I'm a big fan of your channell and wanted to tell you that today I got to use this at work, while creating a light/dark theme styling. Using custom properties and a single class that I add to the body I managed to take care of all the styling I needed. Thank you for all of your wonderful work
[class*="theme-" ] great use of attributes.
I did theme changes by using js to add remove stylesheets containing lists of custom properties, but your way looks a lot more efficient.
I’m glad you said on Mac it “might” be command. I of course switch command / control on Macs since my thumb doesn’t bend that way 🤓
Very nice schema 💕
New greeting is nice & smooth 👌🏻👌🏻👌🏻!
Also bears saying: Thank you so much for the *uncountably many hours* you’ve saved me over the years now!
Thank you for teaching the VS Code shortcuts as well. It's never important enough for me to look them up, but it's nice to be told how - I'll tend to remember it better.
helping you to break UA-cam algorithm
Thank you Kevin, this created new ideas in my mind
Very useful, Kevin. Thanks
Can you do a comparison between this approach and just a regular class approach when using LESS or SASS? Because the way I see it, it's just the same thing, reusable variables except you don't need to use a CSS pre-processor. I got this impression because I've done the same thing in SASS.
The idea is that each theme is under a class, theme-dark, theme-dim, theme-light
I would have used a data-attribute for the theme, so it's more specific.
Plus, for the text color, in contraposition with background, I like to use foreground: it makes really easy to work with abbreviations (i.e.: --brand-fg, --brand-bg) and helps with memory because don't have to remember if called it color, text, text-color or whatever the name is!
i love following kevin.
Love your videos always, they're so detailed
Thank you Kevin
awesome & clear. Cheers Kevin
Thank you Kevin.
Amazing your videos have been very helpful
Nice knowing that I could use them this way
I love your videos, I always learn new things.
While custom properties are very useful, the property naming that you used in this video didn't make sense to me at all.
As you noted, you can use these for colors, font-sizes, etc... so why not prefix any of the color properties with "--cls-".
Not doing so just makes those property names pretty confusing.
I feel like that better property naming would make this video more relatable/understandable.
well, that's the nice thing is you can do them however you want! I am of a fan of prefixing colors and other things, but I just sort of freelanced it on this one.
Hi there Kevin, I really appreciate all your content. I think I am missing something here, probably too tired, but in the example you showed, did we just basically used custom properties to rename some actual properties and that's it? I mean, other than using other custom properties as values, which is the only use case I ever considered until now (anything like property: var(--something)).
I think the key is that you're redefining properties within the context of an element.
ALL .tier elements have the --bg background but the value of --bg is changed depending on the theme. Thus avoiding redefining .tier styles for every variant. Note that the ::root custom properties used here could be described as the 'palette' and the ones defined in body are the implementation of the palette. With this method we can define our colour palette, then construct our themes. We can then use the themes wherever by simply adding the class name to the element. You are right to point out that we can skip the palette step and just define the colours in each theme but the separation is convenient plus there might be cases where you want to use a ::root property outside of a themed element.
I really would enjoy a video diving deeper into these and as another commenter said, power of custom props in media queries.
Not sure why but for this vid it has not really clicked for me yet 😅
6:25 for self-reference
Huh, turns out I accidentally kinda implemented this already!
I love dark themes as much as possible so I used that first but inspired by your video on the dark/light mode button on Google's websites I made a few themes and then used js to switch which ones were used (jankily I'll admit), also adding media queries for system prefs. I didn't know you could define one custom prop as another though, I'll go back and streamline everything with that!
The that wildcard class selector is very cool though, could you do a video on really rare and out there selectors at some point, that seems really powerful!
Dziękujemy.
Thanks so much!
Holy shit dude, thats some cool vanilla css! Its so cool how css scopes works :)
Is there still use for this if using preprocessors (less, sass)?
This is gold
Thanks so much for explaining these custom properties Kevin. I have a small query: I'm not quite joining the dots understanding where the system identifies the basis of the custom properties. For example, your custom properties are in the 'body', but where is var(--color-black); or var(--color-brand), (for example), identified so the system (CMS) knows what the actual color is to be; ie hex or hsl etc? Is that all defined at the :root in the CSS?
Brilliant!
That's amazing Kevin
great!! didn't know that you can do that on CSS, what do you think about pure CSS vs SCSS for example, is better doing this instead of nesting selectors like on SCSS?
ok was trying to make a component library using the method
and i have go some problems
like if you pick a theme, you have one box color one text color
but what if there are other boxes inside that box, and other boxes in those boxes
they need to have an some how inverted theme
i was managed to to and made css toggle between them at every nested level
i still had some problems like it wasnt flexible this time, like the person who is codding had to know names of many custom variables to edit them
so it wasnt a good option
but im also thinking about other solution, using display: contents
and i think i found the solution while typing these, thanks
And now I hear it clearly and actually giggle a little every time now.... also noticing you might have a little trouble keeping a straight face too.
instead of [class*="theme-"]
you can do [class*=" theme-"], [class^="theme-"]
so it doesnt include things like `abctheme-b`
thank you!
already do that myself :)
Hello, is there a build tool to detect misspelled or undefined CSS custom properties within a entire large project using a JS Framework in a similar fashion Sass fails? So far I can only detect same component undefined variables using StyleLint and VSCode.
Any alternatives, to spot them?
So, essentially, what we were doing with Sass all these years but now natively supported in CSS?
so what you have done is :root properties and then you used them in body internal custom properties?
Hi Kevin, will you do TailwindCSS tutorials in the future?
I get why people like Tailwind, but it's not really my jam, so no plans for content on it.
Combining BEM with nested selectors?
Awesome
Day by Day you keep looking younger 🥰
Powerful concept. The same can be applied to JavaScript to switch on and off a certain custom properties with certain clicks or conditions.
Can you do a video explaining how we can easily switch the webpage view from light mode to dark mode and vice versa? I think custom properties will also be helpful in this case.
can you elaborate on @property -- I know it is not supported in Firefox yet, there are some amazing things that can be done with it.
Not sure to get the point of why to set var in var when you can do the same thing with the [class*=" "] { ... } just with the var coming from root {} so without an extra "var layer" that dont seem to have any point tbh
A few days ago you uploaded a video about SASS, but I have a doubt, how do I do to not have the files so heavy, only with the node_modules folder is very big.
Kevin, I have learned a lot about CSS from your videos so thank you.
I have one request for you can you make a video about theming in CSS and SASS? What is your opinion do we need to load a separate file in DOM for every theme, or we can have it all in our styles.css file.
Do we need to use mixins if we are using SASS and do you use "prefers-color-scheme" for your works? Thank you in advance.
It depends on the level of theming that you're after. If it's light/dark, then I think a media query is perfect, but you should still allow users to switch it if they want to. Sass does make that very easy to do which is nice :)
I'd tend to have a single CSS file with everything for that, so a new file doesn't have to load on theme switch or something. It is a bigger CSS file, but it shouldn't be that much bigger really, when it's just colors.
Love your channel!
.theme-wild is my new default CSS template
Those are free hosting plans with prices? So are they free or not lol?
He says hello my frontend friends😭😭😭I couldn't understand before
Amazing
Is having to many classes on one element considered bad practice? For example 5-6 or even up to 10 utility classes on one element. And why is every hosting plan called "free" (marketing trick)?
Idk if its a bad practice or no, but someone don't want to their html tag look messy maybe
When using Tailwind CSS elements can even have 20 classes. As long as the classes have good naming (like in Tailwind) you should be fine
As Pietro said, it's not "bad practice" in any way, it's more personal preference. I have some things I like using utilities for, and then having regular classes for fleshing things out from there, if not it feels a bit like writing inline css, heh.
And there are good free hosts out there, like Netlify and Vercel, and probably a few others :)
I hate having many classnames on an element. It feels like inline styling.
No, not bad practice at all. When used with Atomic Design, utility classes work extremely well. And your markup isn't clustered
Hehe that wild theme 🤣🤣
One question, do you use React?
I'm starting as Web Dev. And all the ppl what I ask they say to me that they just use React and Sass.
Are u not prefixing variables not to have collusions?
even in scss I use the css variables.
Same here :)
how it know that "--bg:" is "background-color:" ? where you call it what it is?
Check the playlist in the description that goes more into the basics of custom properties :)
10/10
I don't understand how it is working...
Check the playlist in the description that goes more into the basics :)
[class*="constructor"] {
--body: Thank
}
how is that working? you even didn't give them a name like "color: ", "background-color: ".
Well, they are applied to a color and background color in one place, and then we can change them where needed without referencing back to that :)
I have been programming for over 2 decades now... Started out in 2001. HTML, CSS, Javascript, PHP... I have watched tons of videos about CSS custom properties... read about it... even used it a bit... and I STILL do not understand the use of this... why to use it... what good it is for... I fail to understand a single benefit with it. And this and other videos are not convincing to me. I guess I must be stupid or something.
Thanks for this. I’ll stick to normal hex though.
hey kevin, can you also create an odysee channel?
it lets sync it with your yt channel automatically, you dont have to do anything else.
I love your work but I am not sure about this one, it feels overly complicated and I am struggling to see the benefits and how this reduces complexity.
I think if the abstract pattern here is this: you have one „component“, say a form, which consists of many DOM nodes below it you want to style, say inputs, labels, hints, etc.pp. Now if this component exists in multiple variants which change a very similar set of properties (say a spacy, a normal, and a very compact variant of this form), you might want to be able to specify these varying properties at a central location instead of having a rule for every input, label, etc for each variant. So you create a class which encapsulates these properties (e.g. .form-compact) and then just point every individual element to the properties you've defined. That way you have one location to look for when tweaking a form style and one rule to define when you want a new variant.
That being said, it achieves the centralization by indirection, so there is a cost attached to it. So for structurally simple components with not a lot of variants to them, e.g. when you have two kinds of buttons with a span inside them and that's it, the cost of setting up the indirection will likely outweigh the benefit of having a slightly more centralized location for the styling rules.
I hope this made sense.
Kevin, I love your stuff, but? I didn't get the payoff. I'm going to have to re-watch when I've had a nights rest and focus again. Just like everything else in dev world, everything can be done 100 ways and there are probably 10 "right" ways. The issue being so WILDLY interpretative that right for you, makes ZERO sense to me. It's nuts, but, it is what it is. I'm going to ask this, in the end, when your work is done, and I as the next dev, encounters your layout and coding style (with comments of course)...
Will I understand what you were doing and what I need to do to make any changes, or apply any fixes.
your videos are interesting, but you got the CSS a bit more complicated each time to me. Why use var etc when you can just write the color code or name it gets your CSS page heavier ..I see don't get why this is becoming more complex when it was already quite well done with CSS3. Most you are doing this on a small block I imagine on a whole site if you use only CSS..
bruh
12th comment
too much for a beginner
This video isn't meant for a beginner. If you're new to custom properties, I'd go with this video: ua-cam.com/video/PHO6TBq_auI/v-deo.html
An example of what you can do with custom properties: danziger.github.io/slotjs/
Dziękujemy.
And another one! Thanks again :D