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 faire bouger les choses. Qu'est-ce qu'une méthodologie?

Une méthodologie est un système de méthodes . Pensez à une méthode comme simplement une façon de faire quelque chose de manière systématique, d'une certaine façon prédéfinie de faire les choses pour atteindre le résultat que nous voulons.

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

CSS Methodology

Parlons maintenant de la méthodologie CSS. Comme pour presque tout dans la vie, nous avons aussi une méthode d'écriture de CSS: certains commencent par réinitialiser les CSS, certains styles de mise en page, d'autres commencent par deux ou trois classes pour styler un élément, d'autres écrivent tous les codes CSS un seul fichier.

Nos méthodes préférées ont été établies par nous-mêmes au fil du temps ou influencées par d'autres ou exigées sur notre lieu de travail ou en raison de tout ce qui précède. Mais avec le temps, les vétérans du CSS ont formulé des méthodologies pour écrire des CSS qui sont plus flexibles, définies, réutilisables, compréhensibles et gérables .

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

1. OOCSS (CSS orienté objet)
2. BEM (Bloc, Elément, Modificateur)
3. ACSS (CSS atomique)
4. SMACSS (architecture modulaire et évolutive pour CSS)

Remarque : Aucun des concepts mentionnés ci-dessous ne doit être confondu avec un cadre, une bibliothèque ou un outil pouvant avoir le même nom et le même concept que ces méthodologies. Ce post est seulement sur les méthodologies pour écrire CSS.

1. OOCSS

Développé par Nicole Sullivan en 2008, les concepts clés d'OOCSS (Object Oriented CSS) incluent l'identification d' objets CSS, la séparation de la structure et des styles visuels, et évitent les styles basés sur la localisation.

Dans OOCSS, la première étape que nous propose Nicole est d' identifier les objets en CSS .

"Fondamentalement, un" objet "CSS est un motif visuel répétitif, qui peut être extrait dans un extrait indépendant de HTML, CSS, et peut-être JavaScript. Cet objet peut ensuite être réutilisé sur l'ensemble d'un site. - Nicole Sullivan, Github (OOCSS) "

Prenons par exemple cette structure de ce site. Voici quelque chose qui est un motif visuel répétitif et a son propre 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-primary et un sidebar avec des titres que nous nommerons post-preview-secondary .

Nous devons séparer la structure et la peau (c'est-à-dire les 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 sont similaires, avec des images à gauche et des titres à droite.

Donnons aux images des deux objets une classe post-preview-image et ajoutons le code qui place l'image sur la gauche. Cela nous empêche d'avoir à répéter le code de l'endroit où placer l'image dans les objets en CSS. S'il y a d'autres objets similaires, nous réutilisons l'image post-preview-image pour eux.

La séparation de peau peut également être faite pour des styles plus simples comme des frontières ou des milieux . Si vous avez plusieurs objets avec la même bordure bleue, créer une classe distincte pour la bordure bleue et l'ajouter aux objets réduira le nombre de fois que les bordures bleues doivent être codées en CSS.

Nicole suggère également de ne pas ajouter de styles basés sur l'emplacement, par exemple, au lieu de cibler tous les liens à l'intérieur d'une div particulière pour mettre en évidence, donner à ces liens une classe de surlignage avec les styles CSS appropriés. De cette façon, lorsque vous devez mettre en surbrillance un lien dans une autre partie de la page, vous pouvez réutiliser la classe surligneur.

Avantages de l'OOCSS : codes de style visuel réutilisables, codes flexibles de localisation, réduction des sélecteurs imbriqués en profondeur.

Contre OOCSS : Sans une bonne quantité de motifs visuels répétitifs, la séparation des codes de structure et de style visuel semble inutile.

2. BEM

Développé par les développeurs de Yandex en 2009, les concepts clés de BEM (Block, Element, Modifier) ​​englobent l'identification des blocs, des éléments et des modificateurs et leur dénomination en conséquence.

Un "bloc" est essentiellement le même qu'un "objet" (à partir de l'exemple précédent), un "élément" fait référence aux composants du bloc (image, titre, texte de prévisualisation dans les preview-post- objets ci preview-post- dessus). Un "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 agit comme votre modificateur.

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

• un bloc de menu aura le menu classe
• ses éléments auront la classe menu__item (le bloc et l'élément sont séparés par un double trait de soulignement)
• le modificateur pour l'état désactivé du menu peut avoir la classe menu_disabled (modificateur délimité par un seul 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 le format key_value pour le nommage. Par exemple, pour distinguer les éléments de menu menu__item_status_obsolete à des articles obsolètes, nous pouvons leur attribuer la classe menu__item_status_obsolete, et pour styliser les éléments de menu menu__item_status_obsolete vers des documents en attente, le nom de classe peut être menu__item_status_pending .

La dénomination peut être modifiée pour ce qui fonctionne pour vous. L'idée est de pouvoir identifier, des blocs, des éléments et des modificateurs à partir des noms de classes . Découvrez certains des systèmes de nommage répertoriés dans le site BEM.

Le site de BEM indique également comment la séparation des blocs, des éléments et des modificateurs peut également être introduite dans le système de fichiers CSS . Les blocs tels que "boutons" et "entrées" peuvent avoir leurs propres dossiers constitués des fichiers (.css, .js) qui sont associés à ces blocs, ce qui rend les choses plus faciles lorsque nous voulons importer ces blocs dans d'autres projets.

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

Inconvénients de BEM: Pour garder les noms sains, BEM conseille de garder le bloc à l'imbrication des éléments peu profonde.

3. ACSS

Rendu célèbre par Yahoo, quelque part vers la fin de la première décennie du ^XXIe siècle, les concepts clés d'ACSS consistent à créer des classes pour le style de style le plus atomique, c'est-à-dire une paire propriété-valeur, puis à les utiliser en HTML selon les besoins.

Il est difficile de déterminer quand ACSS (Atomic CSS) a été développé pour la première fois depuis que le concept est utilisé depuis un moment. Les développeurs utilisent depuis longtemps des classes telles que .clearfix{overflow: hidden} . L'idée dans ACSS est d' avoir une classe pour à peu près toutes les paires propriété-valeur réutilisables non liées au contenu dont nous aurons besoin sur notre site, et d'ajouter ces classes si nécessaire aux éléments HTML.

Voici un exemple de classes basées sur ACSS et comment elles sont utilisées en HTML.

 .mr-8 {marge-droite: 8px;} .fl-r {float: right;} 

Comme vous pouvez le voir, le nombre de classes sera élevé 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 utilise cela après tout.

Avantages d'ACSS: Styling HTML sans laisser de HTML.

Contre ACSS: Trop de classes, pas très soignées et vous pourriez le détester.

4. SMACSS

Développé en 2011 par Jonathan Snook SMACSS (Scalable and Modular Architecture pour CSS) travaille en identifiant les 5 différents types de règles de style. Les noms de classe et le système de classement sont créés en fonction de ceux-ci.

"SMACSS est un moyen d'examiner votre processus de conception et comme un moyen d'adapter ces cadres rigides dans un processus de réflexion flexible. - Jonathan Snook "

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

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

  , .

• Les styles de mise en page sont des styles utilisés pour définir la mise en page de la page, comme le codage où iront l'en-tête, le pied de page et les menus latéraux.
• Les styles de module sont spécifiques à un module tel qu'une galerie ou un diaporama.
• Les styles d'état servent à mettre en évidence des éléments avec des états modifiables comme cachés ou désactivés.
• 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 en utilisant un préfixe dans le nom de la classe, par exemple, l-header (pour la mise en page) ou t-header (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 distincts.

Avantages de SMACSS: code mieux organisé.

Inconvénients de SMACSS : Aucun je peux penser.

Il y a un livre en ligne gratuit que vous pouvez lire sur SMACSS, ou vous pouvez acheter sa version ebook pour l'étudier plus.

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 pour répondre à vos besoins.

Il y a aussi des frameworks et des bibliothèques si vous voulez 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).