Skip to content

Instantly share code, notes, and snippets.

@ncoden
Last active March 18, 2016 17:52
Show Gist options
  • Save ncoden/97902efb1f292706c105 to your computer and use it in GitHub Desktop.
Save ncoden/97902efb1f292706c105 to your computer and use it in GitHub Desktop.

#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

@ncoden
Copy link
Author

ncoden commented Mar 16, 2016

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.

@pascalduez
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment