CSS Orientées Composants

Avant de commencer...

Vous avez dit composant ?

Composition

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

Composition

Composition

Maintenance

1 site = Σ composants

Maintenance

Maintenir un site au global :

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

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é

Maintenance

Un bon composant est un composant autonome

Maintenance

Isolation

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

Réutilisation

Le cycle de vie d'un composant :

  • Réutiliser
  • Supprimer
  • Remplacer
  • Partager

Réutilisation

Le composant tout terrain

Réutilisation

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

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

Pour résumer

Un composant :

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

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

Les méthodologies

6play.fr

Architecture React, des chaînes, des pays.

Migration en cours sur du CSS-in-JS.

Les méthodologies

On peut faire des CSS orientés composants

avec toutes les méthodologies !

Les méthodologies

Isolation

Check n°1 : Pas de contexte

Check n°1 : Pas de contexte

Un exemple de style en fonction du contexte :

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

Check n°1 : Pas de contexte

Le risque est de casser :

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

Check n°1 : Pas de contexte

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

Check n°1 : Pas de contexte

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

Check n°1 : Pas de contexte

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

  ${Link} & {
    fill: rebeccapurple;
  }
`;

Check n°1 : Pas de contexte

Isolation

Check n°2 : Documenté

Check n°2 : Documenté

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

Check n°2 : Documenté

Check n°2 : Documenté

.account-button { ... }

Check n°2 : Documenté

Check n°2 : Documenté

.account-content-button { ... }

Check n°2 : Documenté

Check n°2 : Documenté

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

Check n°2 : Documenté

Le risque est de casser :

  • La cohérence

Check n°2 : Documenté

Le composant est dans la documentation

ou respecte une convention commune

Check n°2 : Documenté

Check n°2 : Documenté

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

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

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 */

Check n°3 : Pas de logique DOM

Le risque est de casser :

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

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

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.

Check n°4 : positions

Check n°4 : positions

.twitter__notification {
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 3;
}

Check n°4 : positions

Le risque est de casser :

  • L'exportabilité

Check n°4 : positions

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

Check n°4 : positions

Isolation

Check n°5 : fuites

Check n°5 : fuites

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

Check n°5 : fuites

Check n°5 : fuites

Le risque est de casser :

  • les composants imbriqués

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.

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>

Check n°5 : fuites

Si une classe est appliquée aux liens,

les styles ne s'appliquent plus !

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

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

Check n°6 : Pas de self-layout

Check n°6 : Pas de self-layout

Check n°6 : Pas de self-layout

Check n°6 : Pas de self-layout

Le risque est de casser :

  • la cohérence

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

Check n°6 : Pas de self-layout

Je fais confiance à mes collègues !

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>

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.

Check n°7 : Pas d'ingérence

Le risque est de casser :

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

Check n°7 : Pas d'ingérence

Les noeuds qui vont accueillir des sous-composants

ne sont ni display: flex ni display: grid.

Résumons !

Résumons !

Les vérifications essentielles :

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

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

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

Résumons !

Isolation

Merci !