Les bases du CSS orienté objet (OOCSS)

Le développement de frontend se déplace rapidement avec de nombreuses nouvelles techniques ajoutées chaque année. Cela peut être difficile pour les développeurs de suivre tout. Entre Sass et PostCSS, il est facile de se perdre dans la mer des outils de développement.

Une nouvelle technique est CSS orienté objet, également appelé OOCSS pour faire court. Ce n'est pas un outil, mais plutôt une méthodologie d'écriture CSS qui vise à rendre le CSS modulaire et basé sur les objets .

Dans ce billet, j'aimerais présenter les principes de base de l'OOCSS et comment ces idées peuvent être appliquées au travail en ligne . Cette technique peut ne pas plaire à tous les développeurs, mais cela vaut la peine de comprendre de nouveaux concepts pour décider si votre flux de travail pourrait en bénéficier.

Qu'est-ce qui rend CSS objet orienté?

La programmation orientée objet (POO) est un paradigme de programmation qui se concentre sur la création d'objets réutilisables et l' établissement de relations entre eux, contrairement à la programmation procédurale qui organise le code en procédures (routines, sous-routines ou fonctions).

La POO est devenue largement utilisée dans les langages JavaScript et backend au cours des dernières années, mais l'organisation de CSS selon ses principes est encore un nouveau concept.

L'objet dans OOCSS fait référence à un élément HTML ou à tout ce qui y est associé (comme les classes CSS ou les méthodes JavaScript). Par exemple, vous pourriez avoir un objet widget sidebar qui pourrait être répliqué à différentes fins (inscription à la newsletter, blocs d'annonces, messages récents, etc.). CSS peut cibler ces objets en masse, ce qui rend la mise à l'échelle un jeu d'enfant.

Résumant l'entrée GitHub d'OOCSS, un objet CSS peut comporter quatre éléments:

1. Noeud (s) HTML du DOM
2. Déclarations CSS sur le style de ces noeuds
3. Des composants comme des images de fond
4. Comportements JavaScript, écouteurs ou méthodes associés à un objet

De manière générale, CSS est orienté objet lorsqu'il considère des classes réutilisables et pouvant être ciblées sur plusieurs éléments de page .

Beaucoup de développeurs diraient que OOCSS est plus facile à partager avec les autres et plus facile à ramasser après des mois (ou des années) de développement inactif. Cela se compare avec d'autres méthodes modulaires comme SMACSS qui a des règles plus strictes pour catégoriser les objets dans CSS.

La page FAQ OOCSS a un tas d'informations si vous êtes curieux d'en savoir plus. Et la créatrice Nicole Sullivan parle souvent d'OOCSS et de son lien avec le développement web moderne.

Séparer la structure du style

Une grande partie d'OOCSS est l'écriture de code qui sépare la structure de la page (largeur, hauteur, marges, remplissage) de l'apparence (polices, couleurs, animations). Cela permet à l' habillage personnalisé d'être appliqué sur plusieurs éléments de page sans affecter la structure .

Ceci est également utile pour concevoir des composants qui peuvent être déplacés facilement. Par exemple, un widget "Messages récents" dans la barre latérale doit pouvoir être déplacé dans le pied de page ou au-dessus du contenu tout en conservant des styles similaires.

Voici un exemple de OOCSS pour un widget "Recent Posts" qui dans ce cas est notre objet CSS:

 / * Structure * / .side-widget {largeur: 100%; rembourrage: 10px 5px; } / * Skinning * / .recent-posts {famille de fontes: Helvetica, Arial, sans-serif; couleur: # 2b2b2b; taille de police: 1.45em; } 

Notez que la mise en page est gérée avec la classe .side-widget qui peut également être appliquée à plusieurs éléments de la barre latérale, tandis que l' apparence est gérée avec la classe .recent-posts qui peut également être utilisée pour .recent-posts autres widgets. Par exemple, si le widget .recent-posts été déplacé vers le pied de page, il ne prendra peut-être pas le même positionnement, mais il pourrait avoir la même apparence.

Jetez aussi un coup d'oeil à cet exemple de barre latérale de CodePen. Il utilise une séparation distincte des classes pour les flottants et l'alignement du texte afin que la réplication ne nécessite pas de code CSS supplémentaire .

Séparer le conteneur du contenu

Séparer le contenu de son élément conteneur est un autre principe important de l'OOCSS.

En termes simples, cela signifie uniquement que vous devez éviter d'utiliser des sélecteurs enfants chaque fois que cela est possible. Lorsque vous personnalisez des éléments de page uniques tels que des liens d'ancrage, des en-têtes, des blocs-notes ou des listes non ordonnées, vous devez leur attribuer des classes uniques plutôt que des sélecteurs descendants.

Voici un exemple simple:

 / * OOCSS * / .sidebar {/ * contenu de la barre latérale * /} h2.sidebar-title {/ * styles d'éléments h2 spéciaux * /} / * Non-OOCSS * / .sidebar {/ * même contenu de la barre latérale * /} .sidebar h2 {/ * ajoute plus de spécificité que nécessaire * /} 

Bien qu'il ne soit pas horrible d'utiliser le deuxième format de code, il est fortement recommandé de suivre le premier format si vous voulez écrire un OOCSS propre.

Lignes directrices de développement

Il est difficile d'établir des spécifications précises, car les développeurs discutent constamment du but de l'OOCSS. Mais voici quelques suggestions qui peuvent vous aider à écrire un code OOCSS plus propre :

• Travaillez avec des classes au lieu des ID pour le style.
• Essayez de vous abstenir de la spécificité des classes descendantes à plusieurs niveaux, à moins que cela ne soit nécessaire.
• Définissez des styles uniques avec des classes répétables (par exemple, flottants, clearfix, piles de polices uniques).
• Étendez les éléments avec des classes ciblées plutôt qu'avec des classes parentes.
• Organisez votre feuille de style en sections, pensez à ajouter une table des matières.

Notez que les développeurs doivent toujours utiliser des ID pour le ciblage JavaScript, mais ils ne sont pas requis pour les CSS, car ils sont trop spécifiques . Si un objet utilise un ID pour le style CSS, il ne peut jamais être répliqué car les ID sont des identifiants uniques. Si vous utilisez uniquement des classes pour le style, l' héritage devient beaucoup plus facile à prévoir .

De plus, les classes peuvent être enchaînées pour des fonctionnalités supplémentaires. Un seul élément peut avoir 10+ classes attachées à celui-ci. Bien que 10 classes sur un élément ne soient pas recommandées personnellement, cela permet aux développeurs d'amasser une bibliothèque de styles réutilisables pour des éléments de pages illimités.

Les noms de classe au sein de l'OOCSS sont quelque peu controversés et ne sont pas gravés dans la pierre. Beaucoup de développeurs préfèrent garder les cours courts et précis.

Camel case est également populaire, par exemple .errorBox au lieu de .error-box . Si vous regardez la dénomination des classes dans la documentation de l'OOCSS, vous remarquerez que le cas du chameau est la recommandation "officielle". Il n'y a rien de mal avec les tirets mais en règle générale, il est préférable de suivre les directives de l'OOCSS.

OOCSS + Sass

La plupart des développeurs web aiment déjà Sass et il a rapidement dépassé la communauté frontend. Si vous n'avez pas encore essayé Sass, ça vaut le coup de le faire. Il vous permet d'écrire du code avec des variables, des fonctions, des méthodes d'imbrication et de compilation comme des fonctions mathématiques.

Dans des mains compétentes, Sass et OOCSS pourraient être un match fait au paradis. Vous trouverez un excellent article à ce sujet sur le blog de Sass Way.

Par exemple, en utilisant la directive Sass @extend vous pouvez appliquer les propriétés d'une classe à une autre classe. Les propriétés ne sont pas dupliquées mais à la place, les deux classes sont combinées avec un sélecteur de virgules. De cette façon, vous pouvez mettre à jour les propriétés CSS dans un emplacement.

Si vous écrivez constamment des feuilles de style, cela vous épargnera des heures de dactylographie et contribuera à automatiser le processus OOCSS .

Rappelez-vous également que la maintenance du code est une grande partie de OOCSS . En utilisant Sass, votre travail devient plus facile avec des variables, des mixins et des outils de filtrage avancés liés au flux de travail.

Un attribut clé du bon code OOCSS est la capacité à le partager avec n'importe qui, même vous-même à une date ultérieure, et être capable de le ramasser facilement.

Considérations de performance

OOCSS est destiné à fonctionner sans heurts et sans beaucoup de confusion. Les développeurs font de leur mieux pour ne pas se répéter à chaque tournant, en fait c'est le principe derrière le développement DRY. Au fil du temps, la technique OOCSS peut conduire à des centaines de classes CSS avec des propriétés individuelles appliquées des dizaines de fois dans un document donné.

Depuis OOCSS est encore un nouveau sujet, il est difficile de discuter sur le sujet de ballonnement. De nombreux fichiers CSS finissent par gonfler avec peu de structure, alors que OOCSS fournit une structure rigide et (idéalement) moins de ballonnements. La plus grande préoccupation de performance serait dans le HTML où certains éléments peuvent accumuler une poignée de classes différentes pour la structure de mise en page et la conception.

Vous trouverez des discussions intéressantes sur ce sujet sur des sites comme Stack Overflow et CSS-Tricks.

Ma recommandation est d'essayer de construire un exemple de projet, et de voir comment ça se passe. Si vous tombez amoureux d'OOCSS, cela peut changer radicalement la façon dont vous codez les sites Web. Alternativement, si vous le détestez, vous apprenez toujours une nouvelle technique et pensez de façon critique à la façon dont il fonctionne. C'est gagnant-gagnant, peu importe quoi.

Obtenez Occupé Écriture OOCSS

La meilleure façon d'apprendre quelque chose dans le développement web est de pratiquer. Si vous connaissez déjà les bases du CSS, alors vous êtes sur la bonne voie!

Comme OOCSS ne nécessite pas de pré-traitement, vous pouvez l'essayer avec un IDE en ligne, tel que CodePen. Les projets simples sont les meilleurs pour commencer et améliorer vos connaissances à partir de là.

Jetez un oeil à ces ressources pour poursuivre vos recherches dans le domaine en évolution de OOCSS.

• Site officiel de l'OOCSS
• CSS orienté objet: quoi, comment et pourquoi
• OOCSS + Sass = La meilleure façon de CSS
• Une introduction à l'objet orienté CSS