CSS-Schreibspezifikationen

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!