Verwenden Sie beim CSS_Experience-Austausch weniger Vererbung und mehr Kombination

WBOYOriginal: 2016-05-16 12:04:081703Durchsuche

Das Folgende ist ein allgemeiner Code:
css:

Code kopieren Der Code lautet wie folgt:

 
 .box{ 
border:1px solid #ccc; 
background:#f1f1f1; 

 html:

Code kopieren Der Code lautet wie folgt:

Dies ist ein graues Kästchen

, und vielleicht eine grüne. Wenn Sie die Integration verwenden möchten, nehmen wir die folgenden Änderungen am CSS vor:

Kopieren Sie den Code

Der Code lautet wie folgt: .box-gray, .box-green{ border:1px solid #ccc;font-size:12px padding:10px;

}

.box-gray{background:#f1f1f1} 
.box-green{background:#66ff66} 

Html: 
 
Kopieren Sie den Code

Der Code lautet wie folgt:

das ist ein grünes Kästchen

Aber dieses Mal haben sich die Anforderungen geändert Auch hier sind der Stamm und die Anwendung unterschiedlich. Für einige Zeichen ist eine Größe von 14 erforderlich, für einige ist eine Größe von 20 Pixel erforderlich Wenn Sie geerbten CSS-Code verwenden möchten, wird dies äußerst kompliziert. Probieren Sie es also aus. Mal sehen, ob die Kombination das Problem lösen kann. css:

Code kopieren

Der Code lautet wie folgt:

.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 

Code kopieren

 Der Code lautet wie folgt:

das ist ein graues Feld mit der Schriftgröße 12px padding20px

div>

… Schauen wir uns einige davon an, aber der Code und die Logik sind sehr klar und sehr einfach zu pflegen beliebig erweitert werden. Wie Sie oben sehen können, ist die Methode der „Kombination“ selbstverständlich, aber sie ist nicht perfekt. Wir dürfen es bei der Aufteilung der Kombination nicht übertreiben, da sonst der Effekt kontraproduktiv sein kann Unser Code ist eleganter und künstlerischer.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwenden Sie beim CSS_Experience-Austausch weniger Vererbung und mehr Kombination

In Verbindung stehende Artikel