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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2016-05-16 12:04:08

original

1741 Les gens l'ont consulté

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.

Étiquettes associées：

css 组合继承

source：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érience Article suivant：Code d'effet de table de simulation div + css_Échange d'expérience

Déclaration de ce site Web

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

Derniers articles par auteur