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

reste à voir BS4 et PostCSS

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.

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.