Intermediate React Reusing Styles with JavaScript

[00:00:00]
>> Brian Holt: I want to just kind of get your brains thinking more about how we can utilize these emotion components even more. I hope at your day jobs you think about some sort of design system, right? Design systems are the future of CSS and JavaScript. At LinkedIn, at Netflix, at Salesforce, at Amazon, they have entire teams that all they do is work on a design system that every other team in the entire company works on, right?

[00:00:27] So I know some of them have emotion libraries, so they just export. It's like, here's a button. Any time that you need a button, here's a button that I've already made for you, right? So they kind of use these as design systems themselves. And I'll kind of get you thinking a little bit more about that.

[00:00:42] I want you to make a new file here. And I want you to call it colors.js, lowercase c. It's not gonna be a component it's just gonna be a thing that we export from here. So in here I'm just gonna say export default,
>> Brian Holt: And my primary color of my application that the designers decided on is #ad343e, but this could be any color, right?

[00:01:15] You can put pink there, you can put papaya whip or Peru, all of my favorite named colors.
>> Brian Holt: Okay, secondary color here is going to be #f2af29. The dark color is going to be #333 which is a nice shade of black. This one right here, the second, this is a yellow, this is a red.

[00:01:43] And then, light, we're just gonna make it, you can put white here, or I just put #000, which is white, okay? So now I have all these colors living in one place. I don't have to copy and paste them anywhere. And let's say later you pull an Airbnb and you decide to switch all of your colors to a new color scheme.

[00:02:04] You just update in one place and it updates magically throughout your entire application. So what's compelling about this now is I can go into my navbar and I can say import colors from ./colors,okay? Instead of saying #333 right here, I can delete that and say ${colors.dark},
>> Brian Holt: Okay?

[00:02:40] So keep in mind this is still a template literal, right? So I can use the dollar sign curly braces to insert java script expressions into my CSS. Magic, [LAUGH] pretty cool, right? So I go over here, everything should look exactly the same but if I come over to my colors and say you know what, this wasn't a good dark.

[00:02:59] Now I want dark to be, I don't know, 666, that's probably a bad one, [LAUGH] 777. Look, it got a lot lighter, right? So I change in one place and you can imagine this can spread throughout the entire application. I have no idea why I chose 666. Well, it's a good color of gray.

[00:03:19] [LAUGH] Whatever.
>> Brian Holt: Okay, so that's one thing. You can centralize all your variables into one place, and then you can modify project-wide. And not only that, you can do things like vertical rhythm, z-index scaling, all of these advanced kind of CSS design system ideas that designers think about.

[00:03:42] You can kinda encapsulate your style guide inside these JavaScript objects. Furthermore, I can pull in libraries that will do lightened and darkened and all these kind of advanced color manipulations or vertical rhythm libraries and stuff like that. They can pull that in and use that inside your JavaScript so that's why I'm a big fan of emotion.

[00:04:03] I think this is really compelling stuff.
>> Brian Holt: So let's even take this another step further. What happens if I wanted to style Link? Well that's different, right, that's not header, right? Header was just a string that I passed in there, so how do I style one of these links?

[00:04:24] Well, let's do that, const NavLink = styled, and I just pass it in Link, right? And it'll figure out how to style it on it's own. And then on that, I wanna have it do it on hover, so I just say & hover,
>> Brian Holt: text-decoration,
>> Brian Holt: underline.
>> Brian Holt: So this & refers to whatever is in here, right?

[00:05:00] So on link hover, do this. And now I just change these two links.
>> Brian Holt: So I'll just do all four of them at once and say NavLink.
>> Brian Holt: So this one, that one, that one, and that one, I changed those from link to NavLink. Save that, and now if I go over to my library, if I cursor over it, it's now it's a NavLink.

[00:05:29]
>> Brian Holt: That's pretty cool, right?
>> Brian Holt: So that's how you do things like hover. You can do nested selectors, all those kind of things. So if I wanted to say, I only wanna target the spans inside of this, right? Cuz this one doesn't have a span, but this one does.

[00:05:47] So I would say span, and I want the color on this to be pink or something like that, I don't know. So now if I refresh it, notice that the color, that should. It's still overriding to be this one, because that's actually the link above it. But could I do,

[00:06:13]
>> Brian Holt: Go on display inline-block and border 1px solid red, or something like that. So notice that this one has a solid red box, but this one doesn't, right? So I can actually target things inside of it as well and scope that to this. This is isn't going to affect every spin on the page, this is only going to affect spans inside of NavLink, right?

[00:06:34] So you can also do that nesting. What I'm trying to say is pretty much anything you can with do LESS or Sass, right, can be accomplished here as well, more or less, yeah.