2.1 RSCSS Components and Elements

Hello and welcome back. In this lesson, we're gonna talk about components and elements in RSCSS. Components and elements are the building blocks of the RSCSS system. And when you think of a component in RSCSS or a component on your website, I want you to think of any small chunk of your user interface design, any small chunk of related content. So your header bar, at the very top, might be a component. The navigation menu within that header bar might be another component nested inside that one. Your search bar over here with a search button on the right, that could be another nested component inside your header component. And then in this large feature section near the top of the page, we have one large component with a bunch of nested components inside of it. So, again, a component in RSCSS is just what it sounds like. It's just a chunk or a piece of your user interface. And you can have nested components, as well as larger containing components. Inside those components, we either have other components or we have individual elements. For example, in our navigation component, we have a couple of navigation items. Each one of those navigation items would be an element of that component. For a typical search field, you might have two main elements within that component. You would have one element, which is the input, and the other element, which would be the search button. And you can almost always think of an element as an actual HTML element. And a component would be a group of HTML elements that make up a particular piece of your user interface. And the reason I'm harping on this so much is because once we jump into RSCSS and start coding, we're going to need to understand what is defined as a component and what is defined as an element, because for each of these items, we're going to have a different naming convention for our classes. For our components for example, we're typically going to have a two word class, two or more words I should say. Our class names are gonna be two or more words and they're gonna be separated by hyphens. For elements on the other hand, elements within our components, our elements are typically going to have just one word in the class name. And as we move forward in our course, we'll also discover other aspects of RSCSS that will have different naming conventions. And so if you're gonna use the RSCSS system, you need to get used to seeing a website in terms of its components. It's really gonna help you to break down the design and figure out ahead of time how exactly you're going to structure all of your styles. And we'll discover as we move forward that if we get used to thinking this way, then we'll be able to look at any web page and immediately identify the different parts of the pages as elements or components that contain elements. We'll be able to look at them and see how we would use the different aspects of the RSCSS specification in order to create some well organized styles for our websites. So, now that we understand what a component is and what an element is, in the next lesson, we're gonna jump into CSS and take a look at how we would actually name these items and how we would apply styles to them. So thank you for watching and I'll see you then.