Pensez vos CSS. Ne laissez pas vos collègues et stagiaires trouver ce que vous avez fait, implémenté.
Faites-le bien, faites-le proprement, de façon claire et concise, parce que "yes we can". Après tout, c'est une question de structuration et de documentation, n'est-ce pas ?
De OOCSS à BEM en passant par SMACSS... de nombreuses méthodes existent pour vous y aider !
6. 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
7. 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 !
9. 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èmesdu CSS
10. 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èmesde l’homme
12. 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
13. 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
14. Améliorer ses CSS
• Block – Element – Modifier
• Méthodologie de création d’un arbre BEM
• Elaboré par Yandex en 2010
BEM
15. 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
16. Améliorer ses CSS
Parce qu’une architecture connue est une architecture qui peut évoluer et s’étendre
• Hologram
• Patternlab
• Frontnote
Styleguides
20. 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
Qui est déjà arrivé sur ce genre de projets… avec ce genre de sélecteur, qui se fait override par d’autres…
Des fichiers CSS de + de 1000 lignes, il faut chercher où une règle empêche une autre de fonctionner, etc…
Autre exemple : l’idée du composant avec un contenu media et un contenu textuel apposé
- On doit être au courant de qui entraîne quoi, de l’éco-système d’un projet, autrement dit les dépendances
Je design mes containers, je design mes éléments un par un, je place chacun par rapport à l’autre…
Inline-block vs float
Seul, en groupe… la mentalit influe sur le rendu
L’annulation de CSS: on écrit plus de CSS plutôt que de refactor
Perte de temps, de bande passante…
Pas le temps de refactor, je dois faire ça pour dans 10 min…
Nicole Sullivan a entre autre optimisé le CSS de Facebook
Nouvelle manière de regarder le CSS et de l’organiser
Les modifiers sont des extensions…
Suite au redesign de Yahoo! Mail
Base (defaults -> tags)
Layout (structure generale d’une page en sections, composée de modules)
Modules : parties réutilisables, modifiables, etc… (medias, rows, links, lists…)
States : « active » / hidden, expanded
Classes > Ids
Noms de classe sémantiques
Decouple : additionnal class names, child selectors
Exemple : Media et media heading (pas de h2, préférrer un .media-heading)
Submodules :
H2 {}
.headline {…}
L’idée est de créer une structure de blocks, ayant des éléments, eux même pouvant avoir des modifiers
Blocs (Formulaire, tabs, etc…)
Elements : Input, buttons,
Element: Input
Modifier : input—rounded
Modifier : input-
Modifier : input.is-disabled
Préprocesseurs : Sass, less, Stylus…
Post procésseurs : Myth, postcss
Une fois que vous aurez atteint un niveau satisfaisant d’architecture, vous pourrez commencer à développer vos styleguide, pour réutiliser, faciliter le travail de vos futurs collaborateurs…
Etape 2 : utiliser la syntaxe BEM pour améliorer les selecteurs, et n’avoir que 3 niveaux de profondeur