Architecture CSS et les trois piliers du CSS maintenable

Points clés

• L'architecture CSS maintenable est essentielle pour éviter les feuilles de style difficile à maintenir, car les feuilles de style difficile à maintenir peuvent avoir des effets secondaires inattendus et nécessiter une réécriture approfondie du CSS de l'application.
• Trois concepts ou piliers de base forment la pierre angulaire de la conception d'architecture CSS: des blocs de construction (tels que Sass, des sélecteurs CSS efficaces, une syntaxe BEM, etc.), orchestrer ces blocs de construction dans le CSS hiérarchique fiable et maintenable et l'application de l'ingénierie logicielle principes.
• Les principes d'ingénierie logicielle tels que la séparation des préoccupations et les principes solides peuvent être appliqués au CSS pour garantir que le code modèle la réalité de manière maintenable. Cela comprend l'application de principes tels que le sec (ne vous répétez pas) et Wet (nous aimons taper) pour améliorer la maintenabilité du code.
• Essayer de combiner dans CSS, comme l'utilisation de mixin et de l'héritage, peut fournir une structure plus forte et réduire la nécessité de définir des classes pour chaque combinaison, ce qui permet de maintenance plus facile de maintenance CSS.

Éléments de l'architecture CSS

Si vous avez déjà hérité d'un mauvais CSS et que vous êtes obligé de le maintenir, vous pourriez avoir une certaine sympathie pour d'autres qui maintiendront votre code à l'avenir. Dans les cas extrêmes, les développeurs n'ont d'autre choix que de réécrire complètement le CSS de l'application. Ces extrêmes se produisent lorsque chaque patch introduit plusieurs effets secondaires inattendus. Une fois que cela est atteint, vos feuilles de style deviennent difficiles à maintenir.

Vous pouvez maintenant éviter de causer des difficultés à votre futur moi en prenant des décisions architecturales. C'est pourquoi il est très important d'apprendre à construire une architecture CSS maintenable dans la pratique.

Si vous ne voulez pas être celui qui passe un mauvais code, vous voudrez peut-être savoir comment créer un CSS maintenable à partir de zéro. Où allez-vous commencer? Examinons les éléments de l'architecture CSS qui méritent d'être considérés lors de la construction d'un projet parfait.

Trois piliers qui peuvent maintenir CSS

Regardez le cours "devenir un héros CSS du bureau: architecture CSS" pour apprendre à créer CSS structuré, maintenable et évolutif! Icône de lecture vidéo Voir ce cours Voir ce cours

Lors de la conception de l'architecture CSS d'un système logiciel, trois concepts méritent d'être pris en compte. Ces concepts sont très basiques et nous pouvons les considérer comme des piliers qui soutiennent la structure d'un bâtiment. Nous avons besoin de ces trois piliers pour garder notre CSS sous l'épreuve du temps et ne pas s'effondrer dans le chaos difficile à maintenir.

Le premier pilier définit les éléments constitutifs de l'architecture CSS. Ces blocs de construction contiennent une grande variété de solutions et d'outils, tels que l'utilisation de SASS, écrivant des sélecteurs CSS efficaces, la syntaxe de modificateur d'élément bloc (BEM), en utilisant des classes au lieu d'attributs d'identification et l'utilisation de parents le cas échéant.

Bien que cette vue puisse améliorer considérablement la qualité de votre code CSS, nous avons besoin d'un niveau d'organisation plus élevé pour systématiquement systématiquement notre travail. Par conséquent, nous avons besoin d'un deuxième pilier qui se concentre sur l'orchestration des blocs de construction pour construire des CS hiérarchiques fiables et maintenables. Considérez cette couche comme le squelette de l'architecture CSS. Si vous êtes intéressé par deux architectures CSS prêtes à l'emploi, vous pouvez étudier plus loin les ITCSS et les SMACS.

Malheureusement, l'utilisation organisée des blocs de construction et des cadres ou des architectures CSS ne vous permettra pas d'écrire un CSS solide et facile à maintenir. En appliquant des principes d'ingénierie logicielle, notre code devient fiable. Ceci est le troisième pilier dans l'écriture CSS maintenable.

Appliquer des principes d'ingénierie logicielle à CSS

Il existe de nombreux principes différents pour la conception de logiciels durables.

Ces principes fournissent un objectif pour utiliser vos outils et solutions CSS en vous assurant que votre code CSS modélise la réalité de manière maintenable. Sans ces principes, l'utilisation d'une architecture CSS n'est principalement qu'un rituel. Si vous ne suivez pas les principes d'ingénierie logicielle pour écrire CSS, une fois que la taille du code devient difficile à maintenir, elle se bloque souvent dépassée et s'effondre.

Si vous êtes ingénieur logiciel avec beaucoup d'expérience dans certains langages de programmation, vous pouvez trouver très surprenant d'appliquer ces principes à des langages déclaratifs comme CSS. Cependant, dans la pratique, CSS est devenu un langage mature, similaire à d'autres langues, la structure est réfléchie sur le code requis. Examinons l'application pratique de certains des principaux principes.

Séparation des préoccupations

La séparation des préoccupations est un principe de conception logicielle qui est responsable de la définition des responsabilités de séparation claires dans les solutions logicielles. L'application la plus évidente à CSS est la séparation entre les classes pour les styles et les classes de fonctionnalité. Les classes de style ne doivent pas apparaître dans le code JavaScript, et les classes liées aux fonctionnalités ne doivent pas apparaître dans Styleshets.

Principe solide

Robert C. Martin définit cinq principes solides. Certains de ces principes s'appliquent également à CSS et à d'autres langages de programmation.

Dans mon cours d'architecture CSS, vous trouverez de nombreuses applications différentes détaillant comment utiliser ces principes solides dans le contexte du code CSS, y compris le principe de responsabilité unique et le principe d'ouverture et de clôture.

Dans la hiérarchie des feuilles de style, nous appliquons le principe de responsabilité unique. Par exemple, une couche de l'architecture ITCSS contient des procédures de réinitialisation ou de normalisation. Les styles de balises sont construits sur le programme de normalisation et les styles de composants sont construits sur les styles de balises. Chaque niveau a une seule responsabilité bien définie.

L'exemple le plus célèbre de l'application des principes d'ingénierie logicielle au code CSS est la comparaison entre le CSS sec et humide. Dry signifie «Ne vous répétez pas», tandis que Wet signifie «Nous aimons le taper».

rendre le code à sec plus maintenable car chaque fois que vous modifiez le code sec, il vous suffit de faire le changement en un seul endroit et vous pouvez être très sûr que vous n'avez pas à rechercher le reste de la base de code CSS pour d'autres apparences de la même condition de code.

Lorsque votre CSS est humide, vous pouvez le sécher en identifiant la partie commune du code et en abstraction de cette fonction commune dans la classe de base (ou en mélangeant si vous utilisez un préprocesseur).

L'utilisation de classes de base et de sous-classes dans le code est appelée héritage, qui est exécuté à l'aide de @Extend dans SASS. Lorsque nous utilisons la directive Mixin ou @Mixin en utilisant la terminologie SASS, nous utilisons des combinaisons. L'héritage, la composition et l'utilisation des constantes SASS sont des outils puissants pour effectuer des abstractions.

Essayez de se combiner dans CSS

Regardons un exemple pratique. Supposons qu'il existe quatre types de rectangles dans notre base de code. Un rectangle universel, un rectangle arrondi, un rectangle vert et un rectangle vert arrondi.

Nous pouvons utiliser la convention de dénomination BEM pour marquer chaque composant rectangulaire comme suit:

<code><div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div></code>

Définissons ces quatre classes en SASS en utilisant l'héritage. Nous commençons par la classe de base de .rectangle et créons des classes de modificateurs qui utilisent SASS @Extend pour hériter du style de la classe de base:

<code>.rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}</code>

La structure est claire et nous ne nous sommes pas répétés dans la classe modifiée. Cependant, la création d'une hiérarchie de cinq modificateurs se traduira par 31 définitions de classe, dont la plupart ne sont rien de plus qu'une collection de directives @Extend.

La combinaison nous fournit une structure plus forte. Pour créer une structure complètement flexible, nous n'avons besoin que d'une classe rectangulaire commune et de deux mélanges:

<code>@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}</code>

Supposons que nous ayons une boîte de fonctionnalité spéciale.

<code><div class="feature-box"></div></code>

Si la boîte de fonction est arrondie, mais pas verte, nous avons juste besoin d'étendre la classe du rectangle et d'inclure un mixin qui rend le rectangle arrondi:

<code>.my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}</code>

Les structures

sont flexibles sans définir des classes pour chaque combinaison.

vers une meilleure architecture CSS

Nous pouvons conclure que les principes d'ingénierie logicielle s'appliquent au CSS et à tout autre langage de programmation. Ces principes se situent entre deux niveaux: le micro-niveau des blocs de construction CSS et le niveau macro de ces blocs de construction. Par conséquent, il est avantageux d'apprendre à appliquer ces principes dans la pratique lors de la création de CSS maintenables.

Pour aider à expliquer et à démontrer l'application pratique de ces principes, j'ai créé un cours sur l'architecture CSS solide Rock;

Dans ce cours, nous explorerons les trois piliers de l'architecture CSS et soulignerons les principes de l'ingénierie logicielle. Non seulement vous apprendrez ces principes théoriquement, mais vous aurez également la possibilité de les utiliser dans de nombreux exemples pratiques.

Par exemple, nous collecterons un grand nombre de articles de blog et découvrirons pourquoi le code CSS fourni est difficile à maintenir. Nous terminerons progressivement le processus de refactorisation CSS, appliquant les principes brièvement introduits dans cet article et en profondeur dans la vidéo du cours.

J'ai développé une section spécifiquement pour mettre en pratique les trois piliers de l'architecture CSS en créant une bibliothèque de petits composants à l'aide de l'architecture ITCSS et du SASS. Si vous souhaitez en savoir plus sur l'architecture CSS, veuillez vous inscrire au cours et nous rencontrer dans le cours!

Des questions fréquemment posées sur l'architecture CSS et le CSS maintenable

Quelle est l'importance de l'architecture CSS dans le développement Web?

L'architecture

CSS joue un rôle crucial dans le développement Web. Il fournit une façon structurée d'écrire du code CSS, ce qui rend le code plus facile à comprendre, à maintenir et à étendre. Avec une architecture CSS bien définie, les développeurs peuvent éviter des problèmes tels que des conflits spécifiques, des conflits de dénomination et du code de la duplication. Il facilite également la réutilisation du code et réduit le temps et les efforts nécessaires pour créer une page Web.

Comment la méthode OOCSS favorise-t-elle le CSS maintenable?

CSS (OOCSS) orienté objet est un moyen de promouvoir la réutilisation du code et des feuilles de style plus rapides et plus efficaces. Il encourage les développeurs à considérer le CSS comme un système d'objets, chacun avec ses propres propriétés et comportements. OOCSS facilite la création de CSS évolutifs et maintenables en séparant la structure de l'apparence et du conteneur du contenu.

Quel est le rôle de la méthode BEM dans l'architecture CSS?

Les blocs, les éléments, les modificateurs (BEM) nomment les conventions utilisées pour les classes en HTML et CSS. Il fournit une structure claire et stricte qui rend le code plus facile à lire et à comprendre. Les approches BEM aident à créer des architectures CSS robustes et évolutives en réduisant les opportunités de dénomination et de conflits spécifiques.

Comment la méthode SMACSS aide-t-elle à créer des CSS maintenables?

L'architecture évolutive et modulaire (SMACSS) pour CSS est un guide de style qui encourage la modularité et l'évolutivité. Il divise les règles CSS en cinq types: fondation, mise en page, module, état et thème, chacun avec son objectif spécifique. Cette classification aide à organiser le code CSS, ce qui facilite le maintien et l'échelle.

Quelle est la signification de la méthode ITCSS dans l'architecture CSS?

Le triangle inversé CSS (ITCSS) est un moyen d'aider à gérer le CSS à grande échelle. Il organise CSS en plusieurs couches, chaque couche ayant son rôle spécifique. Cette structure hiérarchique garantit que le style le plus général est chargé d'abord, puis des styles plus spécifiques sont chargés, réduisant ainsi les chances de problèmes spécifiques.

Comment la variable CSS favorise-t-elle le CSS maintenable?

Les variables CSS (également appelées propriétés personnalisées CSS) permettent aux développeurs de définir des valeurs réutilisables. Ils peuvent améliorer considérablement la maintenabilité en réduisant la duplication du code et en facilitant les changements mondiaux. Par exemple, définir une couleur en tant que variable vous permet de le réutiliser tout au long de la feuille de style et de la modifier en un seul endroit.

Quel est le rôle des préprocesseurs CSS dans le CSS maintenable?

Les préprocesseurs CSS comme SASS et moins fournissent des fonctionnalités telles que les variables, la nidification, les mixins et les fonctions qui ne sont pas disponibles dans le CSS ordinaire. Ces fonctionnalités peuvent améliorer considérablement la maintenabilité et la lisibilité de votre code, ce qui facilite l'écriture de CSS complexes.

Comment l'architecture basée sur les composants favorise-t-elle le CSS maintenable?

L'architecture basée sur les composants

facilite la création de composants réutilisables et indépendants, chacun avec ses propres HTML, CSS et JavaScript. Cette approche rend le code plus modulaire et plus facile à entretenir, car les modifications d'un composant n'affectent pas les autres.

Quelle est l'importance des guides de style dans l'architecture CSS?

Le guide de style fournit un ensemble de normes d'écriture CSS. Il garantit la cohérence dans la base de code et rend le code plus facile à lire et à maintenir. Les guides de style peuvent inclure des conventions de dénomination, des règles de formatage et des meilleures pratiques.

Comment l'outil de peluche CSS favorise-t-il le CSS maintenable?

Les outils de peluche CSS comme Stylelint peuvent aider à exécuter les normes de codage et à capturer des problèmes potentiels avant de devenir des problèmes. Ils peuvent automatiquement résoudre certains problèmes et fournir des conseils sur d'autres, améliorant ainsi la qualité du code et la maintenabilité.

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!