> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/sass/separation-des-fichiers.md).

# Séparation des fichiers

Nous avons une structure de fichiers qui est défini, il faut alors suivre cette hiérarchie pour que notre code soit homogène et que tous les développeurs puissent s'y retrouver.

### Hiérarchie des fichiers

```
├── common
│   ├── _autoload.scss
│   ├── _colors.scss
│   ├── _font.scss
│   ├── _global.scss
│   ├── _mixins.scss
│   └── _variables.scss
├── layouts
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _pages.scss
│   └── _posts.scss
├── utils
│   ├── components
│   ├── _components.scss
│   └── _forms.scss
└─ main.scss
```

{% hint style="info" %}
Dossier "common"
{% endhint %}

Ce dossier permet de mettre le style commun à toutes les pages mais également tout ce qui nous permet d'optimiser notre code. On y retrouve notamment les couleurs, la tailles des fonts globales, les mixins/functions ou encore nos variables.

Vous pouvez également y ajouter les configurations de chaque library.

{% hint style="info" %}
Dossier "layouts"
{% endhint %}

Ce dossier nous permet de gérer les différents styles de layout que l'on peut trouvé. On y met alors le style du footer, du header ou encore de la sidebar. Ce dernier nous permet aussi de ranger tous les styles qui sont propre à des pages en particuliers ( par exemple: archive ou single de chaque custom post type ).

{% hint style="info" %}
Dossier "utils"
{% endhint %}

Ce dossier nous permet de ranger les styles de nos composants ou de tout autre bout de code indépendant.