Custom Properties Solution

[00:00:00]
>> Let's look at our HTML again, we're setting this P property here and these are the individual bars. So we wanna set the height of each of these based on this property. Let's go to our CSS. This is This is the CSS code that applies to each of those bars.

[00:00:19]
And it's actually just setting the height depending on the P value. It's just that we don't actually need to do any math with it because it's already set in percentages. So now let's see. What customization options do we want to expose? We want to expose a bar color property so let's go here and see where is the color specified is specified here.

[00:00:50]
So let's instead do bar color and use deep pink as a fullback. And now if we want, we could give that a different color here. And I'm using inline styles for demonstration purposes but you could obviously set the bar color property anywhere else in your CSS. You might have a bar chart part of your CSS that actually sets up the code for the bar charts.

[00:01:19]
And then anywhere else on your website that specifies a bar chart could use these properties that we've exposed this kind of styling API. Let's see what other customization we wanted to open up. A bar width. Again, this is rather simple. We can just go here and replace the fixed value we had with Var function reading bar width and specifying a fallback that is the value we had.

[00:01:53]
And let's make sure this works. Yeah, gold is invalid there. But we could, if we use an actual length, it works. Now let's see, bar spacing. So where is the spacing set in two places? There is the gap that sets the spacing between two flexbox items or two grid items, it works for both.

[00:02:25]
And there's also the padding that sets the spacing, From between the first bar and the left side and the last bar and the right side of the graph, which could be different but here we've decided to make it the same. So, we go here again, bar spacing. And we'll use the same fullback and we're going to go here again.

[00:02:50]
Notice that we've repeated the fallback value because the point we're making here is different but we've seen how you could duplicate this. Although remember trying to go to towards too much dry code can also be a problem. Most people today believe that repeating a value twice is okay more than that, and you need to figure out ways to remove the duplication.

[00:03:16]
And we also have band count. So how are the bands created we have this linear gradient here and with two color stops so each of these gradients creates both colors of the bands. So each of these gradients creates two bands. Let's wrap this a little bit. And it's actually the background size that controls how many bands we have, right now it's 20% which means we get five repetitions, which means we get 10 bands.

[00:03:51]
If it was 10%, we would get 20 bands. So we could rewrite this. Like that, and actually, Which makes it more clear how many bonds we have like we could experiment a little bit yep. And we could go here and say bond count and defaulted to 10. So that should work.

[00:04:32]
Let's try it out like we did the other ones, bond count 10 and let's change it a bit yep. See that works fine. So, I have a question for you. You might have noticed that a lot of these were actually fairly simple. Like the, the bar color one, for example, that we used the bar width or the bar color.

[00:05:01]
This we're just setting one property. So why don't we want someone to style a component, set them directly and style these divs directly why would we use custom properties there at all. Like okay in the bar spacing declarations economic sense it's setting two properties at once. There is some sort of benefit or in the band count case, okay?

[00:05:27]
It's a it's a sort of bigger expression it's a bit harder to figure out by yourself without some thinking. It does provide a higher level of abstraction but for things like bar color and bar width why, what benefit does it give us? So the benefit again is encapsulation.

[00:05:44]
It means it exposes the styling hooks and I can change my CSS entirely and whoever is styling our component doesn't have to change anything. Also, notice that both of these properties are actually set on the divs inside the component by exposing these custom properties. It means that the entire component can be styled by just applying properties on the component itself, not on the divs inside it.

[00:06:10]
We don't need to know anything about its internal structure we can use whatever elements we want inside and it will still work. So even though there is not a benefit In terms of actual amount of code. There is a big win in terms of maintainability. Especially when other people are styling our components but even when it's just us in a different place of the CSS or a different CSS file or different places on the website.