SCSS.md

#Objectif

L'objectif est d'avoir une structure CSS modulaire et sémantique. On utilise un ensemble de composants BEM. Le layout n'est composé que d'eux, vidé de tout "utilitaires".

#Composants

En plus d'adopter une approche BEM, l'ensemble des composants doivent:

• être modulaires. Pas plus de 2 niveaux de profondeur (= 1 block, 1 élément)
• être orientés objets. Pas d'utilitaires
• proposer une structure, des skins et des modifiers séparés, sous forme de classes/%placeholders/@mixins

Les composants génériques doivent:

• gérer leur propre propriétés uniquement (pas de margin, float, width...), sans cas particuliers

Les composants du layout doivent:

• regrouper à leur niveau l'ensemble des cas particuliers, ou spécifiques à un breakpoint
• si possible, ne gérer ces cas particuliers qu'en faisant appel à des modifiers

#Frameworks

Bootstrap

Bootstrap n'est pas adapté à l'approche BEM. En plus de ne pas du tout être modulaire, il n'utilise Sass que comme un outil de génération, sans proposer d'autres @mixins que ceux utilisés en interne.

Conclusion: C'est mort.

Foundation

Foundation a l'avantage d'avoir une grande communauté et d'être orienté Sass (Propose un ensemble de %placeholders et @mixins pour chaque composant). Mais le skin est intégré, ce qui pose les mêmes problêmes de maintenance que BS.

Conclusion: Migration plus facile, mais pose des problêmes sur le long terme (overwrite du skin)

Bourbon (& cie)

Edit: Bourbon ne propose une lib de composants que pour l'environnement Rails.

Bourdon est également orienté Sass, mais aussi ultra-modulaire, et propose une lib de mixins très complête et une lib de composants (Refills) disponibles sans skin (http://empties.bourbon.io/). Il y a une assez bonne communauté autour de Bourbon et Refills, mais Empties semble assez mal connu.

Conclusion: Migration plus difficile, mais permettant d'avoir une vrai approche BEM modulaire et sémantique. En gros, ultra-maintenable

Autoprefixer est déjà prévu. Les fonctionnalités de prefix de Bourbon ne seront pas utilisées. Quand je parle "orienté sass", c'est le fait de mettre à disposition pour chaque composant et ses variantes sa version placeholder et/ou mixin, afin de les réutiliser/étendre. Ce que BS ne fait pas. Ce que Foundation fait, mais skin inclus.
Rien à voir avec le nommage.

La question à se poser est: avez-vous vraiment besoin d'un framework ?
Si c'est pour passer votre temps à surcharger les styles du framework, parce-que ça ne correspond pas aux UI, il y a de quoi se poser des questions.

Pour les préfixes et cross browser compat: Autoprefixer et PostCSS.

"KISS, it's just CSS."

NB: grande prudence avec les extend.