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
• Auc...
Les origines
• 5 déclarations
• 1 objectif unique
• Surcharge des sélecteurs
• A quel élément du DOM correspond exactement...
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 à conn...
A qui la faute ?
• Manque de documentation
• Mélange des concepts, des idées
• Manque de connaissances
• Différentes maniè...
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 ...
Améliorer ses CSS
• Styleguide d’architecture plus qu’un framework
• Pensé par Jonathan Snook en 2011
• Ordonnancement des...
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 ensu...
Améliorer ses CSS
Parce qu’une architecture connue est une architecture qui peut évoluer et s’étendre
• Hologram
• Pattern...
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 extensi...
Conclusion
Prochain SlideShare
Chargement dans…5
×

Architecturez vos CSS

371 vues

Publié le

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 !

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
371
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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
  • Architecturez vos CSS

    1. 1. Sauvez un chaton, architecturez vos CSS
    2. 2. Gauthier / Ninir
    3. 3. Gauthier / Ninir • Développeur Full-Stack / DevOps @Buzznative • <3 Open-Source • <3 Musique
    4. 4. Les origines
    5. 5. Les origines
    6. 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. 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. 8. A qui la faute ?
    9. 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. 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
    11. 11. Améliorer ses CSS
    12. 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. 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. 14. Améliorer ses CSS • Block – Element – Modifier • Méthodologie de création d’un arbre BEM • Elaboré par Yandex en 2010 BEM
    15. 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. 16. Améliorer ses CSS Parce qu’une architecture connue est une architecture qui peut évoluer et s’étendre • Hologram • Patternlab • Frontnote Styleguides
    17. 17. Améliorer ses CSS Styleguides
    18. 18. Retours d’expériences
    19. 19. Retours d’expériences Parce qu’une démo vaut mieux que des mots… Exemple de structure / theming
    20. 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. 21. Conclusion

    ×