Comprendre les méthodologies d'écriture CSS

Dans ce post nous allons voir quelles sont les méthodologies d'écriture CSS, certaines méthodologies bien connues, et comment elles peuvent nous être utiles pour optimiser notre code CSS. Commençons par la question la plus simple pour bien démarrer. Qu'est-ce qu'une méthodologie??

Une méthodologie est un système de méthodes. Pensez à une méthode simplement comme un moyen de faire quelque chose de manière systématique, selon une certaine manière prédéfinie de faire les choses pour obtenir le résultat souhaité.

Pour obtenir de meilleurs résultats, nous améliorons nos méthodes en les planifiant mieux, changer l'ordre, simplifier les étapes - tout ce qui fonctionne plus rapide et est plus efficace.

Méthodologie CSS

Parlons maintenant de la méthodologie CSS. Comme avec presque tout dans la vie, nous avons aussi une méthode pour écrire du CSS: certains écrivent en réinitialisant CSS en premier, certains styles de mise en place en dernier, certains commencent par deux ou trois classes pour styler un élément, certains écrivent tous les codes CSS dans un seul fichier.

Nos méthodes préférées ont été soit établies par nous-mêmes au fil du temps, soit influencées par d’autres personnes, soit requises sur notre lieu de travail, soit en raison de tout ce qui précède. Mais au fil du temps, les anciens combattants de la CSS ont formulé méthodologies pour écrire CSS qui sont plus flexible, défini, réutilisable, compréhensible et maniable.

Nous allons examiner ces méthodologies formulées, qui comprendront:

1. OOCSS (CSS orienté objet)
2. BEM (bloc, élément, modificateur)
3. ACSS (CSS atomique)
4. SMACSS (Architecture modulaire et évolutive pour CSS)

RemarqueRemarque: Aucun des concepts mentionnés ci-dessous ne doit être confondu avec un framework, une bibliothèque ou un outil pouvant porter le même nom et le même concept que ces méthodologies. Cet article concerne uniquement les méthodologies pour écrire du CSS.

1. OOCSS

Développés par Nicole Sullivan en 2008, les concepts clés de OOCSS (CSS orienté objet) incluent CSS objet identification, séparation de la structure et des styles visuels, et éviter les styles basés sur l'emplacement.

En OOCSS, la toute première étape proposée par Nicole consiste à: identifier des objets en CSS.

“Fondamentalement, un "objet" CSS est un motif visuel répété, qui peut être résumé en un fragment indépendant de code HTML, CSS et éventuellement JavaScript. Cet objet peut ensuite être réutilisé sur un site. - Nicole Sullivan, Github (OOCSS)“

Prenons par exemple cette structure de ce site. Voici quelque chose qui est un motif visuel répété et qui a son propre code HTML et / ou CSS indépendant:

Nous avons ici deux types d’objets, un plus grand aperçu des titres que nous nommerons post-preview-primaire et une barre latérale avec des titres que nous nommerons post-preview-secondaire.

Nous devons le faire structure et peau séparées (c.-à-d. des styles qui créent l'apparence des objets). Les deux types d’objets ont des structures différentes, l’un est dans une boîte plus grande même s’ils se ressemblent, avec des images à gauche et des titres à droite..

Donnons une classe aux images des deux objets post-preview-image et ajoutez le code qui met l'image à gauche. Cela nous évite d'avoir à répéter le code de l'emplacement de l'image dans les objets en CSS. S'il y a d'autres objets similaires, nous réutilisons post-preview-image pour eux.

La séparation de la peau peut également être effectuée pour des styles plus simples tels que bordures ou arrière-plans. Si vous avez plusieurs objets avec la même bordure bleue, créer une classe séparée pour la bordure bleue et en l'ajoutant aux objets réduire le nombre de fois où les bordures bleues doivent être codées en CSS.

Nicole suggère également de ne pas ajouter des styles en fonction de l'emplacement, par exemple, au lieu de cibler tous les liens d’une div particulière à mettre en évidence, donnez à ces liens un classe surligneur avec les styles CSS appropriés. Ainsi, lorsque vous devez mettre un lien en surbrillance dans une autre partie de la page, vous pouvez réutiliser la classe de surligneur..

Avantages de OOCSS: Codes de style visuels réutilisables, codes de localisation flexibles, réduction du nombre de sélecteurs imbriqués profonds.

Les inconvénients de OOCSS: Sans une quantité importante de motifs visuels répétitifs, il semble inutile de séparer les codes de structure et de style visuel.

2. BEM

Développés par les développeurs de Yandex en 2009, les concepts clés de BEM (bloc, élément, modificateur) englobent l’identification bloc, élément Et modificateur et en les nommant en conséquence.

UNE “bloc” est essentiellement le même qu'un “objet”(de l'exemple précédent), un “élément” fait référence aux composants du bloc (image, titre, aperçu du texte ci-dessus aperçu-post- objets). UNE “modificateur” peut être utilisé lorsque l'état d'un bloc ou d'un élément change, par exemple lorsque vous ajoutez une classe active à un élément de menu pour le mettre en surbrillance, la classe active sert de modificateur.

Une fois les composants identifiés, nommez-les en conséquence. Par exemple:

• un bloc de menu aura la classe menu
• ses articles auront la classe élément du menu (bloc et élément sont séparés par un double soulignement)
• le modificateur pour l'état désactivé du menu peut avoir la classe menu_disabled (modificateur délimité par un simple trait de soulignement)
• modificateur pour l'état désactivé d'un élément de menu peut être menu__item_disabled.

Pour les modificateurs, nous pouvons également utiliser valeur clé format pour nommer. Par exemple, pour distinguer les éléments de menu liés à des articles obsolètes, nous pouvons leur donner la classe menu__item_status_obsolete, et pour le style des éléments de menu qui pointent vers des documents en attente, le nom de la classe peut être menu__item_status_pending.

Le nom peut être modifié pour ce qui fonctionne pour vous. L’idée est de pouvoir identifier, bloquer, éléments et modificateurs à partir des noms de classe. Découvrez certains des systèmes de nommage répertoriés dans le site BEM.

Le site de BEM répertorie également comment la ségrégation de blocs, d'éléments et de modificateurs peut également être introduite dans le système de fichiers CSS. Les blocs aiment “boutons” et “contributions” peuvent avoir leurs propres dossiers contenant les fichiers (.css, .js) associés à ces blocs, ce qui facilite les choses lorsque nous voulons importer ces blocs dans d'autres projets.

Avantages de BEM:Noms de classe faciles à utiliser et réduction du nombre de sélecteurs CSS profonds.

Inconvénients de BEM:Pour que les noms restent sains, BEM vous conseille de conserver les blocs imbriqués peu profonds..

3. ACSS

Rendu célèbre par Yahoo, quelque part vers la fin du premier décennie du 21^st siècle, les concepts clés d’ACSS consistent à créer des classes pour le niveau de style le plus atomique, c’est-à-dire une paire propriété-valeur, puis à les utiliser au besoin en HTML.

Il est difficile de déterminer quand ACSS (Atomic CSS) a été développé car le concept est utilisé depuis un certain temps. Les développeurs utilisent des classes telles que .clearfix débordement: masqué pendant longtemps. L’idée dans ACSS est de avoir une classe pour à peu près chaque paire propriété-valeur liée non-contenu réutilisable nous aurons besoin de notre site, et d'ajouter ces classes si nécessaire aux éléments HTML.

Vous trouverez ci-dessous un exemple de classes basées sur ACSS et leur utilisation en HTML..

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

Comme vous pouvez le constater, le nombre de classes va augmenter avec cette méthode et le HTML sera encombré par toutes ces classes. Cette méthode n'est pas efficace à 100% mais peut être utile si vous le souhaitez. Yahoo l'utilise après tout.

Avantages de ACSS:Styling HTML sans quitter HTML.

Inconvénients de ACSS:Trop de cours, pas très soigné et vous pourriez le détester.

4. SMACSS

Développé en 2011 par Jonathan Snook SMACSS (Architecture modulaire et évolutive pour CSS) identifie les 5 types de règles de style différents. Les noms de classe et le système de classement sont créés à partir de ces.

“SMACSS est un moyen d’examiner votre processus de conception et d’intégrer ces cadres rigides à un processus de réflexion flexible. - Jonathan Snook”

SMACSS identifie 5 types de règles de style, à savoir base, mise en page, module, état, et thème.

• Les styles de base sont les styles par défaut dirigés vers les balises HTML de base telles que

  , .

• Les styles de mise en page sont des styles utilisés pour définir la mise en page de la page, par exemple le codage de l'en-tête, du pied de page et des menus latéraux..
• Les styles de module sont spécifiques à un module comme une galerie ou un diaporama.
• Les styles d'état permettent de mettre en évidence des éléments avec des états variables tels que masqué ou désactivé.
• Le thème est utilisé pour changer le schéma visuel de la page.

Les différentes règles de style peuvent être identifiées à l'aide d'un préfixe dans le nom de la classe, par exemple, l-en-tête (pour la mise en forme) ou t-en-tête (pour le thème). Nous pouvons également organiser ces différents types de règles en les plaçant dans des fichiers et des dossiers séparés..

Avantages de SMACSS:Code mieux organisé.

Contre de SMACSS: Aucun je ne peux penser.

Vous pouvez lire un livre en ligne gratuit sur SMACSS ou acheter sa version ebook pour l'étudier davantage..

Conclusion

Les méthodologies CSS ci-dessus vous donneront un système pour gérer et optimiser vos codes CSS. Ils peuvent être combinés ensemble, comme OOCSS-SMACSS, ou OOCSS-BEM, ou BEM-SAMCSS selon vos besoins..

Il existe également des frameworks et des bibliothèques si vous souhaitez un système automatisé pour l'exécution de méthodologies CSS telles que:

• Cadre OOCSS
• Outils BEM
• Cadre CSS organique (suit le concept atomique).