> 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/principes-obligatoires.md).

# Principes obligatoires

### Introduction

Vous devez absolument connaitre et respecter ce qui va être dit ici.

### Utilisation

#### Préfixes

{% hint style="danger" %}
Quand utiliser c-
{% endhint %}

J'utilise c- lorsque mon composant est vraiment un composant réutilisable et ne fait pas partie du layout de la page ou du site.

{% hint style="danger" %}
Quand utiliser s-
{% endhint %}

J'utilise s- lorsque mon composant est une section accueillant du coup d'autre composant qui sont des composants réutilisable hors layout.

#### Le container

{% hint style="danger" %}
Gestion du container ( boxed )
{% endhint %}

Vous devez utiliser la max-width, vous êtes obligé.

```sass
.container {
  margin: 0 auto;
  max-width: $container-lg;
  width: 100%;

  @media screen and (max-width: ($container-lg - 60px)) {
    padding-left: 32px;
    padding-right: 32px;
  }

  &--min {
    max-width: $container-md;
  }
}
```

####

#### Gestions des espaces

Je ne veux pas voir de div ou span qui font rien avec une height ou des paddings ou n'importe quoi pour gérer les espaces. Je veux que vous utilisiez ce qui existe pour le web. Pas de triche. C'est dégueulasse.

{% hint style="danger" %}
Gestion des PADDING
{% endhint %}

Quand vous avez une section qui est en boxed, exemple en dessous.

![](https://2731555576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO8UUh6H6Y74MIjGEcdCv%2Fuploads%2FufAETWVBjhOMeTIMn4Pl%2Fimage.png?alt=media\&token=b3e52af5-7e4f-4978-a44e-fe701f435678)

Vous devez utiliser les PADDINGS pour gérer les espaces en haut et en bas. Vous aurez donc :

```html
<section class="s-masection">
    <div class="container">
        .c-card*3
    </div>
</section>
```

{% hint style="danger" %}
Mais quand est-ce qu'on utilise les MARGIN alors ?
{% endhint %}

On utilise les margins quand on doit utiliser deux fois les marges pour gérer par exemple un background ou alors des fioritures ou des espaces entres les composants. Pas au niveau des sections/layouts ( à part exceptions ).

#### Réutilisations des composants

Les composants sont des trucs réutilisables, donc réutilisez les !&#x20;

```html
<section class="s-masection">
    <div class="container">
        <article class="c-card">
            <h2 class="c-title">Incroyable titre</h2>
            <p class="c-text"></p>
        </article>
    </div>
</section>
```

```scss
.s-masection {
    .c-card {
        display: grid;
        gap: rem(15);
        color: color(primary);
        
        .c-title {
            @extend %ft-46;
            
            color: color(secondary);
        }
        
        .c-text {
            font-weight: 700;
        }
        
        // Gère l'espace, prend le prochain élément et met margin top donc permet 
        // de pas mettre de mt au premier

        // quand tous les clients auront des bon téléphone, on pourra utiliser gap sur flex
        + .c-card {
            margin-left: rem(15);
        }
    }
}
```

Vous devez faire du plus général au plus précis, c'est à dire que vous devez faire le style propre pour chaque composant, **donc un fichier par composant** et quand vous avez des espaces ou un agencement particulier pour un composant de type layout/section, alors vous mettez le strict minimum pour override ou ajouter des propriétés.

#### Pas de pourcentage ni de vh, vw\...

Je ne veux plus voir de % ou de vh ou vw hors contexte. On a une maquette, il faut que vous utilisiez la mixin **rem().** Vous avez juste à remettre les marges que vous avez sur Figma.

#### Utiliser les grids

On a un magnifique truc maintenant, c'est les grids, et c'est super pour intégrer une maquette qui en a une !

```scss
.grid-container {
  display: grid;
  grid-template-columns: [full-start] 1fr
        [content-start]
          min(#{$container-md}, 100% - 33px * 2)
        [content-end]
    1fr [full-end];
}
```

#### Utiliser les Variables css3

#### Utiliser les attributs

```scss
*[hidden] {
  display: none;
}
```

#### Utiliser les mixins

#### Utiliser les extends

#### Utiliser les inherits

Par défaut, les couleurs sont en inherit, donc vous avez pas besoin de remettre la couleur sur le texte/titre. Donc il faut mettre **sur le parent en priorité** puis ensuite mettre les overrides sur les textes/titres qui vont bien.&#x20;

#### Utiliser les couleurs

Vous êtes **obligé** d'utiliser la function **color()**.

#### Rangez votre code

Les extends/includes c'est au début, puis un retour à la ligne puis les props exemple :

```scss
.c-card {
    @include flex(row, wrap, center, center);
    
    gap: rem(15);
    color: color(primary);
        
    .c-title {
        @extend %ft-46;
        
        color: color(secondary);
    }
    
    .c-text {
        font-weight: 700;
    }
}
```

Mettez des espaces, en vrai ça coûte rien.

Mais bon je vais sortir le linter et là ça va être chiant.