 Hello my friend and friends. Today I have an important message to share with you and it's important enough I'm fighting a cold right now and all of that I'm feeling kind of miserable but I felt like it was worth it to issue sort of a public service announcement of sorts where I want you to stop wasting your custom properties and the awesomeness that our custom properties because people always do it like this where we have you know some custom properties all set up in the root which is awesome that's fine no problems with that but then if we look lower down in my code we'll find stuff like this so here like on these sort of background thingies I did them as custom properties so then I'm putting the colors in there and then I have the icons that I need to change the fill on for each one of them to have the right color so I'm changing the fill of each one like this and this is fine it works but it's a little bit annoying and we end up with a whole bunch of selectors we don't actually need so how do we improve on this how do we use custom properties in a smarter way that leads to more maintainable projects and easier to deal with code bases well it's actually pretty simple and I'm actually going to delete all of this that I have right here or let's comment it out actually just in case we want to reference it a little bit later and we're going to dive in here and make some code so it's hit save you can see all of those colors disappear and let's go back up now to the main selector I have for my plans and let's look really fast here just to get an idea you can see I have these three that are set up very typical we have the plan and then a modifier here that I'm using to control the colors and potentially make other changes if I had to insight each one of those I have my icon at the top I have my title in there just a paragraph my price and a button down at the bottom of each one so nothing too complicated in the html so the plan is for each one of these and the first thing I would recommend when we have elements especially like this or components or different things where you might have different colors for each one this could even be for like your pricing tables it could there's so many different things that this could apply to it could even be for lists and other stuff where you have like different icon colors there's a lot of different places where we could do this I'd recommend using a locally scoped custom property and we're going to be exploring the idea of private properties or this term comes from Leia veru who called them pseudo private properties as an idea of sort of stealing from javascript where we just put an underscore here to sort of indicate that they're they are private properties and I'll put a link to her article where she first explored this idea in the description if you want to read more about it but on my plan here what we might want to do is well we have those two colors that were coming in and that background color was like that pseudo element but it sort of looked like a shadow like you know some sort of weird shadowy things oh let's just call that shadow and the other one that we had on there was our icon so we can just say icon like this and we obviously need to apply something to each one of these and again this is just saying this is sort of like a private property it's something that's unique to my plan it's not something we find up in our route that we're just you know we're dealing with this locally right here and what we're going to do here is actually use a custom property as well and this can seem a little bit weird and I'm going to call it shadow but I'm going to give it a fallback right because right now shadow doesn't actually exist anywhere I ideally wouldn't have that maybe existing somewhere but we'll talk about why this could exist in the route as well and why that's okay and for now let's just say red so it really stands out and we see it or you know those were actually a bit faded so we'll go with pink on those and then here my icon we're going to do the same thing var of icon and then on this one we'll say that the default is red just so it has a fallback that we can easily see if this wasn't a demo I would probably make those black but you could make the fallback whatever you want and because shadow and icon don't exist anywhere these are the values that are going to be used if ever I use these anywhere so let's go on that plan icon that we have right there and I'm going to say that the fill on those should be my var icon and we can see that that's working fabulously right there and then we can actually do the same thing let's go to that pseudo element that I had over here so there's the plan before and in this case let's just say that the background of it background is my var and in this case we called it shadow and you can see that's coming in right there why is this better than doing it this way and then we have the you know it's kind of weird we have this double name and I'll get to why like why is it shadow and shadow we'll talk about that and if you've been watching my videos for a while this isn't exactly how I've been using the this idea of the the pseudo private property where I usually don't bother with this side of it but it makes a lot of sense and I want to share how Vera explored this idea and so now what we go down we can go down to here and here we had to have the selector for my before of each one of them and then we also had to have the selector of the icon for each one of them which is a descendant selector which some people don't like having instead of all of that I could just come and have my plan param and on that one I do that my shadow is going to be my var and then here we just say that it's my color yellow and in this case my 300 refers to the right one and we can see it switched over and let's just we'll set up the other one too which is my icon so icon and be var color yellow 400 which is my darker yellow or more more vibrant yellow and we can see that comes in and the reason this is working is if we come back and take a look here we have the shadow which is looking for a custom property of shadow without the underscore and if it can't find that it will go to pink but as soon as we declare one now we actually have a shadow and it's going to work and the advantage to what this is I don't have any setup but I could you know if shadow existed in the root it would use that default value that's in or we'll call it defaulted to use the cascade it's being inherited into the plan and that shadow variable would work but then if we did redeclare something new it a more locally scoped thing like I'm doing here it's going to work for that as well so we can take my pram let's set up the next one so the next one here is my bike and that one I think for the two of them is my cyan color and then I can take these two and what I really like about this this is my rocket there's what I I guess the main thing that I really like with this is I only need one selector and I'm controlling things that are inside of there and of course we don't need to stop here with this sort of thing like we have these buttons that are on here and we might want to make some changes to those as well and that's a little bit where things can get more interesting here and we're going to look at how we can actually change these shadows to be a little bit better and advantages with the custom properties on that as well and a few other things but let's start with these buttons right here so if I know that I want to make my buttons something that change like say it's a different hover color every time I'm hovering on one I can come and create one of those so we're going to say our button hover which will be our var button hover and then here let's just make it red again it doesn't you know again I wouldn't do this for production necessarily or actually you know what well let's come here and do this as a another custom property because this could be a valid fallback as well where we can look at my color text which is the current color that I have in the background there already so if you ever want for fallbacks you know there's no harm in referencing back to other things the pink and the red here might not be great areas to start with you could have better fallbacks and that way if there is no modifier you're still getting something that's perfect but when the modifier comes on that's when you're getting different situations or different things that are happening so now what I can come down and let's set up my button to be able to do this and this is one area we will need a descendant selector and one of the reasons I like this is because I can keep all of this the same and I have one class that's controlling all of these changes that are happening I don't have to come on to my button and say oh this is a button yellow and then this one's a button blue and that one's a button purple or I have to worry about naming or anything like that I just have my pram my bike or you know whatever this might be yellow blue name those things the way you want but then I'm not worried about modifying anything inside of there I'm not modifying my icon class or I'm not modifying my button class I'm just relying on this one selector that can handle it all so let's come and actually we'll do it right here so we can have then my plan and any button that's inside my plan can get these and we'll look at why this is is nice because actually just really fast if I did this normally I'd have to have my plan pram and then button or have the modifier class like I said and then have to have this for each one of them that's really annoying to have to repeat that every time I want that modifier to affect the the button that's descendant inside of there so in this case we just say that I have my plan button hover and we'll do the plan button focus as well and for this we can just come and say that the background color is my var button hover with the underscore here and it's important when we're declaring it we're using the private property version of it so this is sort of setting the stage up and then when we use it then we can just use the non underscore version of it if you don't like that idea of you know having that fallback in there you could probably approach this in a slightly different way it's just the main idea here is take advantage of your locally scope custom properties so you definitely don't need to set it up exactly like this but there is this nice benefit of having sort of we can rely on the cascade but sort of break the cascade where we need to and it sort of just denotes as well that like where this is getting declared my button hover should be something that I can find on my plan it's not something I would go necessarily to find in my route so we get my button hover that's right there so let's hit save and it should still work perfectly fine because that is going let's just go look really fast that's looking at this it can't find that so it's going to the fallback really fast if I made this my yellow 400 we can see that they've gone to that yellow so they're relying on the fallback color right now so we'll go back to the text so it has a nice default fallback and then when we want to set it up well I don't need any new selectors I don't need to worry about anything like that I just come and this one the color of the text is going to be terrible on this one but I just say my button hover is we can just duplicate this actually right so we just add that in there and we can come on each one of these switch that and this one would be my cyan and then this one can be my purple and now the hover color for each one has switched over without having to worry about it I just come in here and I have these options they become like levers that I can pull for the interior of what's happening within this element which is just so nice the other big advantage of one of the best things with all of this is the way that this is really nice with transitions and animations as well when you need to make change like small changes to things but let's come and look at I have this before right now as a pseudo element that I set up here and I sort of needed to do that because I have a shadow on here right I have like a soft shadow and when I first saw this and actually I got this just so you know from icode this which is a website by florin pop who you might know and so it's a site that has like daily challenges that you can try out right so every day there's a new challenge that opens up it's completely free to join if you join for free you get the daily challenge every day and if I do the start challenge I can actually work on it within the browser the you know it's all here I can do the challenge save it submit the other people solutions and stuff it's a really fun site I'll put a link to it down in the description just so you know it is an affiliate link so well you can join for free and do the challenges every day for free if you do decide that you want to unlock more stuff and get the pro challenges and some of the other things that are available to you then I'd get a small commission from that so you'd be helping to support my channel at the same time which I'd obviously appreciate very much but if you don't know them very cool site but yeah as I was looking at this when I first looked at it to me it's instead of creating a whole pseudo element that makes more sense as a shadow but then I needed that softer shadow on the inner bits as well and the reason that presented a problem was if I take this off and I have that soft shadow that's already on there right so we have the plan and then I have my shadow if I wanted to have a second shadow on here I 100% could so let's come here and add a second shadow I'm just going to put a comma and so I guess it'd be like negative one rem offset in both vertical and horizontal zero blur zero spread and for now let's you know we've been doing red as our example you can see it comes in and it works exactly like I'd want it to the problem now is if I want to change this box shadow with a modifier class I have to come in and redeclair the entire box shadow right so I'd have to come on my plan pram and have this one and change this one just really fast we could do that one is yellow and I have to redeclair the entire thing even though the only thing that's in here that's actually changing is the color of the shot like the color here nothing else all these values everything else is identical and then I'd have to do the same thing on this one and make this one cyan and then I'd have to do the next one and change the color of that one and that's annoying when we have to redeclair entire things and I'm sure if you've done animations or transitions you've done this as well where you have to like add a different animation stop you have a like a stop in your animation you might have to declare a whole bunch of stuff especially with transforms that you've already done that aren't changing from step to step but you just have to have it there so it doesn't overwrite the existing thing because we don't want it to overwrite the other box shadow right and then get rid of the that soft shadow that was on there we need to keep both of them so that was actually why my custom property is called shadow too because I saw it as a shadow but if we're using locally scope custom properties I can completely do away with this and I can just come in and this would be my var shadow and of course I want to be doing that pointing at my private property so with the underscore and hit save and look at that it just worked right away so that's really awesome right and the reason I like this is personally I find it a lot more maintainable and easier to deal with because there's a lot less code going on I just have to pull those levers that I want and so like that's really good and also just really fast if I kept those as pseudo elements I had a negative Z index on them to have to pull that Z that background backwards but that could actually be really bad because if I had a background set for like the area here I'd actually lose it behind that it's annoying dealing with negative Z indexes so using a shadow also solves that problem but another thing that makes it another reason that I really love this and I've talked about this I keep going on about it but let's say I come in and I add another one here and actually it should be in my list but just for styling purposes let's leave it outside just so it's nice and big at the bottom and we want this item to be like this is the important one right so it's my light speed and it's a bit bigger but so I have this one and this one I have my plan light on there so I'm using the exact same HTML the only thing I'm doing is changing one class here at the top nothing else through the entire thing I update my text and then I just come down and let's just duplicate that one right there change this over to my light and I don't have any custom properties set up for an additional color because I'm not forward thinking enough with these demos all the time and then maybe this icon and this one can be lime and then this one can be like a light green and we get those colors that come in and everything updates my buttons updated again the text color I'd have to come in with something that could update my text colors too but everything just comes in and updates without me having to do a lot of work and of course I'm doing this just with colors right now this is not limited to only colors you could be using this for absolutely any custom properties that you have set up and you might want to change that are within and that's for me the real best part of locally scope custom properties is you're dealing with the parent and you can have as many pieces inside that are all being controlled with one nice simple selector when you do need to make changes and if you enjoyed this video and you like just general CSS tips and tricks and things like that you might really enjoy this video that's right here as well where I look at how you can actually transition or animate from a height of zero to a height of auto with CSS only and it's not even really that hacky or anything it just works it's awesome uh and yeah so check that out if that sounds interesting to you and with that I would really like to thank my enablers of awesome Andrew Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome