SlideShare une entreprise Scribd logo
www.sooyoos.comjeudi 23 juin 2016
jeudi 23 juin 2016
SOOYOOS
www.sooyoos.comjeudi 23 juin 2016 2
CSS component friendly ?
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
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
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
www.sooyoos.comjeudi 23 juin 2016
• Une partie d'un bloc.
• Le contexte d'un élément est celui du bloc.
6
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
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
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
www.sooyoos.comjeudi 23 juin 2016 10
www.sooyoos.comjeudi 23 juin 2016
• Ici, un autre concept à noter, l’utilisation de namespaces
11
www.sooyoos.comjeudi 23 juin 2016
\
12
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
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.
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.
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
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/

Contenu connexe

En vedette

Monitoring des Logs
Monitoring des LogsMonitoring des Logs
Monitoring des Logs
Sooyoos
 
Symfony Live Paris 2016 - Ce que nous avons retenu
Symfony Live Paris 2016 - Ce que nous avons retenuSymfony Live Paris 2016 - Ce que nous avons retenu
Symfony Live Paris 2016 - Ce que nous avons retenu
Sooyoos
 
June Spark meetup : search as recommandation
June Spark meetup : search as recommandationJune Spark meetup : search as recommandation
June Spark meetup : search as recommandation
Modern Data Stack France
 
BEM methodology overview
BEM methodology overviewBEM methodology overview
BEM methodology overview
Oleksii Prohonnyi
 
10 Commandments for efficient CSS architecture [CSSConf.Asia '14]
10 Commandments for efficient CSS architecture [CSSConf.Asia '14]10 Commandments for efficient CSS architecture [CSSConf.Asia '14]
10 Commandments for efficient CSS architecture [CSSConf.Asia '14]
kushagra Gour
 
Odnaleźć się w nanokosmosie
Odnaleźć się w nanokosmosieOdnaleźć się w nanokosmosie
October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101
Eric Sembrat
 
BEVM ( block__element--variation -modifier)
BEVM ( block__element--variation -modifier)BEVM ( block__element--variation -modifier)
BEVM ( block__element--variation -modifier)
Jyaasa Technologies
 
Cyber Attack Analysis
Cyber Attack AnalysisCyber Attack Analysis
Cyber Attack Analysis
codefortomorrow
 
HUGFR : Une infrastructure Kafka & Storm pour lutter contre les attaques DDoS...
HUGFR : Une infrastructure Kafka & Storm pour lutter contre les attaques DDoS...HUGFR : Une infrastructure Kafka & Storm pour lutter contre les attaques DDoS...
HUGFR : Une infrastructure Kafka & Storm pour lutter contre les attaques DDoS...
Modern Data Stack France
 
Resume_Michael F Fragello_2016
Resume_Michael F Fragello_2016Resume_Michael F Fragello_2016
Resume_Michael F Fragello_2016
Michael Fragello
 
Wilbert Ebbers - De Duurzame Werkplaats
Wilbert Ebbers - De Duurzame WerkplaatsWilbert Ebbers - De Duurzame Werkplaats
Wilbert Ebbers - De Duurzame Werkplaats
ARXlabs B.V.
 
Presentation principes classe_inversee
Presentation principes classe_inverseePresentation principes classe_inversee
Presentation principes classe_inversee
blandine lassaux
 
Resume-Amit Wadood
Resume-Amit WadoodResume-Amit Wadood
Resume-Amit Wadood
Amit Wadood
 

En vedette (14)

Monitoring des Logs
Monitoring des LogsMonitoring des Logs
Monitoring des Logs
 
Symfony Live Paris 2016 - Ce que nous avons retenu
Symfony Live Paris 2016 - Ce que nous avons retenuSymfony Live Paris 2016 - Ce que nous avons retenu
Symfony Live Paris 2016 - Ce que nous avons retenu
 
June Spark meetup : search as recommandation
June Spark meetup : search as recommandationJune Spark meetup : search as recommandation
June Spark meetup : search as recommandation
 
BEM methodology overview
BEM methodology overviewBEM methodology overview
BEM methodology overview
 
10 Commandments for efficient CSS architecture [CSSConf.Asia '14]
10 Commandments for efficient CSS architecture [CSSConf.Asia '14]10 Commandments for efficient CSS architecture [CSSConf.Asia '14]
10 Commandments for efficient CSS architecture [CSSConf.Asia '14]
 
Odnaleźć się w nanokosmosie
Odnaleźć się w nanokosmosieOdnaleźć się w nanokosmosie
Odnaleźć się w nanokosmosie
 
October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101
 
BEVM ( block__element--variation -modifier)
BEVM ( block__element--variation -modifier)BEVM ( block__element--variation -modifier)
BEVM ( block__element--variation -modifier)
 
Cyber Attack Analysis
Cyber Attack AnalysisCyber Attack Analysis
Cyber Attack Analysis
 
HUGFR : Une infrastructure Kafka & Storm pour lutter contre les attaques DDoS...
HUGFR : Une infrastructure Kafka & Storm pour lutter contre les attaques DDoS...HUGFR : Une infrastructure Kafka & Storm pour lutter contre les attaques DDoS...
HUGFR : Une infrastructure Kafka & Storm pour lutter contre les attaques DDoS...
 
Resume_Michael F Fragello_2016
Resume_Michael F Fragello_2016Resume_Michael F Fragello_2016
Resume_Michael F Fragello_2016
 
Wilbert Ebbers - De Duurzame Werkplaats
Wilbert Ebbers - De Duurzame WerkplaatsWilbert Ebbers - De Duurzame Werkplaats
Wilbert Ebbers - De Duurzame Werkplaats
 
Presentation principes classe_inversee
Presentation principes classe_inverseePresentation principes classe_inversee
Presentation principes classe_inversee
 
Resume-Amit Wadood
Resume-Amit WadoodResume-Amit Wadood
Resume-Amit Wadood
 

Similaire à BEM : Block Element Modifier

Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
Daniel Roch - SeoMix
 
CSS3 - Possibilite creatives
CSS3 - Possibilite creativesCSS3 - Possibilite creatives
CSS3 - Possibilite creatives
Rémy Savard
 
Bootstrap
BootstrapBootstrap
Bootstrap
Romdhani Asma
 
CMS Day 2014 - Web factory
CMS Day 2014 - Web factoryCMS Day 2014 - Web factory
CMS Day 2014 - Web factory
Pierre Frouge
 
CSS3 WebEducation
CSS3 WebEducationCSS3 WebEducation
CSS3 WebEducation
Rémy Savard
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Joffrey LEVEUGLE
 
Systematic, toolchain JS
Systematic, toolchain JSSystematic, toolchain JS
Systematic, toolchain JS
Raphaël Boucher
 
Architecturez vos CSS
Architecturez vos CSSArchitecturez vos CSS
Architecturez vos CSS
Ninnir
 
Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
Jean-Pierre Vincent
 
Seminaire web EAA 2017
Seminaire web EAA 2017Seminaire web EAA 2017
Seminaire web EAA 2017
Manuel Schmalstieg
 
Intranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Intranets et sites web en SharePoint 2013 avec le Cross Site PublishingIntranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Intranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Franck Cornu
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Idean France
 

Similaire à BEM : Block Element Modifier (13)

Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
 
CSS3 - Possibilite creatives
CSS3 - Possibilite creativesCSS3 - Possibilite creatives
CSS3 - Possibilite creatives
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
CMS Day 2014 - Web factory
CMS Day 2014 - Web factoryCMS Day 2014 - Web factory
CMS Day 2014 - Web factory
 
CSS3 WebEducation
CSS3 WebEducationCSS3 WebEducation
CSS3 WebEducation
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)
 
Systematic, toolchain JS
Systematic, toolchain JSSystematic, toolchain JS
Systematic, toolchain JS
 
Architecturez vos CSS
Architecturez vos CSSArchitecturez vos CSS
Architecturez vos CSS
 
Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
 
Seminaire web EAA 2017
Seminaire web EAA 2017Seminaire web EAA 2017
Seminaire web EAA 2017
 
Intranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Intranets et sites web en SharePoint 2013 avec le Cross Site PublishingIntranets et sites web en SharePoint 2013 avec le Cross Site Publishing
Intranets et sites web en SharePoint 2013 avec le Cross Site Publishing
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
 
Introduction au développement en SharePoint
Introduction au développement en SharePointIntroduction au développement en SharePoint
Introduction au développement en SharePoint
 

BEM : Block Element Modifier

  • 1. www.sooyoos.comjeudi 23 juin 2016 jeudi 23 juin 2016 SOOYOOS
  • 2. www.sooyoos.comjeudi 23 juin 2016 2 CSS component friendly ?
  • 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. 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. 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. www.sooyoos.comjeudi 23 juin 2016 • Une partie d'un bloc. • Le contexte d'un élément est celui du bloc. 6
  • 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. 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. 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
  • 11. www.sooyoos.comjeudi 23 juin 2016 • Ici, un autre concept à noter, l’utilisation de namespaces 11
  • 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. 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. 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. 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. 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/