Les bases du CSS orienté objet (OOCSS)

Le développement frontend avance rapidement avec de nombreuses nouvelles techniques ajoutées chaque année. Les développeurs peuvent avoir du mal à tout suivre. Entre Sass et PostCSS, il est facile de se perdre dans la mer des outils de développement.

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

Dans ce post, j'aimerais vous présenter le Principes fondamentaux de OOCSS, et comment ces idées peuvent être appliquées au travail Web frontal. Cette technique ne convient peut-être pas à tous les développeurs, mais il est utile de comprendre les nouveaux concepts pour décider si votre flux de travail pourrait en tirer parti..

Ce qui rend CSS orienté objet?

La programmation orientée objet (POO) est un paradigme de programmation qui se concentre sur créer des objets réutilisables et établir des relations entre eux, par opposition à la programmation procédurale qui organise le code en procédures (routines, sous-routines ou fonctions).

La POO est devenue largement utilisée à la fois JavaScript et langues de base ces dernières années, mais organiser CSS conformément à ses principes reste un nouveau concept.

le “objet” dans OOCSS fait référence à un Élément HTML ou tout ce qui lui est associé (comme les classes CSS ou les méthodes JavaScript). Par exemple, vous pourriez avoir un objet widget de barre latérale qui pourrait être répliqué à des fins différentes (inscription à la newsletter, blocs d'annonces, publications récentes, etc.). CSS peut cibler ces objets en masse ce qui rend la mise à l'échelle un jeu d'enfant.

En 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 nœuds
3. Des composants comme des images de fond
4. Comportements JavaScript, auditeurs ou méthodes associés à un objet

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

De nombreux développeurs diraient que OOCSS est plus facile à partager avec les autres et à récupérer après des mois (ou des années) de développement inactif. Cela se compare à d’autres méthodes modulaires comme SMACSS, qui a des règles plus strictes pour la catégorisation des objets en CSS..

La page FAQ OOCSS contient une foule d'informations si vous êtes curieux d'en savoir plus. Et la créatrice Nicole Sullivan parle souvent d’OOCSS et de ses liens avec le développement Web moderne..

Séparer la structure du style

Une grande partie de OOCSS consiste à écrire du code qui sépare la structure de la page (largeur, hauteur, marges, remplissage) de son apparence (polices, couleurs, animations). Ceci permet skinning personnalisé à appliquer sur plusieurs éléments de page sans affecter la structure.

Cela est également utile pour concevoir des composants pouvant être déplacé autour de la mise en page avec facilité. Par exemple, un “Messages récents” le widget 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 “Messages récents” widget qui dans ce cas est notre objet CSS:

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

Remarquerez que disposition est géré avec le .side-widget classe pouvant être appliquée à plusieurs éléments de la barre latérale, tout en apparence est géré avec le .Messages récents classe qui pourrait également être utilisé pour habiller d’autres widgets. Par exemple, si le .Messages récents les widgets ont été déplacés vers le pied de page, il ne prend peut-être pas le même positionnement, mais il peut avoir le même aspect.

Jetez également un coup d'œil à cet exemple de l'encadré de CodePen. Il utilise une séparation distincte des classes pour les flottants et l'alignement du texte de sorte 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 OOCSS.

En termes simples, cela signifie seulement que vous devriez é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 guillemets 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ément spéciaux h2 * / / * Non-OOCSS * / .sidebar / * contenu identique 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 second format de code, il est fortement recommandé de suivre le premier format si vous voulez écrire du code OOCSS vierge..

Directives de développement

Il est difficile de définir des spécifications précises, car les développeurs ne cessent de débattre de l’objet du logiciel OOCSS. Mais voici Quelques suggestions qui peuvent vous aider à écrire du code OOCSS plus propre:

• Travailler avec classes au lieu d'identifiants pour le style.
• Essayez de s'abstenir de la spécificité de classe descendante multi-niveaux sauf si nécessaire.
• Définir styles uniques avec des classes répétables (par exemple, float, clearfix, piles de polices uniques).
• Étendre les éléments avec des classes ciblées plutôt que des classes parentales.
• Organisez votre feuille de style en sections, envisager d'ajouter une table des matières.

Notez que les développeurs doivent toujours utiliser les identifiants pour le ciblage JavaScript, mais ils ne sont pas obligatoires pour CSS car ils sont trop spécifiques. Si un objet utilise un identifiant pour le style CSS, il ne peut jamais être répliqué car les identifiants 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 chaînées pour des fonctionnalités supplémentaires. Un seul élément peut avoir plus de 10 classes associées. Personnellement, je recommanderais personnellement plus de 10 classes sur un élément, mais cela permet aux développeurs de constituer une bibliothèque de styles réutilisables pour un nombre illimité d’éléments de page..

Les noms de classe dans OOCSS sont quelque peu controversés et ne sont pas gravés dans le marbre. De nombreux développeurs préfèrent que les cours soient courts et pertinents.

L'affaire Camel est aussi populaire, par exemple .errorBox au lieu de .boîte d'erreur. Si vous examinez les noms de classe dans la documentation de OOCSS, vous remarquerez que le cas de chameau est le “officiel” recommandation. 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 celui-ci a rapidement dépassé la communauté frontale. Si vous n'avez pas encore essayé Sass, cela vaut la peine d'essayer. Il vous permet d'écrire du code avec des variables, des fonctions, des méthodes d'imbrication et de compilation telles que des fonctions mathématiques.

Entre des mains compétentes, Sass et OOCSS pourraient être un match paradisiaque. Vous trouverez un excellent article à ce sujet sur le blog The Sass Way.

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

Si vous écrivez constamment des feuilles de style, vous économiserez heures de dactylographie et aide automatiser le processus OOCSS.

Rappelez-vous aussi 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 linting avancés liés au flux de travail.

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

Considérations de performance

OOCSS est conçu pour fonctionner en douceur et sans trop de confusion. Les développeurs font de leur mieux ne pas se répéter à chaque tournant, en fait c'est la prémisse 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é..

Étant donné que le SACO est encore un sujet nouveau, il est difficile de discuter du sujet du ballonnement. Beaucoup de fichiers CSS finissent par être gonflés avec peu de structure, tandis que OOCSS fournit une structure rigide et (idéalement) moins gonflée. Le problème de performances le plus important concerne le code HTML où certains éléments peuvent accumuler une poignée de classes différentes pour la structure et la conception de la mise en page..

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 cela se passe. Si vous tombez amoureux de l'OOCSS, cela pourrait changer radicalement la façon dont vous codez les sites Web. Alternativement, si vous détestez cela, vous apprenez toujours une nouvelle technique et réfléchissez de manière critique à son fonctionnement. C'est gagnant-gagnant, peu importe quoi.

Soyez occupé à écrire OOCSS

La meilleure façon d'apprendre quelque chose dans le développement Web est de pratiquer. Si vous comprenez déjà les bases du CSS, 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 le meilleur moyen de commencer et d’améliorer vos connaissances à partir de là..

Jetez un coup d’œil à ces ressources pour approfondir vos recherches dans le domaine en évolution des OOCSS..

• OOCSS Site officiel
• CSS orientée objet: quoi, comment et pourquoi
• OOCSS + Sass = Le meilleur moyen de CSS
• Une introduction à CSS orienté objet