Tame des feuilles de style indisciplinées avec ces trois méthodologies CSS

Cet article fait partie d'une série d'articles en collaboration avec Siteground. Merci de soutenir les partenaires qui ont rendu le point de point possible.

Cet article explorera trois méthodes d'architecture CSS réussies, y compris leurs principes, objectifs et avantages.

Points clés

• BEM, SMACSS et ECSS sont trois méthodes pour gérer les architectures CSS, chacune avec ses propres principes, objectifs et avantages.
• BEM (modificateur d'éléments de blocs) se concentre sur la maintenance facile à long terme de la réutilisabilité des projets et des composants, en utilisant les conventions de dénomination intelligentes pour organiser le code CSS en modules réutilisables.
• SMACSS (architecture CSS extensible et modulaire) classe les règles CSS pour identifier les modèles et créer des guides pour la rédaction du CSS maintenable et réutilisable, avec des conventions de dénomination flexibles qui aident à coder l'organisation et l'efficacité de l'équipe.
• ECSS (CSS permanent) met l'accent sur l'isolement, encapsulant tout le code nécessaire pour construire chaque composant dans son propre dossier partagé et en utilisant des conventions de dénomination CSS strictes. À long terme, cette approche prend en charge une maintenance facile et une augmentation de la taille des fichiers minimisée.

Pourquoi le code CSS devient-il incontrôlable?

Garder le code CSS mince, réutilisable et maintenable est très difficile. Cela peut se produire dans des projets petits, moyens et grands, en particulier dans des projets avec plusieurs développeurs impliqués si vous ne parvenez pas à exécuter de règles de codage et d'organisation de manière cohérente. Lorsque la base de code est grande, subit de nombreux changements au fil du temps et manque d'organisation, les équipes préfèrent souvent ajouter de nouvelles règles de style à la fin du document de feuille de style plutôt que de supprimer une partie du code ou de modifier le code existant. La raison principale est souvent que l'effet de l'édition ou de la suppression des déclarations CSS est imprévisible et peut provoquer des pauses de conception quelque part dans le projet. Il s'agit d'une stratégie ratée qui conduit à la duplication de code, aux problèmes de priorité (les règles de style remplacé deviennent une bataille) et l'inflation globale. En règle générale, le choix de la méthode qui convient le mieux à vos besoins est un processus itératif qui commence par vous familiariser avec les méthodes existantes. Voici trois façons de vous aider à relever les défis des feuilles de style désordonnées.

bem

BEM signifie Modificateur d'éléments en blocs. Il s'agit d'une méthode architecturale créée par Yandex pour la construction de CSS. L'objectif de la méthode BEM est de développer un site Web qui est rapidement lancé et pris en charge à long terme. Il aide à créer des composants d'interface extensibles et réutilisables. Site Web BEM

Le concept clé ici est la facilité à long terme de maintenance des projets et des composants réutilisabilité. La stratégie de base de BEM est d'organiser le code CSS en modules réutilisables à l'aide de conventions de dénomination intelligentes. Regardons de plus près.

Qu'est-ce qu'un bloc?

Les blocs d'identification sont une étape clé dans l'application de la méthode BEM. Le bloc est A & GT; composant de page fonctionnellement indépendant qui peut être réutilisé. Dans HTML, les blocs sont représentés par les attributs de classe. Documentation BEM.

Lorsque vous décidez quoi traiter comme un bloc, demandez-vous si vous pouvez facilement supprimer cette partie du code et l'utiliser ailleurs. Par exemple, vous pouvez traiter un en-tête de site Web ou un pied de page comme un bloc. Vous pouvez nicher en toute sécurité, par exemple, vous pouvez placer des blocs de menu à l'intérieur des blocs d'en-tête.

<ul class="menu"></ul>

Parce qu'en principe, vous devriez être en mesure de réutiliser des blocs n'importe où sur la page, le CSS du bloc ne doit pas définir de marges ou de règles de positionnement. Enfin, lors de la sélection d'un nom, assurez-vous que le nom décrit à quoi sert le bloc, pas à quoi il ressemble ou à ses états. En d'autres termes, son nom devrait répondre à cette question: Qu'est-ce que c'est? (par exemple en-tête, menu, etc.), au lieu de à quoi cela ressemble-t-il? (par exemple, en-tête fixe, petit menu, etc.).

Que sont les éléments?

Selon la méthode BEM, un élément fait partie de A & GT; Obtenez bem

Voici quelques principes qui s'appliquent aux éléments:

• Les éléments ne peuvent exister que dans les blocs
• Les éléments ne peuvent pas appartenir à d'autres éléments, ils ne peuvent faire qu'une partie du bloc
• Vous pouvez construire des éléments imbriqués
• Le nom de l'élément décrit son objectif, pas son apparence.
Lorsque vous nommez les éléments, vous devez suivre la convention suivante: Block__Element

Qu'est-ce qu'un modificateur?

Le modificateur

est une entité qui définit l'apparence, l'état ou le comportement d'un bloc ou d'un élément. Documentation BEM

Par exemple, le bloc d'en-tête peut être

fixé en haut de la page, le bloc d'accordéon peut être sur ou off , le bloc de bouton peut être Désactivé , etc. La convention de dénomination pour les modificateurs BEM est la suivante: Block élément modificateur. C'est le cœur de la méthode BEM. De plus, BEM fournit également des principes d'organisation de la structure de documents, un ensemble d'outils et une communauté active pour le soutenir. Avantages de l'utilisation de bem

Voici quelques-uns des avantages de l'utilisation de BEM dans votre projet:

Les nouveaux développeurs peuvent rapidement comprendre la relation entre les composants dans les balises et les règles CSS

• Il favorise la productivité de l'équipe. Cet avantage est particulièrement évident dans les projets à grande échelle
• Les conventions de dénomination réduisent le risque de conflits de nom de classe et de fuite de style
• CSS n'est pas étroitement associé aux marqueurs à des emplacements spécifiques dans la page
• CSS est très réutilisable

smacss

L'architecture CSS évolutive et modulaire (SMACSS) est une méthode de développement Web utilisée pour organiser et écrire du code CSS. Son créateur Jonathan Snook le décrit comme suit: & gt; smacss est un moyen d'examiner le processus de conception et d'adapter ces cadres rigoureux aux processus de pensée flexibles. Lorsque vous utilisez CSS, il tente de documenter une approche cohérente du développement du site. Site Web SMACSS

son cœur est de classer les règles CSS. La classification apporte des modèles, où vous répétez plusieurs fois dans votre conception, autour duquel vous pouvez développer un guide pour écrire des CSS maintenables et réutilisables. Les catégories de base de SMACS sont:

• Basic - Cette catégorie contient des règles CSS qui contrôlent l'apparence par défaut des éléments. Les sélecteurs incluent des sélecteurs à élément unique, des sélecteurs d'attribut, des sélecteurs de pseudo-classe, des sélecteurs de frères et sœurs, etc. Par exemple, HTML, corps, A, A: survol, etc.
• Layout - Cette catégorie est utilisée pour styliser les pages qui divisent une page en sections.
• Module - Les modules sont conçus des composants de style bloc de construction réutilisables tels que les menus, les boîtes de dialogue, les boîtes de recherche, etc.
• Statut - Cette catégorie comprend une description de l'apparition d'une mise en page ou d'un module dans un état spécifique (par exemple, visible ou caché, étendu ou fermé, etc.) ou une vue spécifique (par exemple, à la maison ou page interne) style.
• Topic - Cette catégorie est similaire à l'état car elle contient les règles CSS responsables de la mise en page et de l'apparence du module. Tous les projets ne nécessitent pas cette catégorie supplémentaire, mais il est toujours bon de connaître son existence.

SMACSS NAMING Convention

lié ​​aux catégories décrites ci-dessus, SMACSS propose une convention de dénomination pour aider la productivité des équipes d'organisation et de développement du code. Les règles de mise en page, d'état et de modules sont préfixées avec des noms significatifs ou des abréviations. Pour les règles de mise en page, telles que la mise en page, la grille - et même les L- simples sont des préfixes acceptables. Pour les règles de l'État, la convention consiste à utiliser est - comme le préfixe d'État, tel qu'il est caché, IS-visible, etc. En ce qui concerne les modules, utilisez simplement le nom du composant que vous construisez, comme .menu, .dialog, etc. Par exemple, pour styliser la boîte de dialogue qui s'ouvre, vous pouvez utiliser des sélecteurs comme .dialog.is-ouvrir dans CSS. Les éléments connexes dans un module et les variantes du même module doivent être préfixés avec le nom de base du module. Essayez également de ne pas utiliser l'ID, le sélecteur d'éléments ou le sélecteur imbriqué. Par exemple, pour sélectionner un élément de menu dans un module nommé menu , n'écrivez pas un sélecteur comme celui-ci: .menu li a, mais utilisez quelque chose comme .Menu-link ou .menu-item. Contrairement à BEM, SMACSS ne stipule pas les conventions de dénomination trop strictes. Jonathan Snook l'a clairement indiqué: & gt;… Je n'ai pas l'impression de devoir suivre strictement ces directives. Faites un accord, enregistrez-le et respectez-le. Site Web SMACSS

Avantages de l'utilisation de SMACSS

Certains avantages de la méthode SMACSS pour le codage CSS comprennent:

• Il fournit des guides efficaces pour les CSS modulaires et maintenables tout en évitant d'être trop strict
• Vous pouvez rapidement apprendre (et enseigner) SMACSS
• Les conventions de dénomination des SMACS ne sont pas aussi verbeuses que BEM et sont plus faciles à maîtriser à certains égards
• Il est suffisamment flexible pour être bien utilisé pour les grands et petits projets

ecss

CSS ou ECS permanent est un guide pour écrire des feuilles de style pour de grands projets Web de longue date et de longue date. Site Web ECSS

Cette approche CSS a vraiment attiré mon grand intérêt pour la vision originale de son auteur Ben Frain sur la gestion des défis CSS à grande échelle. Le concept principal de l'ECSS est l'isolement. L'isolement signifie que chaque composant est une unité de code indépendante, pas de dépendances, pas de charge de contexte, réutilisables et amovibles sans risque de fuite de style. Ceci est principalement réalisé par:

• encapsuler tout le code (non seulement CSS, mais toutes les techniques nécessaires pour construire chaque composant) dans son propre dossier partagé.
• Chaque fois que vous avez besoin d'un composant similaire à un composant existant, mais avec certaines variations, même si la variante est petite, créez un composant complètement nouveau.
• Utiliser des conventions de dénomination CSS strictes

Selon le deuxième point ci-dessus, il est évident que la répétition des attributs et des valeurs n'est pas un problème pour les ECS. À cet égard, ECSS représente une différence fondamentale par rapport aux méthodes telles que BEM et SMACSS, qui étendent ou abstraitent les composants existants, évitant ou évitant ainsi la duplication de code autant que possible. Cela signifie-t-il que les ECS généreront de grands fichiers de feuille de style? incertain. Après quelques tests avec compression de fichiers, Ben Frain a conclu que parce que "GZIP est très efficace dans la compression des chaînes en double", la différence de taille de fichier entre l'utilisation de ECSS et d'autres méthodes qui ont tendance à être abstraites plutôt que en double est très bonne petite.

Les avantages de l'utilisation d'ECSS

Voici les avantages qui peuvent être obtenus en appliquant la méthode ECSS et en acceptant sa vision de la répétitivité:

Les codes
• CSS sont plus faciles à maintenir en maintenant l'isolement de chaque mode visuel
• Bien que vous trouverez des propriétés et des valeurs en double, l'augmentation de la taille du fichier est encore petite à long terme. En effet
Tous les fichiers linguistiques / techniques nécessaires pour créer un module partagent le même dossier, ce qui facilite la modification et la suppression physique de contenu qui n'est plus nécessaire.

Vous pouvez lire tous les détails de cette approche innovante dans le livre de Frain Persistance CSS.

Conclusion

Rédaction du code CSS maintenable et bien organisé est difficile. Dans cet article, je présente trois façons d'aider à cette tâche. Ce n'est en aucun cas une liste exhaustive, et aucune de ces méthodes ne résoudra tous les problèmes que vous pourriez rencontrer dans votre projet. Essayez simplement et voyez ce qui fonctionne pour vous. Vous pouvez également essayer d'utiliser BEM et SMACSS en combinaison, et même développer votre propre approche en fonction de l'ensemble des questions que vous vous posez. Quelle est votre règle d'or pour écrire le code CSS bien organisé et facile à gérer? Pensez-vous que l'utilisation de l'approche d'architecture CSS peut soulager la douleur? Cliquez sur la zone de commentaire pour me le faire savoir.

Des questions fréquemment posées sur les méthodes d'architecture CSS

Quelles sont les principales différences entre les méthodes OOCSS, SMACSS et BEM?

OOCSS, SMACSS et BEM sont toutes des méthodes CSS conçues pour aider les développeurs à écrire CSS propre, maintenable et évolutif. OOCSS ou CSS orienté objet encourage les développeurs à écrire un code réutilisable orienté objet. Il se concentre sur la séparation de la structure de l'apparence et la séparation du conteneur du contenu. Les SMACS, ou architectures CSS extensibles et modulaires, fournissent des conseils sur la classification des règles CSS pour rendre votre code plus flexible et gérable. Le modificateur BEM ou Block Element est une convention de dénomination qui rend votre CSS plus facile à lire et à comprendre. Il divise l'interface utilisateur en blocs séparés qui peuvent être réutilisés et combinés.

Comment implémenter la norme de codage WordPress dans CSS?

WordPress a son propre ensemble de normes de codage CSS pour assurer la cohérence et la lisibilité entre les différents projets. Ces normes comprennent des règles pour la dénomination des conventions, des indentations, de l'espacement et des commentaires. Pour implémenter ces normes, vous pouvez utiliser des outils de peluche CSS avec une configuration WordPress, tels que Stylelint.

Quel est le rôle des feuilles de style dans le développement Web?

Regardez "Devenir un héros CSS au bureau et créer un CSS structuré, maintenable et évolutif avec l'architecture CSS"! Regardez ce cours Stylesheet est un formulaire de fichier ou de code qui définit la mise en page et la conception d'une page Web. Il contrôle le rendu visuel des éléments HTML sur la page, y compris la disposition, les couleurs, les polices et les animations. CSS (feuille de style Cascade) est la langue de feuille de style la plus couramment utilisée.

Comment la méthode CSS améliore-t-elle mon processus de conception Web?

La méthode CSS peut considérablement améliorer votre processus de conception Web en rendant votre CSS plus organisé, réutilisable et évolutif. Ils fournissent un moyen structuré d'écrire CSS, ce qui contribue à réduire la complexité du code, à faciliter la compréhension et le maintien et à améliorer les performances.

Quelles sont les meilleures pratiques pour écrire CSS en HTML?

Les meilleures pratiques pour l'écriture de CSS en HTML incluent la séparation des styles du contenu à l'aide de feuilles de styles externes, en utilisant efficacement les sélecteurs, en regroupant les styles connexes, en utilisant des propriétés raccourcis et en annotant le code pour la clarté. Il est également important de vérifier votre CSS pour vous assurer qu'il est sans erreur et compatible avec différents navigateurs.

Comment rendre mon code CSS plus facile à maintenir?

Pour rendre votre code CSS plus facile à entretenir, vous pouvez utiliser des méthodes CSS telles que OOCSS, SMACSS ou BEM, qui fournissent des guides pour construire et organiser votre code. D'autres stratégies incluent la modularisation du CSS, en utilisant des préprocesseurs comme Sass ou moins, et après des conventions de nommage.

Quels sont les avantages de l'utilisation des préprocesseurs CSS?

Les préprocesseurs CSS comme SASS et moins vous permettent d'utiliser des variables, des nidification, des mixins et des fonctions dans CSS, ce qui peut rendre votre code plus facile à lire et à maintenir. Ils vous permettent également d'écrire un CSS plus concis et plus puissant.

Comment s'assurer que mon CSS est compatible avec différents navigateurs?

Pour vous assurer que votre CSS est compatible avec différents navigateurs, vous pouvez utiliser un outil comme puis-je utiliser, qui montre la compatibilité des propriétés CSS dans différents navigateurs. Pour les attributs CSS qui ne sont pas entièrement pris en charge par tous les navigateurs, il est également important d'utiliser les préfixes des fournisseurs.

Quelle est l'importance du CSS dans la conception Web?

CSS est crucial dans la conception Web car il contrôle la présentation visuelle du contenu sur une page Web. Il vous permet de créer des sites Web visuellement attrayants avec une conception et une disposition cohérentes. Il vous permet également d'ajuster la présentation en fonction de différents types d'appareils tels que des ordinateurs de bureau, des tablettes et des téléphones portables.

Comment en savoir plus sur les méthodes CSS?

Il existe de nombreuses ressources pour apprendre les méthodes CSS en ligne. SitePoint, Smashing Magazine et Mozilla Developer Network offrent des articles et des tutoriels approfondis. Vous pouvez également trouver des cours en ligne sur des plateformes comme Coursera et Udemy.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!