CSS Orientées Composants

#RivieraDEV

Avant de commencer...

Les slides sont disponibles :

https://tzi.fr/slides/riviera2018-cmp
https://tzi.fr/slides/riviera2018-cmp.pdf

2

Vous avez dit composant ?

Composition

Des éléments à assembler pour créer votre site

4

Composition

5

Composition

6

Maintenance

1 site = Σ composants

7

Maintenance

Maintenir un site au global :

  • On rajoute à la fin du fichier
  • On duplique
  • On introduit des incohérences
  • Les nouvelles ressources pleurent
8

Maintenance

Maintenir un composant :

  • On a une vision globale
  • On identifie plus facilement le code mort
  • On peut défaire et refaire
  • On a un jeu de test limité
9

Maintenance

Un bon composant est un composant autonome

10

Maintenance

Isolation

11

Réutilisation

The more I’ve worked/matured, the more I view modularity as a way of facilitating code deletion rather than code reuse.
— Harry Roberts
https://twitter.com/csswizardry/status/861567624144138241 12

Réutilisation

Le cycle de vie d'un composant :

  • Réutiliser
  • Supprimer
  • Remplacer
  • Partager
13

Réutilisation

Le composant tout terrain

14

Réutilisation

Les rôles d'un composant réutilisé :

  • Garder la cohérence de design
  • Gérer des variances
  • Permettre de l'imbrication
15

Pour résumer

Un composant :

  • Sert à composer notre site
  • Facile à maintenir
  • Réutilisable, Exportable
  • Gardien de la cohérence
  • S'adapte
16

Les méthodologies

Les méthodologies

Thomas Zilliox, expert CSS freelance.

Découvre le CSS depuis 12 ans maintenant.

Je suis un fan de BEM, OOCSS, des classes atomiques

https://tzi.fr 18

Les méthodologies

6play.fr

Architecture React, des chaînes, des pays.

Migration en cours sur du CSS-in-JS.

19

Les méthodologies

On peut faire des CSS orientés composants

avec toutes les méthodologies !

20

Les méthodologies

Isolation

21

Check n°1 : Pas de contexte

Check n°1 : Pas de contexte

Un exemple de style en fonction du contexte :

.button { ... }
#contactPage .button { ... } /* invalid */
23

Check n°1 : Pas de contexte

Le risque est de casser :

  • La réutilisation
  • L'exportabilité
  • La cohérence
24

Check n°1 : Pas de contexte

Pas de classe étrangère à notre composant dans nos sélecteurs

25

Check n°1 : Pas de contexte

CSS-in-JS n'est pas immunisés.

26

Check n°1 : Pas de contexte 

const Icon = styled.svg`
  transition: fill 0.25s;

  ${Link} & {
    fill: rebeccapurple;
  }
`;
https://www.styled-components.com/docs/advanced#referring-to-other-components 27

Check n°1 : Pas de contexte

Isolation

28

Check n°2 : Documenté

Check n°2 : Documenté

Pourquoi un composant non-documenté n'est pas valide ?

30

Check n°2 : Documenté

31

Check n°2 : Documenté 

.account-button { ... }
32

Check n°2 : Documenté

33

Check n°2 : Documenté 

.account-content-button { ... }
34

Check n°2 : Documenté

35

Check n°2 : Documenté 

.auth-content-form__input--submit { ... }
36

Check n°2 : Documenté

Le risque est de casser :

  • La cohérence
37

Check n°2 : Documenté

Le composant est dans la documentation

ou respecte une convention commune

38

Check n°2 : Documenté

http://styleguides.io/ 39

Check n°2 : Documenté

En CSS-in-JS le problème est double:

  • Réutilisation des composants JS
  • Réutilisation des classes CSS
40

Check n°3 : Pas de logique DOM

Check n°3 : Pas de logique DOM

Un exemple de sélecteur contenant de la logique sur le positionnement du composant dans le DOM :

.card { ... }
.card:first-child { ... } /* invalid */
.card + .card { ... } /* invalid */
42

Check n°3 : Pas de logique DOM

Le risque est de casser :

  • La réutilisation
  • L'exportabilité
  • La cohérence
43

Check n°3 : Pas de logique DOM

Pas d'opérateurs ou pseudo-classes qui conditionnent les styles à une position spécifique de l'élément racine dans le DOM

44

Check n°3 : Pas de logique DOM

CSS-in-JS n'est pas immunisés.

Il vaut mieux utiliser une variance qu'une règle auto-magique.

45

Check n°4 : positions

Check n°4 : positions 

.twitter__notification {
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 3;
}
https://codepen.io/Amminexx/pen/LeOqRa?page=4 47

Check n°4 : positions

Le risque est de casser :

  • L'exportabilité
48

Check n°4 : positions

Si le composant contient des éléments positionnés, je dois avoir un position: relative sur l'élément racine.

49

Check n°4 : positions

Isolation

50

Check n°5 : fuites

Check n°5 : fuites 

.footer { ... }
.footer a { ... } /* invalid */
52

Check n°5 : fuites

http://jsbin.com/zisudeq/edit?css,output 53

Check n°5 : fuites

Le risque est de casser :

  • les composants imbriqués
54

Check n°5 : fuites

J'évite de styler les éléments en utilisant la cascade

sinon je limite au maximum la porté de mon sélecteur.

55

Check n°5 : fuites 

.footer__text a { ... }

<footer class="footer">
    <div class="footer__text">Contenu avec des liens</div>
    <div class="footer__action">
        <button class="button">Button isolé !</button>
    </div>
</footer>
56

Check n°5 : fuites

Si une classe est appliquée aux liens,

les styles ne s'appliquent plus ! 

.footer a:not([class]) { ... }
57

Check n°6 : Pas de self-layout

Check n°6 : Pas de self-layout

Don’t Layout Yourself: A component should style itself, but give up the task of layouting to its parent.
— Thai Pangsakulyanont
A More Maintainable CSS 59

Check n°6 : Pas de self-layout

60

Check n°6 : Pas de self-layout

61

Check n°6 : Pas de self-layout

62

Check n°6 : Pas de self-layout

Le risque est de casser :

  • la cohérence
63

Check n°6 : Pas de self-layout

sur l'élément racine :

J'utilise width et height qu'avec 100%

Je n'utilise pas margin

Je n'utilise pas float et position: absolute

64

Check n°6 : Pas de self-layout

Je fais confiance à mes collègues !

65

Check n°7 : Pas d'ingérence

Check n°7 : Pas d'ingérence 

.footer__content { display: flex } /* invalid */

<div class="slider">
    <div class="slider__content">
        <div class="card"></div>
    </div>    
</div>
67

Check n°7 : Pas d'ingérence

Les fils des display: flex sont des éléments flexibles.

Les fils des display: grid sont des cellules.

68

Check n°7 : Pas d'ingérence

Le risque est de casser :

  • La réutilisation
  • L'exportabilité
  • La cohérence
69

Check n°7 : Pas d'ingérence

Les noeuds qui vont accueillir des sous-composants

ne sont ni display: flex ni display: grid.

70

Résumons !

Résumons !

Les vérifications essentielles :

  • n°1 : Pas de contexte dans les sélecteurs
  • n°2 : Le composant est documenté
72

Résumons !

Les vérifications faciles :

  • n°3 : Pas de logique en CSS pour l'élément racine
  • n°4 : Être un contexte de position si besoin
  • n°5 : Pas ou peu de fuites de styles
73

Résumons !

Les vérifications structurelles :

  • n°6 : Pas d'auto-dimensionnement et d'auto-position
  • n°7 : Pas d'ingérence avec flex ou grid
74

Résumons !

Isolation

75

Merci !

Des questions ?

@iamtzi
https://tzi.fr/slides/riviera2018-cmp
https://tzi.fr/slides/riviera2018-cmp.pdf

76