#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 partie "Requirements" me semble bonne, en tout cas je vois l'idée et je pense que c'est viable.
Pour la partie analyse, je dirais que pour ajouter des prefixes, postCss/autoprefixer suffit.
Pour une lib de composants, je ne sais pas, mais bootstrap ou foundation de 'bavent' pas trop de mémoire.
Il faudra peut être ajouter qq divs mais ce n'est pas incompatible avec l'isolation du flux des éléments et leur rendu.
Oui, les noms sont moches, mais ils apportent quand même un paquet de composants prêts à l'emploi.