CSS Architecture — Folders & Files Structure

CSS Architecture — Part 2

One of the essential things in every programming language is architecture, i.e., how the code is divided into file and folders. Somehow, however, CSS was left in the corner, and many developers don’t take the time to plan its architecture properly.

Image for post
Image for post

Basic Structure

I build my projects using two main files: the configuration file and the content styles file. The configuration file, called _config.scss , references all configuration files, and the content styles file, called _local.scss references all folders & files inside the local folder.

sass/ 
|
|- framework/
|- _config.scss
|- _local.scss
|- main.scss
@import "config";
@import "local";

Configuration Layer (_config.scss)

The configuration layer is where I define all my SASS/CSS variables and some main root definitions.

  • Colors Variables
  • Responsive Design Breakpoints Variables
  • Language Support Variables
  • Main Z-Index layers
  • Other variables which don’t fit into the other parts.
framework/
|
|- config/
| |- _common.scss
| |- _cdn.scss
| |- _colors.scss
| |- _directions.scss
| |- _breakpoints.scss
| |- _layers.scss
|
|- local/
| |- Folders and Files
|
|- _config.scss
|- _local.scss
|- main.scss

Content Layer (_local.scss)

The content layer, located in _local.scss, is your styles' main content, i.e., this is where you should place all your styles.
This layer should include SASS mixins, CSS Normalize & CSS Resets, fonts, icons, CSS utility classes, common grids, and partials.

framework/
|
|- config/
| |- config files
|
|- local/
| |- _mixins.scss
| |- _resets.scss // normalize + resets + typography
| |- _fonts.scss
| |- _icons.scss // font icons/SVG icons
| |- _utilities.scss
| |- _grids.scss // common layouts
| |- _partials.scss // elements/components/entities/pages
|
|- _config.scss
|- _local.scss
|- main.scss

Mixins layer

Folder view:

framework/
|
|- local/
|- |- mixins/
| | |- _trim.scss
| | |- _rotation.scss
| | |- _prevent-select.scss
| | |- _break-word.scss
| | |- _scrollbar.scss
| | |- _screen-reader.scss
| |- _mixins.scss
@import "mixins/trim";
@import "mixins/rotation";
@import "mixins/prevent-select";
@import "mixins/break-word";
@import "mixins/scrollbar";
@import "mixins/screen-reader";

Reset Layer

Folder view:

framework/
|
|- local/
|- |- resets/
| | |- _normalize.scss
| | |- _reset.local.scss
| | |- _typography.scss
| |- _resets.scss
/*resets*/
@import "resets/normalize";
@import "resets/reset.local";
@import "resets/typography";

Partials Layer (_partials.scss)

The _partials.scss is one of the main files in the _local.scss layer. It is where I locate all the components, whether they're small, medium, or big.

framework/
|
|- config/
| |- config files
|
|- local/
| ...
| |- _partials.scss // elements/components/entities/pages
|
|- _config.scss
|- _local.scss
|- main.scss
framework/
|
|- local/
| |- partials/
| |- 1-elements/
| |- 2-components/
| |- 3-sequences/
| |- 4-entities/
| |- 5-pages/
| |- _1-elements.scss
| |- _2-components.scss
| |- _3-sequences.scss
| |- _4-entities.scss
| |- _5-pages.scss
| |- _partials.scss // elements/components/entities/pages
// from most generic to specific
@import "partials/1-elements";
@import "partials/2-components";
@import "partials/3-sequences";
@import "partials/4-entities";
@import "partials/5-pages";

How to determine where in the _partials.scss layer to put your style

Before placing anything in layers, remember that icons, common grids, fonts, and utility classes don’t belong in this layer! They reside in the layers before.

The definitions in this layer are divided into several types:

Elements- are the basic components of the web. This layer is where I put all the base styles, such as styles for common-link, common-button, common titles, forms styles, tabs, and every basic style that is small and can stand on its own.

/*common*/
@import "1-elements/common-links";
@import "1-elements/titles";
@import "1-elements/common-popup";
/*Buttons*/
@import "1-elements/common-button";
@import "1-elements/button-icon";
@import "1-elements/button-tabs";
@import "1-elements/tooltip-button";
/*forms*/
@import "1-elements/select-row";
@import "1-elements/forms";
@import "1-elements/search";
@import "1-elements/search-result";
/*tables*/
@import "1-elements/common-table";
@import "1-elements/table-summary";
@import "1-elements/table-links";
@import "1-elements/table-filtering";
/*others*/
@import "1-elements/system-alerts";
......... a lot more...
// from most generic to specific
@import "partials/1-elements";
@import "partials/2-components";
@import "partials/3-sequences";
@import "partials/4-entities";
@import "partials/5-pages";

Entities and Pages partials

Many projects have partials which use an element or a component or a sequence in an un-generic way. For example, in a project that has a generic pop-up, there might be a datepicker that uses a pop-up too, but the datepicker pop-up could differ in some ways from the generic one. In these cases, I use one of two approaches: entities or pages.

<section class="common-popup e-datepicker-popup"> </section>
<section class="common-popup e-datepicker-popup u-hide"> </section>
<body class="p-homepage"></body>

To Summarize

In this post, I showed my CSS Architecture approach for folders and files, based on many things I’ve learned over the years.
This post is the second in a series of articles I’m writing about CSS Architecture, and I will share a new post every few weeks.

My CSS Architecture Series:

  1. Normalize CSS or CSS Reset?!
  2. CSS Architecture — Folders & Files Structure
  3. CSS Architecture for Multiple Websites
  4. Naming Things in CSS

Final Words

That’s all,
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I would appreciate applause and sharing :-)

Image for post
Image for post

Written by

CSS & HTML Expert

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store