> 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/la-methode-bem.md).

# La méthode BEM

### Introduction

La méthode BEM est une méthode de nommage pour pouvoir mieux organiser ses composants web.

L'idée d'utiliser ça ici est de permet la flexibilité d'intervention. En effet, le bon nommage nous permet de ne pas se perdre dans la structure des balises, rien qu'en regardant le fichier SASS.

### Utilisation

Lorsque vous allez créer un composant réutilisable, vous allez lui donner un nom.

{% hint style="info" %}
Quand utiliser -
{% endhint %}

Vous allez utiliser `-` lorsque l'élément enfant n'est pas le dernier enfant et qu'il contient lui même des enfants propres à ce composant

Par exemple on peut imaginer quelque chose comme suit :

```html
<article class="post">
  <picture class="post__thumb">
    <img src="https://tinyurl.com/y2se9dma" alt="">
  </picture>
  <div class="post-content">
    <h2>Titre de l'article</h2>
    <a href="" class="post-content__more">Lire plus</a>
  </div>
</article>
```

{% hint style="info" %}
Quand utiliser \_\_
{% endhint %}

Vous allez utiliser \_\_ lorsque l'élément enfant est le dernier enfant de la structure de votre composant ( comme si dessus pour l'élément `post-content__more` ).

{% hint style="info" %}
Quand utiliser --
{% endhint %}

Vous allez utiliser -- lorsque c'est une modification de style ou un dérivé de l'élément initial.

```html
<article class="post post--horizontal">
  <picture class="post__thumb">
    <img src="https://tinyurl.com/y2se9dma" alt="">
  </picture>
  <div class="post-content">
    <h2>Titre de l'article</h2>
    <a href="" class="post-content__more">Lire plus</a>
  </div>
</article>
```

Nous avons ici, un composant post qui est de base vertical, mais nous avons dans notre site une alternative à ce composant qui est qu'il est horizontal. L'image mis en avant n'est pas au dessus mais à gauche du contenu. Nous allons alors ajouter la classe `post--horizontal` pour pouvoir, premièrement, lui dire que c'est une alteration de l'élément puis lui appliquer le style sans modifier toute la structure.

```sass
.post {
	> .image {...}

	&-content {...}

	&__excerpt {...}

	&-footer {
		.btn {...}
	}

	&.post--horizontal {
		@include flex(row, nowrap, flex-start, flex-start);

		> .image {...}

		.post {
			&__excerpt {...}

			&-content {...}
		}
	}
}

```

{% hint style="danger" %}
**Attention :** à l'utilisation abusive de la structure.

Vous devez vous dire que chaque composant est réutilisable donc vous devez réutiliser un maximum vos composants. Ci-dessus, nous voyons que j'ai un composant .post et égalament un composant **.image** et **.btn**. Je n'ai pas recréé une classe **.post-footer\_\_btn** par exemple.
{% endhint %}