7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Nested Components

One of the greatest features of the RSCSS system is the way it handles complexity. In this lesson, you will look at one aspect of this as you learn how to handle nested components.

Related Links

2.5 Nested Components

Hello and welcome back. In this lesson, I wanna start to talk about nested components and what the RSCSS systems suggests for nested components. So, let's say that we wanted to take our cards here. And in the footer, let's say that we want a couple of items in the footer. So, we don't want the h3 by itself to serve as the footer for our card. Instead we want it to be one element inside that footer and we'll have another button element underneath it. So, we're starting where we left off in the last lesson. You can find the URL for this starting pennant in the course notes. And once you open that up, go ahead and click on fork to create a new copy of it. And in our new copy, we're going to surround these h3s with a div. So, I'm gonna create a div here and I'm gonna give this a class. Remember, this new div is going to be a component nested within the feature-card component. So, since it's a component, we need two words for the name with a hyphen in between. And so, I'm gonna call this card-footer. So, then we'll nudge over that h3 and we're gonna add a button. And the button is going to be an element within the card-footer component. So, this needs to have a one word class and I'm just gonna give this a class name of action. So, we're gonna say Buy Now, and then we put a closing button tag, and then in the next line our closing div tag. Then I'm gonna copy this entire setup here and I'm gonna paste it inside both of the remaining items. And then we will just replace the h3 that we pasted with the h3 that was there before. And that should give us a little closer to what we're going for. And then we'll need one more change after that. So, we'll get our h3s in place and we can now see that our styles are broken because we've changed the structure a little bit. But one more thing I wanna do is I wanna take off these variance here, this -redtop, -bluetop, -greentop variant. I want to take those out of the h3 and add them to the card-footer instead. So, now our card footer will have second class of -redtop. And same thing here with -bluetop, we'll add that to the card-footer. And the same thing with -greentop. Oops. There we go, we'll cut that and add it to card-footer. So now, all of our styles for our footers are broken, but we'll jump into our CSS and we'll fix that issue. So remember, we had our -greentop, -bluetop and -redtop classes added to our descriptions. Instead, we're gonna add those to the card-footer. And our card-footer is going to have a lot of the same rules that our description had, to start with. So, it's gonna have this background color of f9. It's gonna have 10px of padding inside of it. So, there are a couple of ways that we can handle this within the RSCSS specification. So, we could leave it set up like it is right with a description and just change this to card-footer. When we do that, you'll see that our styles are already looking a little bit better. But some of the styles, such as this margin, need to be applied to the h3 itself which is the description. And this is where we start to come into a problem. If we were to nest the description inside this card-footer rule, then we now have three layers or I guess two levels of nesting inside feature-card. We would have feature-card and then card-footer. And then inside that, we would have our description. And the RSCSS specification suggests that we only have one level of nesting. We would have the containing element and then one element inside it. So, we can handle this either by pulling the card-footer rule completely outside of the feature-card rule and just doing it separately and then we could nest the description inside that. Or we could leave the basics for the card footer rule here and then create another rule for card-footer with the description nested inside it. And so, some of these rules or some of these guidelines are going to acquire a little bit of decision-making on your part. You could go either way with this. I'm actually going to chose to pull that for card-footer completely out of the feature-card rule. And the reason for that is this current footer is always going to be inside the feature-card. Anyways, it's part of the card. And so, we don't really need that level of specificity in order to force it to do what we want it to do. So, instead of leaving these card-footer specific rules here inside the feature-card rule. Again, I'm gonna take all of these rules out and I'm gonna paste them here inside the card-footer rule. And then we'll just get rid of the card-footer rule up here inside the feature-card rule. So, then inside the card-footer rule, we have our description which is a child of the card-footer. And we want to move the color in there, so we're gonna cut the color here, move it inside the description and the same thing for the margin. We're gonna cut that and move it inside the description, and now that margin is gone. And just so we can see the structure of this a little bit better, another thing we can do is just pull this all onto one line. And so, we have our card-footer and the description immediately inside that footer. But then we'll also have the Buy Now button inside that. So, we're going to use that child selector again, and then .action, which is the class name we gave to our buttons. And then for our action buttons, we're actually going to have a few rules. So, we might want to break that got up into a few lines there. And so, we're gonna have our background color, and this is gonna be white. And then I wanna get rid of that default border that's there. So, I'm just going to set border to none. I want to round off the corners, so I'm gonna set border radius to 10px. We need to nudge that down to the next line as well. Then we're gonna apply some padding here, 3px top and bottom, 8px on the left and right, and then we're going to set our text color. So, we'll set color equal to aaa, which is a light grey, and there we go. So, you can see it any point in time. We really only have one level of nesting of one object inside another. So, we have the image inside our feature-card, and then we have our description and our action inside our card-footer. And by keeping these from getting too deep, from having too many levels of nesting, this keeps our CSS a little bit cleaner and a little bit easier to read. So, then the last thing we need to do is we need to fix our borders which are taken care of in this -greentop, -bluetop, and -redtop classes. So, we're just going to grab those three classes and cut them, and we're going to place them inside the card-footer rule. So again, this is just one level of nesting. This really isn't nesting because it's just looking at items that have a class of card-footer and a class of -greentop applied to them, and there we go. So now, we can see those borders have been applied again. And so once again, that's how you can handle nested objects, especially when you have multiple levels of nesting. In the next lesson, we're gonna look at how to handle nesting when there are some variations going on. So, thank you for watching and I'll see you then.

Back to the top