CSS at scale

A little reminder about how CSS let's you do shit and how you should embrace the BEM methodology to make your code easy to read and write. (sorry for the crappy PDF export 😬)

Transcript

1. CSS at scale
2. Matthias Le Brun Développeur front-end @bloodyowl @reactjsfrance Putain de code !
3. Les problèmes de CSS 1. Les selecteurs sont des variables globales .selector { font-size: 1rem; } = window.selector = { fontSize: "1rem", }
4. Les problèmes de CSS 2. La cascade .nav { font-size: 0; } .nav .item { display: inline-block; /* font-size is 0 */ }
5. Les problèmes de CSS 3. La spécificité * {} /* specificity = 0,0,0,0 */ li {} /* specificity = 0,0,0,1 */ li:first-line {} /* specificity = 0,0,0,2 */ ul li {} /* specificity = 0,0,0,2 */ ul ol+li {} /* specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* specificity = 0,0,1,1 */ ul ol li.red {} /* specificity = 0,0,1,3 */ li.red.level {} /* specificity = 0,0,2,1 */ #x34y {} /* specificity = 0,1,0,0 */ style="" /* specificity = 1,0,0,0 */ !important /* specificity = P,T,D,R */
6. Les problèmes de CSS 3. La spécificité
7. Les problèmes de CSS 4. L'annulation de propriétés .item { display: block; font-size: 1rem; color: blue; /* un dev vient de rajouter la propriété `border` */ border: 1px solid red; } .some-context .item { display: inline-block; color: red; /* regression dans .some-context */ }
8. Les problèmes de CSS 5. La priorisation .blue { color: blue; } .red { color: red; } <!-- aucun contrôle au niveau du markup --> <div class="blue red">text</div> <div class="red blue">text</div>
9. Les problèmes de CSS En résumé Un langage sans scope qui transmet automatiquement toute propriété d'un sélecteur à ses descendants qui priorise les sélecteurs comme un ivrogne qui est régression-friendly™ qui rend impossible la prédictabilité de priorisation à grande échelle
10. Ce qui n'aide pas non plus 1. @extend .blue { color: blue; } .red { color: red; } .my-selector { @extend .red; @extend .blue; }
11. Ce qui n'aide pas non plus 2. Les «CSS atomiques» .block { display: block; } .inline-block { display: inline-block; } .relative { position: relative; } .absolute { position: absolute; } .static { position: static; } .padding-10 { padding: 10px; }
12. Ce qui n'aide pas non plus 2. OOCSS, SMACSS … Approches compliquées à apprendre à une équipe junior Différents niveaux non adaptés à un découpage en composants (layout, module, theme …)
13. BEM Block Element Modifier <div class="Header"> <div class="Header-nav"> <div class="Nav"> <a href="/" class="Nav-item Nav-item--active"> Home </a> <a href="/about" class="Nav-item"> About </a> </div> </div> </div>
14. BEM Block le Block représente un composant Il peut être utilisé sans contexte particulier Il peut avoir son private tree Il peut avoir un état local (e.g. .Button--small) Cet état est appliqué par un «Modifier»
15. BEM Element L'Element est un bloc appartenant au private tree de son ancêtre Block Il peut avoir un état local (e.g. .Nav-item--active)
16. BEM Block Element Modifier: cas possibles Block Block--modifier Block-element Block-element--modifier
17. BEM Block Element Modifier Une façon de structurer sainement son app/site Des règles minimales Un nœud pouvant exister sans dépendre d'un ancêtre est un Block .Block Un nœud pouvant n'exister qu'en tant que descendant d'un ancêtre N est un element du Block N .Block-element Un état local pour un Block ou un Element est défini par un modifier de ce Block ou Element.Block--modifier ou .Block-element--modifier
19. BEM Block Element Modifier: aller plus loin Dans le cas où un block est enfant d'un autre block, préférer le wrapping à la composition <!-- bad --> <div class="Header"> <div class="Header-nav Nav"><!-- ... --></div> </div> <!-- good --> <div class="Header"> <div class="Header-nav"> <div class="Nav"><!-- ... --></div> </div> </div>
21. BEM Block Element Modifier: aller plus loin Prefixer les classNames par le nom de l'organisation, afin de prévenir les conflits avec le third-party <div class="org-Header"> <div class="org-Header-nav"> <div class="org-Nav"><!-- ... --></div> </div> </div>
22. BEM Block Element Modifier: aller plus loin Éviter les side effects de la cascade en définissant les propriétés au niveau le plus bas possible /* bad */ .Nav { font-size: 2rem; } .Nav-item { padding: .5rem; } /* good */ .Nav {} .Nav-item { font-size: 2rem; padding: .5rem; }
23. BEM Block Element Modifier: aller plus loin Si votre stack vous impose des selecteurs pour les actions JS, utilisez des classNames uniquement prévus à cet effet <button class="org-Button org-Button--small org-js-OpenLoginModal"> Login </button>
24. BEM Block Element Modifier: aller plus loin Ne groupez jamais les media queries, gardez les toujours près des déclarations qu'elles complètent/override .Nav {} .Nav-item { font-size: 2rem; } @media(--maxM) { .Nav-item { font-size: 1.5rem; } }
25. BEM Block Element Modifier: les avantages Rend triviale la compréhension du markup et du style Crée rapidement des automatismes Apporte naturellement l'isolation des styles Permet d'éliminer facilement le code legacy Permet de repérer les différents niveaux de legacy en changeant de préfixe
26. Next steps Inline styles BEM résoud beaucoup de soucis, mais pas le contrôle de la priorisation JavaScript + la propriété style nous le permettent + variables, conditions, modules …
27. Next steps Inline styles import React, {Component} from "react" import {lighten, darken} from "color" import styleVariables from "stylesVariables" const styles = { button: { display: "block", font-weight: 700, }, buttonDefault: { backgroundColor: styleVariables.colorBlue, }, buttonHover: { backgroundColor: lighten(styleVariables.colorBlue, .1), }, buttonPressed: { backgroundColor: darken(styleVariables.colorBlue, .1),
28. backgroundColor: darken(styleVariables.colorBlue, .1), }, } export class extends Component { state = { hover: false, pressed: false, } render() { const {text} = this.props const {hover, pressed} = this.state return ( <div style={{ ...styles.button, ...styles.buttonDefault, ...hover && styles.buttonHover, ...pressed && styles.buttonPressed, }}> {text} </div>
29. </div> ) } }
30. Next steps Inline styles: events import React, {Component} from "react" import {lighten, darken} from "color" import styleVariables from "stylesVariables" const styles = { button: { display: "block", font-weight: 700, }, buttonDefault: { backgroundColor: styleVariables.colorBlue, }, buttonHover: { backgroundColor: lighten(styleVariables.colorBlue, .1), }, buttonPressed: { backgroundColor: darken(styleVariables.colorBlue, .1),
31. backgroundColor: darken(styleVariables.colorBlue, .1), }, } export class extends Component { state = { hover: false, pressed: false, } handleMouseEnter() { this.setState({ hover: true, }) } handleMouseLeave() { this.setState({ hover: false, }) } handleMouseDown() {
32. handleMouseDown() { this.setState({ pressed: true, }) } handleMouseUp() { this.setState({ pressed: false, }) } render() { const {text} = this.props const {hover, pressed} = this.state return ( <div onMouseEnter={() => this.handleMouseEnter()} onMouseLeave={() => this.handleMouseLeave()} onMouseDown={() => this.handleMouseDown()} onMouseUp={() => this.handleMouseUp()} style={{ ...styles.button,
33. ...styles.button, ...styles.buttonDefault, ...hover && styles.buttonHover, ...pressed && styles.buttonPressed, }}> {text} </div> ) } }
34. Next steps Inline styles: bénéfices Permet de prioriser les styles Possède naturellement des fonctions comme first class citizen JavaScript dispose déjà d'un outillage intéressant pour l'analyse de code Rend possible la cohabitation de style & markup dans le même fichier (tout comme avec des WebComponents) Abolit la spécificité des selecteurs Évite au browser de parser la page pour dresser la correspondance selector/element
35. Questions ?