Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

BEM : Block Element Modifier

1,134 views

Published on

BEM, CSS component friendly ?

Published in: Internet
  • Be the first to comment

  • Be the first to like this

BEM : Block Element Modifier

  1. 1. www.sooyoos.comjeudi 23 juin 2016 jeudi 23 juin 2016 SOOYOOS
  2. 2. www.sooyoos.comjeudi 23 juin 2016 2 CSS component friendly ?
  3. 3. www.sooyoos.comjeudi 23 juin 2016 • Solution élaborée par Yandex et publiée en 2010 • Convention de nommage des classes CSS • Il faut voir le site comme une arborescence de blocs, d'éléments et de modificateurs 3
  4. 4. www.sooyoos.comjeudi 23 juin 2016 • Entité indépendante, • « Brique » de l'application ou de la page Web. • Un bloc forme son propre contexte autonome 4
  5. 5. www.sooyoos.comjeudi 23 juin 2016 • Un bloc est réutilisable dans d'autres blocs ou dans des éléments. • Ne connaît toutefois que son propre contexte et non celui du parent. • N’est pas livré avec les règles CSS de son propre positionnement au sein du conteneur parent. 5
  6. 6. www.sooyoos.comjeudi 23 juin 2016 • Une partie d'un bloc. • Le contexte d'un élément est celui du bloc. 6
  7. 7. www.sooyoos.comjeudi 23 juin 2016 • Propriété qui sert à créer des variantes/modifications minimes. Par exemple : changer des couleurs • Modificateurs de blocs • Modificateurs d'éléments 7
  8. 8. www.sooyoos.comjeudi 23 juin 2016 Les blocs et les éléments doivent chacun avoir un nom unique, lequel sera utilisé comme classe CSS ; /! pas d’ID, l’objectif étant de pouvoir réutiliser les blocks /! Les sélecteurs CSS ne doivent pas utiliser les noms des éléments HTML (pas de .menu td) ; Les cascades dans les sélecteurs CSS devraient être évitées. 8
  9. 9. www.sooyoos.comjeudi 23 juin 2016 • Seuls comptent les concepts, la syntaxe reste libre. • L'équipe de BEM utilise une syntaxe à base de underscores : blockName blockName--modifierName blockName__elementName blockName__elementName—modifierName Deviens 9
  10. 10. www.sooyoos.comjeudi 23 juin 2016 10
  11. 11. www.sooyoos.comjeudi 23 juin 2016 • Ici, un autre concept à noter, l’utilisation de namespaces 11
  12. 12. www.sooyoos.comjeudi 23 juin 2016 \ 12
  13. 13. www.sooyoos.comjeudi 23 juin 2016 13 • En CSS, seul le premier niveau de sélection est performant. • Les cascades CSS, lorsqu'elles sont nombreuses, engendrent des problèmes de fluidité surtout sur les pages animées des applications Web. • CF : règle 3 => réduire la cascade
  14. 14. www.sooyoos.comjeudi 23 juin 2016 14 • Un bloc peut être placé n'importe où dans la page et apparaître plusieurs fois. • Pourquoi ? Les règles CSS sont radicalement séparées de celles des autres blocs. • On travaille toujours à une échelle réduite : le contexte d'un bloc.
  15. 15. www.sooyoos.comjeudi 23 juin 2016 15 • Composants Web = briques des futures applications JavaScript. • Embarque ses propres règles CSS et son propre code JavaScript. • La norme prévoit un shadow DOM, une sandbox qui encapsule une portion de DOM dans le but d'empêcher les sélecteurs CSS et les identifiants HTML d'interagir par erreur avec le reste du DOM. • Les blocs BEM correspondent bien à la philosophie du développement par composants.
  16. 16. www.sooyoos.comjeudi 23 juin 2016 16 • Syntaxe un peu lourde, peu devenir verbeuse si mal utilisée • Penser composant c’est bien, encore faut-il que la création s’y prête
  17. 17. www.sooyoos.comjeudi 23 juin 2016 17 • http://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html • http://putaindecode.io/fr/articles/css/bem/ • https://en.bem.info/methodology/key-concepts/ • https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and- how-to-avoid-them/ • http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

×