Sauvez un chaton, architecturez vos CSS

Gauthier / Ninir

Gauthier / Ninir

• Développeur Full-Stack / DevOps @Buzznative

• <3 Open-Source

• <3 Musique

Les origines

Les origines

Les origines

• Trop de spécificité dans les sélecteurs

• Utilisation abusive d’Ids (#)

• Méli-mélo de propriétés CSS

• Aucune hiérarchie

• Repaint important

Les origines

• 5 déclarations

• 1 objectif unique

• Surcharge des sélecteurs

• A quel élément du DOM correspond exactement le sélecteur ?

THIS IS CSSPARTA !

A qui la faute ?

A qui la faute ?

• Héritage

• Dépendant de l’ordonnancement

• Pas très développé et extensible

• Beaucoup d’astuces à connaître

• La spécificité des éléments

• « Simple à comprendre, difficile à maintenir »

Problèmes du CSS

A qui la faute ?

• Manque de documentation

• Mélange des concepts, des idées

• Manque de connaissances

• Différentes manières de travailler

• Extension à la place de la restructuration

• Utilisation de !important…

Problèmes de l’homme

Améliorer ses CSS

Améliorer ses CSS

• Object Oriented CSS

• Créé par Nicole Sullivan en 2009

• Abstraire son CSS et forcer la réutilisation (rows, medias, …)

• Modules, modifiers

OOCSS

Améliorer ses CSS

• Styleguide d’architecture plus qu’un framework

• Pensé par Jonathan Snook en 2011

• Ordonnancement des règles (base, layout, modules, state, theme)

• Ensemble de recommandations

SMACSS

Améliorer ses CSS

• Block – Element – Modifier

• Méthodologie de création d’un arbre BEM

• Elaboré par Yandex en 2010

BEM

Améliorer ses CSS

Préprocésseurs

Outils permettant d’étendre CSS en utilisant variables, fonctions, imports, etc. Est ensuite compilé en CSS.

Postprocésseurs

Permet de transformer du CSS en utilisant du JS. Ecrire du CSS pour l’embellir.

(Pré|Post)?Procésseurs

Améliorer ses CSS

Parce qu’une architecture connue est une architecture qui peut évoluer et s’étendre

• Hologram

• Patternlab

• Frontnote

Styleguides

Améliorer ses CSS

Styleguides

Retours d’expériences

Retours d’expériences

Parce qu’une démo vaut mieux que des mots…

Exemple de structure / theming

Retours d’expériences

• Réfléchissez à la sémantique de vos classes

• Découplez, pensez réutilisation

• Ouvert aux extensions, fermé aux modifications

• Remettez vos CSS en questions

• Itérez

• Documentez

• Pensez Mobile-first !

Conseils à la pelle

Conclusion