Intermediate React, v2 Intermediate React, v2

Design Systems & Compound Selectors

Check out a free preview of the full Intermediate React, v2 course:
The "Design Systems & Compound Selectors" Lesson is part of the full, Intermediate React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to centralize a design system, and import it into code. Compound selectors are also demonstrated by implementing a underline on hover state on an element.

Get Unlimited Access Now

Transcript from the "Design Systems & Compound Selectors" Lesson

[00:00:00]
>> Brian: Another cool thing here is that you can kind of build design systems into this. So I want you to make a new file and call it colors.css here in the source directory. Or sorry, colors.js, rather.
>> Brian: And I want you to make just export default object here.

[00:00:20] And just, you can put in like some colors here or something like that, right. So I could say primary export default.
>> Brian: And we'll say like, what do I have, bf3334. Secondary is #d9c148.
>> Brian: Dark is 122622#.
>> Brian: Light is.
>> Brian: #81a69b. So now I have all these colors in one place, right?

[00:01:09] So, I can actually come over to my nav bar.
>> Brian: You don't have to copy my colors exactly. You could put pink in there if you want to.
>> Brian: The point is that you can see here, you could centralize all of your design system, your style guide, or whatever you wanna call it, here in one place.

[00:01:29] And now I can import this into my code. I can say import colors from .colors, right? Instead of having pink as the background here, I can have it be.
>> Brian: colors.primary, right? So now if I go over here, it would be a nice shade of red. Or I can put colors.secondary.

[00:01:57]
>> Brian: Right, and now stuff is starting to match more, because those are the actual colors of the site. I still think the pink was nice, if you ask me, but this is fine too. So, let's say we wanted to have some sort of hover state on the poodle.

[00:02:11] That's pretty easy to do here, you just put &:hover. This feels pretty familiar if you've done like sass before or something like that. And then text-decoration: underline. So we just added that. And now, if you come back over here. How did I break it? That's impressive. I wonder if I got into a strange state here.

[00:02:50]
>> Brian: I think my parcel just broke. Okay, so that's works now so you can hover on the dog and underline it. That's how you do like hover states and befores and afters and all that kind of stuff. You can also do child selectors underneath that as well if you needed to, right?

[00:03:06] So if I had like a child button, you could just put, I think you just put button and I think it would just work. And immediate child selector, all that kind of stuff. You can use and as a stand-in for the actual component itself.
>> Brian: Okay?