@IryDev
Posted
Hey @AmazingDude, well done for completing this challenge😄
If you're using Sass (Syntactically Awesome Stylesheets) for styling, the 7-1 pattern is a popular approach that can greatly help with organizing your files and managing your styles. Here's how it could work:
7-1 File Structure for Sass:
styles/
|-- abstracts/
| |-- _variables.scss
| |-- _functions.scss
| |-- _mixins.scss
|-- base/
| |-- _reset.scss
| |-- _typography.scss
| |-- _forms.scss
|-- components/
| |-- _buttons.scss
| |-- _modals.scss
| |-- ...
|-- layout/
| |-- _header.scss
| |-- _footer.scss
| |-- ...
|-- pages/
| |-- _home.scss
| |-- _about.scss
| |-- ...
|-- themes/
| |-- _theme-default.scss
| |-- _theme-dark.scss
|-- vendors/
| |-- _normalize.scss
| |-- ...
|-- main.scss
In this structure, you divide your styles into different folders based on their roles. For example, foundational styles like resets, typography, and forms would go into the base folder, component-specific styles would go into the components folder, and so on. The main.scss file acts as the entry point to compile all the style files into a single CSS file.
This approach makes it easier to locate specific styles, encourages reusability, and maintains a clear organization of your styles.
Regarding other tools to learn, even if you're not using React, skills in HTML, CSS, and JavaScript are essential. Besides Sass, you might also consider diving into CSS frameworks like Bootstrap or Tailwind CSS, or learning to use other CSS preprocessors like Less.
I hope you'll find this helpful😄
Marked as helpful
