Lessons: 13Length: 1.1 hours
- Overview
- Transcript
3.2 CSS File Structure
RSCSS also has a system for setting up your CSS files. In this lesson, you will learn the suggested method for keeping everything uncluttered and modular.
1.Introduction
1.1Introduction00:52
1.2What Is RSCSS?02:14
2.Components and Elements
2.1RSCSS Components and Elements03:35
2.2Styling Components and Elements09:11
2.3Variants07:20
2.4Positioning Components06:24
2.5Nested Components07:44
2.6Nested Variants06:02
3.Other Considerations
3.1Creating Helper Classes02:57
3.2CSS File Structure02:15
3.3Using the Inverted Triangle06:49
3.4Planning Out Your Site07:11
4.Conclusion
4.1Final Thoughts00:44
3.2 CSS File Structure
Hello and welcome back. In this lesson i wanna talk very briefly about the RSCSS guidelines for structuring your CSS files. We've talked a lot about how to structure the CSS itself, but we haven't talked about the file structure. And the RSCSS guidelines are very simple as far as file structure. What they suggest is placing each component in its own CSS file. Now, we're not gonna get very far with that in this particular example, because we've only really focused on one major type of component. We've talked about this card, this feature card that we've created. And we've created it, in a few different variations. So you might have everything for that feature card, in one CSS file. You might have everything for your main header in a separate CSS file. And it's kind of up to you. To use a little discretion to determine how granular to get with that. You might, for example, include the whole header in one CSS file, or you might split it up a little bit. You might have the main navigation inside that header in one CSS file, and in other components in that header, in other CSS files. So again, some of that's gonna be personal preference, some of that's gonna be up to your discretion. I think you can definitely go too far with it. You don't want a couple hundred different CSS files for every tiny little component on your website, but separating your CSS into components are separating your components into separate CSS files, can really help you to keep your files organized. And if you're using something like SASS, it makes it really easy to import only the components you need on a particular page. And then one other suggestion in the RSCSS guidelines, is that you keep all of your helper classes which we discussed in the last section, for example this, _full-width class, you would keep all of those helper classes in a separate helpers CSS file. So those are just a few simple guidelines for keeping your CSS files organized, as you're organizing your website. So, thank you for watching, and I'll see you in the next lesson.
