Organizing CSS Files: The 7-1 Template

Let’s talk about organizing CSS files.

Perhaps it will seem that this template name is strange. However, there is nothing strange here, and using it is very simple. To do this, it is enough to follow two simple rules:

1. All files with SCSS fragments must be placed in 7 different folders.
2. All these files must be imported into one file, main.scss, located in the root directory in which all these folders are located.

The name of the template, as a result, can be read as “7 folders – 1 file”. As you can see, it’s not that difficult. Let’s look at this template in more detail.

7 Folders

Here are the folders in question:

1. base: in this folder you need to place all “template” code. By “template” code we  mean all the CSS code that you have to write when creating a new project. For example: typographic rules, animations, utilities (that is, classes like margin-right-large, text-center), and so on.
2. components: the name of this folder clearly indicates what will be stored in it. We are talking about the styles of components used to build pages. These are buttons, forms, all kinds of sliders, pop-ups, and so on.
3. layout: this folder is used to store the styles of page layout elements. This is the header and footer of the page, the navigation area, various sections of the page, the grid, and so on.
4. pages: sometimes a project needs pages that have their own specific style, which is different from the style of the other pages. Style descriptions for such special pages  go into this folder.
5. themes: if a web project involves the use of various themes (something like “dark mode”, or “admin”), styles for them should be put here.
6. abstracts: all sorts of auxiliary things go into this folder – functions, variables, mixins.
7. vendors: a rare site goes without external dependencies. This folder contains styles that are not created by those who develop a particular site. Here, for example, you can save the Font Awesome project files, Bootstrap styles, and the likes.

sass/
|
|– abstracts/ (or utilities/)
|   |– _variables.scss    // Sass Variables
|   |– _functions.scss    // Sass Functions
|   |– _mixins.scss       // Sass Mixins
|
|– base/
|   |– _reset.scss        // Reset/normalize
|   |– _typography.scss   // Typography rules
|
|– components/ (or modules/)
|   |– _buttons.scss      // Buttons
|   |– _carousel.scss     // Carousel
|   |– _slider.scss       // Slider
|
|– layout/
|   |– _navigation.scss   // Navigation
|   |– _grid.scss         // Grid system
|   |– _header.scss       // Header
|   |– _footer.scss       // Footer
|   |– _sidebar.scss      // Sidebar
|   |– _forms.scss        // Forms
|
|– pages/
|   |– _home.scss         // Home specific styles
|   |– _about.scss        // About specific styles
|   |– _contact.scss      // Contact specific styles
|
|– themes/
|   |– _theme.scss        // Default theme
|   |– _admin.scss        // Admin theme
|
|– vendors/
|   |– _bootstrap.scss    // Bootstrap
|   |– _jquery-ui.scss    // jQuery UI
|
`– main.scss              // Main Sass file