Utilisation de classes d'assistance pour sécher et mettre à l'échelle CSS

Vous démarrez un nouveau projet Web et recherchez une nouvelle méthodologie CSS qui vous aidera à évoluer votre code. Un ensemble croissant de techniques d'écriture de CSS modulaires est disponible, y compris les SMACS, le BEM et un certain nombre d'autres méthodologies similaires, toutes basées sur des CSS orientés objet (OCS). Comme vous pouvez le voir, il existe de nombreuses techniques pour écrire et organiser CSS.

Outre toutes ces méthodologies, il y a quelque chose qui peut nous aider à écrire à sec , moins de code répétitif: classes auxiliaires (également appelées classes de services publics).

Ce concept a été discuté il y a quelque temps dans l'article de Thierry Koblentz sur Smashing Magazine, mais j'ai pensé expliquer la méthode dans mes propres mots ici.

Les plats clés

• Les classes d'assistance, ou classes utilitaires, peuvent aider à supprimer la répétition dans CSS en créant un ensemble de classes abstraites qui peuvent être utilisées à plusieurs reprises sur des éléments HTML. Cela rend le code plus réutilisable et évolutif pour les ajouts futurs.
• Les classes d'assistance sont responsables de faire un travail et de bien le faire. Lors de la création d'un nouveau composant, il vous suffit de combiner certaines classes ensemble pour la construire.
• Les classes d'assistance peuvent être utilisées pour gérer les marges et le rembourrage, la largeur et la hauteur, la position et l'index z, les éléments d'alignement, la typographie, les couleurs, les listes, les frontières et les valeurs d'affichage.
• Les classes d'assistance peuvent être utilisées en combinaison avec des préprocesseurs CSS comme Sass ou moins, ce qui facilite la création et la gestion de ces classes.
• Bien que les cours d'assistance offrent de nombreux avantages, ils peuvent conduire à HTML Bloat, car vous pouvez finir par appliquer plusieurs classes à un seul élément. Cela peut rendre votre code HTML plus difficile à lire et à maintenir.

Que sont les classes d'assistance?

Les classes d'assistance peuvent aider à supprimer la répétition en créant un ensemble de classes abstraites qui peuvent être utilisées encore et encore sur les éléments HTML. Chaque classe d'assistance est responsable de faire un travail et de bien le faire. Cela rendra votre code plus réutilisable et évolutif pour de nombreuses fonctionnalités qui seront ajoutées à l'avenir. Ainsi, chaque fois que vous souhaitez créer un nouveau composant, vous aurez juste besoin de combiner certaines classes ensemble pour la construire.

«Traitez le code comme LEGO. Brisez le code en les plus petits blocs possibles. » - @csswizardry (via @stubbornella) #BTConf

- Smashing Magazine (@SmashingMag) 27 mai 2013

Voyons un exemple simple de ce à quoi ressemblent les classes d'utilité et comment nous pouvons les utiliser. Regardez l'extrait de code suivant:

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

Ici, nous avons créé un ensemble de règles CSS que nous pouvons utiliser plus tard lors de la construction de nouveaux composants. Par exemple, si vous souhaitez aligner un contenu sur la gauche, vous pouvez utiliser la classe Text-gauche. De même, vous pouvez utiliser les classes gauche ou droite pour flotter des éléments dans la direction nécessaire.

Voyons un autre exemple d'une boîte qui doit être à gauche avec son contenu intérieur centré.

Nous faisons généralement quelque chose comme ceci:

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

avec ce CSS:

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

Au lieu de cela, nous pouvons réaliser la même chose en utilisant des classes d'assistance réutilisables et à responsabilité unique:

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

Remarquez comment j'ai supprimé la classe de boîte et ajouté à la place nos classes prédéfinies à gauche et à ceder le texte.

Si vous souhaitez modifier le flotteur et aligner les directions, au lieu de le faire sur la classe .box non réutilisable, vous pouvez utiliser d'autres classes d'aide:

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

Le système de grille est un bon exemple des classes d'assistance utilisées. Voici un exemple de Foundation’s Grid:

<span><span><span><div</span> class<span>="left text-center"</span>></span>
</span><span><span><span></div</span>></span></span>

Foundation fournit de nombreuses classes qui peuvent être utilisées et combinées ensemble pour créer un système de grille avec différentes largeurs pour différentes tailles d'écran. Cette flexibilité aide les développeurs à créer de nouvelles dispositions personnalisées plus rapidement, sans modifier aucun CSS pour la grille elle-même. Par exemple:

• .Small-2 et .Large-4 Les classes définiront la largeur d'un élément basé sur la taille de l'écran.
• La classe .Row définit la largeur du conteneur qui contient les colonnes.
• La classe .Columns définit le rembourrage et les flotteurs.

Maintenant que vous comprenez les classes d'assistance, jetons un coup d'œil à certaines classes réutilisables que nous pouvons ajouter à nos projets, présentées ci-dessous dans différentes catégories. Notez également que l'exemple utilisera certaines variables SASS, mais naturellement ceux-ci ne sont pas nécessaires.

marges et rembourrage

Les marges et le rembourrage

sont probablement les propriétés les plus utilisées de notre CSS. L'ajout de classes abstraites qui peuvent gérer cela sèche notre code.

Nous commençons par définir une variable (en utilisant SASS) pour l'unité d'espace de base pour notre conception. Commençons par 1EM et en plus de cela, nous pouvons créer des classes pour différentes tailles d'espace.

<span><span><span><div</span> class<span>="right text-right"</span>></span>
</span><span><span><span></div</span>></span></span>

Nous pouvons également choisir des noms de classe courts, comme dans l'exemple de code ci-dessous de BASSCSS

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="small-2 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-4 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-6 large-4 columns"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Choisissez ce qui fonctionne pour vous et votre équipe. Les noms longs rendront évidemment vos éléments HTML plus grands, mais ils sont plus lisibles en contraste avec les noms courts, vous devrez donc peut-être regarder votre CSS pour comprendre comment les choses fonctionnent.

Largeur et hauteur

Imaginez que vous souhaitez définir une section pour être pleine hauteur à différents endroits de votre site Web. La façon traditionnelle de nous faire était quelque chose comme ceci:

<span><span>$base-space-unit: 1em;</span>
</span>
<span>// Top margin
</span><span>.margin-top-none    { margin-top: 0; }
</span><span>.margin-top-quarter { margin-top: $base-space-unit / 4; }
</span><span>.margin-top-half    { margin-top: $base-space-unit / 2; }
</span><span>.margin-top-one     { margin-top: $base-space-unit; }
</span><span>.margin-top-two     { margin-top: $base-space-unit * 2; }
</span>
<span>// Top padding
</span><span>.padding-top-none    { padding-top: 0; }
</span><span>.padding-top-quarter { padding-top: $base-space-unit / 4; }
</span><span>.padding-top-half    { padding-top: $base-space-unit / 2; }
</span><span>.padding-top-one     { padding-top: $base-space-unit; }
</span><span>.padding-top-two     { padding-top: $base-space-unit * 2; }</span>

et notre CSS:

<span><span>.m0</span>  { margin:        0 }
</span><span><span>.mt0</span> { margin-top:    0 }
</span><span><span>.mr0</span> { margin-right:  0 }
</span><span><span>.mb0</span> { margin-bottom: 0 }
</span><span><span>.ml0</span> { margin-left:   0 }</span>

Pour les autres sections, nous répéterons le code:

<span><span><span><div</span> class<span>="contact-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

et le CSS:

<span><span>.contact-section</span> { height: 100%; }</span>

Mais nous pouvons réduire tout cela avec une classe appelée pleine hauteur:

<span><span><span><div</span> class<span>="services-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

Voici quelques exemples similaires, y compris la classe pleine hauteur utilisée ci-dessus:

<span><span>.services-section</span> { height: 100%; }</span>

Position et Z-Index

Les propriétés liées à la position peuvent être combinées avec d'autres propriétés comme Z-Index pour créer une disposition complexe. Nous pouvons créer un ensemble de classes pour définir la position exacte de tout élément par rapport à la fenêtre ou à un élément ancêtre (droite, gauche, en haut à gauche, etc.):

<span><span><span><div</span> class<span>="full-height"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

Les classes d'assistance «PIN» sont inspirées du CSS de Mapbox.

étendons l'exemple à pleine hauteur pour contenir un élément positionné en bas à droite.

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

démo

En combinant plus d'une classe, nous pouvons obtenir le résultat requis dans moins de code. Si vous souhaitez positionner l'élément intérieur en haut à droite, vous pouvez utiliser le pin-top-droite au lieu de la droite à brochage. Vous avez peut-être remarqué dans le code ci-dessus, j'ai également ajouté une autre classe d'assistance: la classe de rembourrage-one garantit que l'élément n'est pas rincer contre le bord du conteneur ou de la fenêtre.

Éléments flottants

Éléments flottants gauche ou droite peuvent être effectués en utilisant des classes gauche ou droite. La classe ClearFix bien connue peut être utilisée sur l'élément parent pour effacer les flotteurs, illustré ci-dessous à l'aide du sélecteur parent de Sass:

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

démo

Alignement les éléments

Nous pouvons faire aligner le texte et d'autres contenus sur n'importe quelle direction, en utilisant des classes d'assistance basées sur Align:

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

Classes de visibilité

Les classes de visibilité contrôlent la visibilité des éléments, en fonction de la taille de l'écran, de l'orientation de l'appareil, de l'écran tactile ou d'autres facteurs. Ceux-ci peuvent être utiles dans les conceptions réactives.

Nous pourrions avoir les classes suivantes à l'intérieur de nos requêtes médiatiques:

<span><span><span><div</span> class<span>="left text-center"</span>></span>
</span><span><span><span></div</span>></span></span>

et dans notre HTML:

<span><span><span><div</span> class<span>="right text-right"</span>></span>
</span><span><span><span></div</span>></span></span>

L'élément ci-dessus sera caché sur les petits écrans mais sera visible sur les écrans plus grands.

Nous pouvons également utiliser ces classes pour contrôler les éléments sur les appareils tactiles:

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="small-2 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-4 large-4 columns"</span>></span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="small-6 large-4 columns"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Dans l'exemple ci-dessus, la classe .touch proviendrait des classes ajoutées à l'élément par Modernizr.

Un bon exemple de cours de visibilité sont ceux de Foundation et Bootstrap de réactions.

typographie

Dans la typographie, vous pouvez créer des classes pour des choses comme le poids des polices et la manipulation du texte, comme le texte de l'ellipsine.

<span><span>$base-space-unit: 1em;</span>
</span>
<span>// Top margin
</span><span>.margin-top-none    { margin-top: 0; }
</span><span>.margin-top-quarter { margin-top: $base-space-unit / 4; }
</span><span>.margin-top-half    { margin-top: $base-space-unit / 2; }
</span><span>.margin-top-one     { margin-top: $base-space-unit; }
</span><span>.margin-top-two     { margin-top: $base-space-unit * 2; }
</span>
<span>// Top padding
</span><span>.padding-top-none    { padding-top: 0; }
</span><span>.padding-top-quarter { padding-top: $base-space-unit / 4; }
</span><span>.padding-top-half    { padding-top: $base-space-unit / 2; }
</span><span>.padding-top-one     { padding-top: $base-space-unit; }
</span><span>.padding-top-two     { padding-top: $base-space-unit * 2; }</span>

Couleurs

Chaque application a des guides et des règles de marque différents que nous pouvons définir dans des classes qui «pèsent» essentiellement notre interface. Cela inclurait la couleur du texte, les arrière-plans et plus encore.

Voyons comment cela peut être traduit en code. Définissons d'abord nos variables avec SASS:

<span><span>.m0</span>  { margin:        0 }
</span><span><span>.mt0</span> { margin-top:    0 }
</span><span><span>.mr0</span> { margin-right:  0 }
</span><span><span>.mb0</span> { margin-bottom: 0 }
</span><span><span>.ml0</span> { margin-left:   0 }</span>

Ensuite, nous définissons nos classes d'assistance, en fonction des variables:

<span><span><span><div</span> class<span>="contact-section"</span>></span>
</span>    <span><!-- Content here... -->
</span><span><span><span></div</span>></span></span>

Deux bons exemples d'utilisation de classes de couleurs et d'assistant d'arrière-plan se trouvent dans la boîte de cartes et les projets de kit de démarrage Google Web.

Un autre cas d'utilisation est le composant de notification. Voyons comment nous pouvons styliser cela avec des classes d'assistance de fond.

<span><span>.contact-section</span> { height: 100%; }</span>

Listes

Combien de fois avez-vous voulu vous débarrasser des balles et un rembourrage de l'élément UL? Une classe appelée List-Bare, telle qu'elle est utilisée dans InuitCSS, peut le faire pour vous.

<span><span>.left</span>        { float: left; }
</span><span><span>.right</span>       { float: right; }
</span>
<span><span>.text-left</span>   { text-align: left; }
</span><span><span>.text-right</span>  { text-align: right; }
</span><span><span>.text-center</span> { text-align: center; }</span>

Borders

Les classes d'assistance peuvent être utilisées pour ajouter des bordures à un élément, que ce soit pour tous les côtés ou un côté. Ainsi, votre CSS / SASS peut ressembler à ceci:

<span><span><span><div</span> class<span>="box"</span>></span>
</span><span><span><span></div</span>></span></span>

Afficher les valeurs

Les classes d'assistance suivantes nous donnent la possibilité d'utiliser les différentes valeurs de la propriété d'affichage de CSS:

<span><span>.box</span> {
</span>    <span>float: left;
</span>    <span>text-align: center;
</span><span>}</span>

Conclusion

suivre ce principe d'abstraction pourrait être une approche très différente de ce à quoi vous êtes habitué lors de la création de CSS. Mais sur la base de mon expérience, et celle des autres, je peux dire que c'est une très bonne approche à considérer sur votre prochain projet.

Vous pouvez consulter toutes les classes d'assistance à partir de ce post dans une nouvelle bibliothèque que j'ai créée appelée CSS-Helpers.

Liens de bibliothèque pertinents

Vous pouvez apprendre et explorer la structure des projets suivants:

• mapbox styleguide - base.css
• BASSCSS
• Classes d'utilité de la Fondation
• Classes d'assistance bootstrap
• Classes d'utilité UIKIT

lecture plus approfondie

• CHEF CSS Best Practices
• ACSS: Repenser les meilleures pratiques CSS
• CSS du milieu

Les questions fréquemment posées sur l'utilisation des classes d'assistance pour sécher et mettre à l'échelle CSS

Quels sont les avantages de l'utilisation de classes CSS auxiliaires?

Les cours d'assistance CSS offrent de nombreux avantages. Ils promeuvent le principe sec (ne vous répétez pas), qui est un concept fondamental dans la programmation. En utilisant des classes d'assistance, vous pouvez éviter de répéter les mêmes propriétés et valeurs CSS sur vos feuilles de style. Cela rend non seulement votre code plus propre et plus lisible, mais réduit également la taille du fichier, conduisant à des temps de chargement plus rapides. De plus, les classes d'assistance peuvent être réutilisées sur différents éléments et composants, améliorant l'évolutivité de votre code CSS. Ils facilitent également la maintenance et les mises à jour plus faciles, car les modifications ne doivent être apportées qu'en un seul endroit.

Comment créer une classe CSS auxiliaire?

Créer une classe d'assistance CSS est simple. Vous définissez simplement une classe dans votre feuille de style et vous attribuez les propriétés et valeurs souhaitées. Par exemple, si vous avez souvent besoin de centrer du texte, vous pouvez créer une classe d'assistance comme ceci:

.Center-text {
text-align: Center;
}

Vous pouvez ensuite appliquer cette classe à n'importe quel élément HTML pour centrer son texte.

Puis-je utiliser plusieurs classes d'assistance sur un seul élément?

Oui, vous pouvez appliquer plusieurs classes d'assistance à un seul élément HTML. Cela vous permet de combiner différents styles et effets sans avoir à créer une classe distincte pour chaque combinaison. Par exemple, si vous avez des classes d'assistance pour centrer du texte et modifier sa couleur, vous pouvez utiliser les deux sur le même élément que ceci:

c'est du texte.

Quelle est la différence entre les classes d'assistance et les classes d'utilité dans CSS?

Les termes «classes d'assistance» et «classes d'utilité» sont souvent utilisées de manière interchangeable dans le contexte du CSS. Les deux se réfèrent aux classes qui remplissent une fonction spécifique à usage unique. Cependant, certains développeurs font une distinction entre les deux. À leur avis, les classes d'assistance sont plus complexes et peuvent contenir plusieurs propriétés, tandis que les classes de services publics sont plus simples et ne contiennent généralement qu'une seule propriété.

Comment puis-je utiliser des classes d'aide pour améliorer ma productivité?

Les classes d'assistance peuvent augmenter considérablement votre productivité lors de l'écriture de CSS. En encapsulant les styles communs dans les classes réutilisables, vous pouvez réduire la quantité de code que vous avez besoin pour écrire et rendre vos feuilles de style plus faciles à gérer. Cela peut vous faire gagner beaucoup de temps, en particulier sur les projets plus importants. De plus, les classes d'assistance peuvent vous aider à maintenir la cohérence dans votre conception, car elles garantissent que les mêmes styles sont appliqués de la même manière à travers différents éléments et composants.

Y a-t-il des inconvénients pour utiliser les classes CSS auxiliaires?

Bien que les cours d'assistance offrent de nombreux avantages, ils ont également des inconvénients potentiels. L'une des principales critiques est qu'ils peuvent conduire à un ballonnement HTML, car vous pouvez finir par appliquer plusieurs classes à un seul élément. Cela peut rendre votre code HTML plus difficile à lire et à maintenir. De plus, une dépendance excessive sur les classes d'assistance peut entraîner un manque de sens sémantique dans vos classes, ce qui peut rendre vos feuilles de style plus difficiles à comprendre pour les autres développeurs.

Puis-je utiliser des classes d'assistance avec des préprocesseurs CSS comme Sass ou moins ?

Oui, vous pouvez utiliser des classes d'assistance avec des préprocesseurs CSS comme SASS ou moins. En fait, ces outils peuvent faciliter la création et la gestion des classes auxiliaires. Par exemple, SASS vous permet d'utiliser des mixins, qui sont comme des classes d'assistance qui peuvent accepter les arguments. Cela vous permet de créer des styles plus flexibles et réutilisables.

Comment puis-je utiliser des classes d'assistance pour mettre à l'échelle mon code CSS?

Les classes d'assistance peuvent jouer un rôle clé dans la mise à l'échelle de votre code CSS. En encapsulant les styles communs dans les classes réutilisables, vous pouvez facilement appliquer ces styles sur différents éléments et composants. Cela rend votre code plus modulaire et évolutif, car vous pouvez ajouter, supprimer ou modifier des styles sans affecter d'autres parties de votre code. De plus, les classes auxiliaires peuvent vous aider à maintenir la cohérence dans votre conception à mesure que votre projet se développe.

Quels sont les exemples de classes CSS auxiliaires couramment utilisées?

Il existe de nombreuses classes d'assistance CSS couramment utilisées. Certains exemples incluent des classes d'alignement du texte (par exemple, .Text-centre), des propriétés d'affichage (par exemple, .D-bloc), une marge et un rembourrage (par exemple, .m-0 ou .p-0), et la visibilité (par exemple ,. caché ou .visible). Ces classes peuvent être utilisées pour appliquer rapidement des styles communs sans avoir à écrire les mêmes propriétés et valeurs CSS encore et encore.

Comment puis-je organiser mes classes CSS Helper?

Il existe différentes façons d'organiser vos classes CSS auxiliaires. Une approche commune consiste à les regrouper par fonction. Par exemple, vous pouvez avoir une section de votre feuille de style pour les cours liés à la typographie, un autre pour les cours de mise en page, etc. Une autre approche consiste à utiliser une convention de dénomination qui indique la fonction de chaque classe. Par exemple, Bootstrap utilise une convention de dénomination où la première partie du nom de classe indique la propriété (par exemple, «M» pour la marge), et la deuxième partie indique la valeur (par exemple, «0» pour 0 unités). Cela facilite la compréhension de ce que chaque classe fait simplement en regardant son nom.

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!