Astuce Gagnez du temps en utilisant plusieurs classes

L'un des aspects les plus épuisant du développement Web consiste à écrire d'innombrables styles de styles CSS pour différents éléments, dont le style diffère légèrement l'un de l'autre. Il a fallu la vie (ou la volonté) de nombreux designers talentueux. Pourquoi attribuer à chaque élément sa propre entrée CSS unique, lorsque vous pouvez mélanger les correspondances et ajouter un style CSS réutilisable aux éléments à l'aide de plusieurs classes CSS?

Étape 1: Configurer le CSS

Commençons par identifier et écrire certains de nos balisages CSS les plus courants. Nous allons les configurer en tant que styles individuels. Celles que nous avons définies ici sont les plus élémentaires, mais la même technique peut être appliquée aux propriétés les plus cool de CSS 3.

 .primaryColor couleur: bleu;  .articleImage border: 1px solid # 292929; rembourrage: 5px;  .standOut font-size: 22px;  .important font-weight: bold;  .floatRight float: right; 

Étape 2: Application des classes dans notre document

  • Ce texte sera bleu et gras

  • Cette image sera placée à droite, avec un rembourrage et une bordure.

  • Ce texte sera énorme

  • Ce texte sera bleu, 22px large et gras.

Pourquoi c'est utile

Cela peut être une aide considérable, en particulier lors de la conception de mises en page… vous pouvez utiliser une classe pour définir la taille et la largeur, et une autre classe pour définir le positionnement. J'espère que cela a aidé!

Note de l'éditeur: Gardez à l'esprit que, dans certains des anciens navigateurs, c'est-à-dire les versions antérieures à IE 6, cette méthode "à classes multiples" échouera. Quelles sont vos pensées sur cette approche? P.S. Vous avez une astuce rapide? Écrivez-nous et nous parlerons.