1. Objektorientiertes CSS (OOCSSS)
OOCSS-Regel 1: Trennung von Struktur und Haut
Wie .btn, .btn-info, .btn-warning
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-info {
color: #ffffff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-warning {
color: #ffffff;
background-color: #f0ad4e;
border-color: #eea236;
}OOCSS-Regel 2: Trennung von Container und Inhalt ( Nicht empfohlen )
.header .btn{
display: inline-block;
margin-bottom: 0;
}
2. Prinzip der Einzelverantwortung
(1), teilen Sie es so weit wie möglich in unabhängig voneinander wiederverwendbare Komponenten auf
(2), verwenden Sie mehrere Komponenten
in Kombination erreichen: Widgets wie Schaltflächen (btn) und Paging können wie objektorientiertes CSS implementiert werden.
3. Öffnungs- und Schließprinzip
(1) Offen für Erweiterung
(2 ) Wegen Änderungen geschlossen
.box{
display: block;
padding: 10px;
}
/*不好的写法*/
.content .box{
padding: 20px;
}
/*较好的写法 扩展*/
.box-large{
padding: 20px;
}
4. Benennungsprinzipien
(1) Priorisieren Sie die Verwendung funktionsbasierter Benennung ( (z. B. btn)
(2) Inhaltsbasierte Benennung (z. B. Header-Inhalt)
Das obige ist der detaillierte Inhalt vonCSS-Schreibspezifikationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
