recherche

Maison  >  Article  >  interface Web  >  Utilisez moins d'héritage et plus de combinaison dans l'échange CSS_Experience

Utilisez moins d'héritage et plus de combinaison dans l'échange CSS_Experience

WBOY
WBOYoriginal
2016-05-16 12:04:081661parcourir

Ce qui suit est un code courant :
css :

Copier le code Le code est le suivant :

.box{
border:1px solid #ccc;
font-size:12px
background:#f1f1f1;
html :



Copier le code
Le code est le suivant :
c'est une boîte grise
Mais en ce moment, la demande a augmenté. Il doit y avoir non seulement une boîte grise sur la page, mais aussi une boîte bleue. , et peut-être un vert. Habituellement, nous Si vous souhaitez utiliser l'intégration, apportons les modifications suivantes au CSS :



Copiez le code
Le code est le suivant : .box-gray, .box-green{ border:1px solid #ccc
font-size:12px; 🎜>padding:10px;
}
.box-gray{background:#f1f1f1}
.box-green{background:#66ff66}


Html :



Copiez le code

Le code est le suivant :
c'est une boîte verte
Mais cette fois, les exigences ont changé encore une fois, la racine et l'application sont différentes. Certaines cases doivent utiliser le numéro 12. Certains caractères nécessitent une taille de 14, certains nécessitent 10 pixels et certains nécessitent 20 pixels. On estime que vous aurez une grosse tête à ce moment-là. Si vous voulez utiliser du code CSS hérité, cela deviendra extrêmement compliqué, alors essayons-le, voyons si la combinaison peut le résoudre.
css :



Copier le code

Le code est le suivant :.fs-12 {font-size:12px} .fs-14{font-size:14px} .pd-10{padding:10px} .pd-20{padding:20px}
.box {
border:1px solid #ccc;
}
.box.gray{background:#f1f1f1}
.box.green{background:#66ff66}


Html



Copier le code

Le code est le suivant :
ceci est une boîte grise fontsize12px padding20px
ceci est une boîte grise fontsize14px padding10px
….
Regardons quelques-uns d'entre eux bien que quelques-uns soient référencés sur la classe, le code et la logique sont très clairs et très faciles à maintenir. élargi à volonté. Comme vous pouvez le voir ci-dessus, la méthode de « combinaison » va de soi, mais elle n'est pas parfaite. Nous ne devons pas en faire trop lors du fractionnement de la combinaison, sinon l'effet peut être contre-productif. Ce n'est qu'en utilisant la combinaison + l'héritage de manière appropriée que nous pouvons le faire. notre Le code est plus élégant et artistique.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comprendre le principe de recherche et de correspondance du CSS pour rendre le CSS plus concis et plus efficace_Échange d'expérienceArticle suivant：Comprendre le principe de recherche et de correspondance du CSS pour rendre le CSS plus concis et plus efficace_Échange d'expérience

Articles Liés

Voir plus