During a recent project, I encountered challenges in managing the style files within my Vue2 project, which utilized Element UI 2. I observed that each component had its own style residing directly inside the component.
This approach resulted in excessive lines of code, duplicated styles across components, and numerous color codes being used throughout the project. Consequently, this led to inconsistent styles and a subpar user experience.
I discovered the seven-one pattern and realized that it was precisely what my project needed. I was excited to implement it and here's how I did it. Let's dive in!
The seven-one CSS architecture, also known as the "Seven-One" pattern, is a widely adopted approach for organizing and structuring CSS/Sass code.
It offers numerous benefits such as improved modularity, scalability, and maintainability. To implement this pattern, I restructured my codebase using the following directory structure:
Directory Structure:
- base/
- components/
- layout/
- pages/
- themes/
- abstracts/
- vendors/
1. `base/`: Contains the foundational styles for the project, such as reset files, typography, and global styles.
2. `components/`: Includes reusable UI components. Each component has its own SCSS file, making it easy to manage and reuse throughout the project.
3. `layout/`: Deals with the overall layout structure of the project, including grid systems, navigation, header, footer, and other layout-related styles.
4. `pages/`: Contains specific styles for individual pages of the project. Each page can have its own SCSS file to handle any unique styles.
5. `themes/`: Holds theme-specific styles, such as different color schemes or variations. It helps in maintaining consistent styling across themes.
6. `abstracts/`: Contains Sass partials that do not output any CSS directly, such as variables, mixins, functions, and placeholders.
7. `vendors/`: Stores any external CSS or Sass files from third-party libraries or frameworks.
By organizing your CSS/Sass files in this manner, you can easily locate and manage specific styles, reuse components, and ensure a more structured and scalable codebase.
Remember to import the necessary files into your main SCSS file using `@import` statements. For example:
Feel free to adapt this structure to your specific project needs and add more directories if required. ******************* IMPLEMENTATION IN MY VUE PROJECT ***************** That's great! If you're using Vue.js 2 and want to incorporate the 7-1 CSS architecture into your project, you can modify the directory structure accordingly. Here's an example of how you can organize your styles folder:
Directory Structure:
- styles/
- abstracts/
- _variables.scss
- _mixins.scss
- _functions.scss
- _placeholders.scss
- base/
- _reset.scss
- _typography.scss
- ...
- components/
- _button.scss
- _navbar.scss
- ...
- layout/
- _grid.scss
- _header.scss
- _footer.scss
- ...
- pages/
- home/
- _home.scss
- about/
- _about.scss
- ...
- themes/
- _light.scss
- _dark.scss
- ...
- vendors/
- _bootstrap.scss
- _normalize.scss
- ...
In this structure, the styles for each page/component are nested within their respective directories under the "pages" folder. For example, the styles for the home page would be in the "home" directory, and the styles for the about page would be in the "about" directory.
To import the styles into your Vue components, you can use the `@import` statement in the `<style>` section of each component. For instance, in your `Home.vue` component:
By using this approach, you maintain the separation between component-specific styles and the overall project's architecture, allowing for better organization and maintainability of your styles.
Thank you for reading my blog post! If you enjoyed the content and want to stay updated with more tips and insights, feel free to connect with me at Instagram @__full_stack_developer__/. Let's continue the conversation there!
Comments