#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 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 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)
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
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.