Convention de nommage des class CSS

Le system de nomenclature de class CSS utilisé est un dérivé du système BEM (Block__Element--modifier)
Il utilise l'élément en préfixe qui est inspiré de la sémantique des balise HTML.
.element__block--modifier L'élément (préfixe) est séparé par 2 underscores du nom du bloc (__).
Le nom du block peut être composé de tiret. Ex: main-nav.
Le modificateur, utilisé en suffixe est séparé par 2 tirets du nom du bloc (--).

Liste des préfixes élément utilisés couramment

• h : pour le titre principal du bloc
• l : pour une liste de blocs
• i : pour l'item d'une liste de blocs
• a : pour le lien principal du bloc
• img : image du bloc
• metas : pour le wrapper listant les metas de l'item (date, auteur, catégories, …)

D'autres préfixes pourront être créés pour les besoins du projet

Exemples

Bloc de menu principal

		
<nav class="main-nav">
	<ul class="l__main_nav">
		<li class="i__main-nav">
			<a href="#" class="a__main-nav">Link</a>
		</li>
	</ul>
</nav>
	

Liste d'articles

		
<section class="articles">
	<h1 class="h__articles">Derniers articles</h1>
	<ul class="l__articles">
		<li class="i__articles">
			<article class="article">
				<h2 class="h__article">Titre de l'article</h2>
				<div class="img__article">
					<img src="#" alt="#" />
				</div>
				<div class="metas__article">
					Auteur + Date
				</div>
			</article>
		</li>
		<li> …
	</ul>
</section>