Recommandé
Recommandé
Contenu connexe
Similaire à Architecturez vos CSS
Similaire à Architecturez vos CSS (20)
Architecturez vos CSS
- 1. Sauvez un chaton, architecturez vos CSS
- 3. Gauthier / Ninir • Développeur Full-Stack / DevOps @Buzznative • <3 Open-Source • <3 Musique
- 4. Les origines
- 5. Les origines
- 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 !
- 8. A qui la faute ?
- 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
- 19. Retours d’expériences Parce qu’une démo vaut mieux que des mots… Exemple de structure / theming
- 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
- 21. Conclusion
Notes de l'éditeur
- 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