Benennungskonvention für CSS-Code

Verwenden Sie Klassenselektoren und verlassen Sie ID-Selektoren.

Die Einzigartigkeit der ID auf einer Seite bedeutet, dass, wenn Sie CSS mit ID als Selektor schreiben, diese nicht wiederverwendet werden kann.

NEC-Sonderzeichen: „-“ Bindestrich

„-“ stellt in dieser Spezifikation nicht die Bedeutung eines Bindestrichs dar.

Es bedeutet nur zwei Bedeutungen: Klassifizierungspräfixtrennzeichen und erweitertes Trennzeichen. Einzelheiten finden Sie in den folgenden spezifischen Regeln.

Kategoriebenennungsmethode: Verwenden Sie einen einzelnen Buchstaben „-“ als Präfix

Layout (Raster) (.g-); (.u-); Funktion (.f-); Status (.z-).

Hinweis: Die Selektoren in Ihren Stilen sollten immer mit den ersten fünf Kategorien beginnen und dann darin abgeleitete Selektoren verwenden.

Wenn diese fünf Kategorien Ihre Anforderungen nicht erfüllen, können Sie eine oder mehrere zusätzliche Kategorien definieren, diese müssen jedoch den Namensregeln entsprechen, denen ein einzelner Buchstabe „-“ vorangestellt ist, also im .x-Format .

Besonderheit: .j- wird ausschließlich für JS zum Abrufen von Knoten verwendet. Bitte verwenden Sie .j- nicht zum Definieren von Stilen.

Nachkommen-Selektorbenennung

Es wird vereinbart, dass ein Klassenselektor, dem kein einzelner Buchstabe „-“ vorangestellt ist und der eine Länge größer oder gleich 2 hat, ein Nachkommen-Selektor ist, wie z : .item befindet sich im M-List-Modul. Für jedes Element ist .text der Textteil im M-List-Modul: .m-list .item{}.m-list .text{}.

Ein semantisches Tag kann auch ein Nachkommenselektor sein, wie zum Beispiel: .m-list li{}.

Klassenselektoren mit nur einem Buchstaben sind nicht zulässig. Der Grund dafür ist im Abschnitt „Erweiterte Klassen für abgeleitete Selektoren von Modulen und Komponenten“ aufgeführt.

Bei Verwendung der Nachkommen-Auswahlmethode müssen Sie nicht berücksichtigen, ob der Name verwendet wurde, da er nur im aktuellen Modul oder in der aktuellen Komponente wirksam wird und derselbe Stilname in verschiedenen Modulen wiederholt werden kann oder Komponenten nutzen, ohne sich gegenseitig zu stören; der Effekt ist besonders deutlich, wenn mehrere Personen zusammenarbeiten oder in Untermodulen zusammenarbeiten!

Der Nachkommenselektor muss die Strukturbaumebene nicht vollständig darstellen und sollte so kurz wie möglich sein.

Hinweis: Verwenden Sie in Seitenlayouts keine Nachkommenselektoren, da die Gefahr einer Kontamination größer ist

/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

Namen sollten prägnant und dennoch semantisch sein

/* 反对：表现化的或没有语义的命名 */
.m-abc .green2{}
.g-left2{}
/* 推荐：使用有语义的简短的命名 */
.m-list .wrap2{}
.g-side2{}

Unterschiedliche Klassenbenennung mit derselben Semantik

Methode: Fügen Sie einfach Zahlen oder Buchstaben zur Unterscheidung hinzu (z. B.: .m-list, .m-list2, .m -list3). usw. sind alles Listenmodule, aber es sind völlig unterschiedliche Module).

Andere Beispiele: .f-fw0, .f-fw1, .s-fc0, .s-fc1, .m-logo2, .m-logo3, u-btn, u-btn2 usw.

Die Benennungsmethode für Erweiterungsklassen von Modulen und Komponenten

Wenn A, B, C,... vom gleichen Typ sind und ein ähnliches Erscheinungsbild mit geringen Unterschieden haben, dann die mit dem Die höchste Vorkommensrate unter ihnen ist „Machen Sie es zu einer Basisklasse“, andere machen es zu einer Erweiterung der Basisklasse.

Methode: „-“ Zahlen oder Buchstaben (zum Beispiel: Die erweiterten Klassen von .m-list sind .m-list-1, .m-list-2 usw.).

Ergänzung: Die Basisklasse selbst kann unabhängig verwendet werden (z. B.: class="m-list"), und die erweiterte Klasse muss basierend auf der Basisklasse verwendet werden (z. B.: class="m-") list m-list-2" ).

Wenn Ihre Erweiterungsklasse verschiedene Zustände darstellt, können Sie sie wie folgt benennen: u-btn-dis, u-btn-hov, m-box-sel, m-box-hov usw. und Dann verwenden Sie es wie folgt: class="u-btn u-btn-dis".

Wenn Ihre Website nicht mit Browsern wie IE6 kompatibel ist, kann Ihre Methode zur Statusidentifizierung auch die Methode der unabhängigen Statusklassifizierung (.z-) übernehmen: .u-btn.z-dis, .m- box .z-sel und verwenden Sie es dann wie folgt: class="u-btn z-dis".

Erweiterte Klassen für Nachkommen-Selektoren von Modulen und Komponenten

Manchmal gibt es ähnliche Dinge in Modulen. Wenn Sie sie nicht in Komponenten und Erweiterungen umwandeln, können Sie auch Nachkommen-Selektoren und -Erweiterungen verwenden.

Nachkommenselektor: .m-login .btn{}.

Erweiterungen für Nachkommenselektoren: .m-login .btn-1{}, .m-login .btn-dis{}.

Sie können auch die unabhängige Statusklassifizierungsmethode (.z-) verwenden: .m-login .btn.z-dis{} und sie dann wie folgt verwenden: class="btn z-dis".

Hinweis: Diese Methode wird für Klassenselektoren verwendet. Wenn Sie Tags direkt als Selektoren verwenden, müssen Sie diese Benennungsmethode nicht verwenden.

Hinweis: Um Namenskonventionskonflikte zwischen erweiterten Klassen und großen Klassen von Nachkommenselektoren zu vermeiden, sind einzelne Buchstaben für Nachkommenselektoren nicht zulässig.

Zum Beispiel: .m-list .a{} ist nicht zulässig, da .a, wenn es erweitert werden muss, zu .a-bb wird, was im Widerspruch zur Namenskonvention großer Kategorien steht.

Gruppenselektoren können manchmal Erweiterungsmethoden ersetzen

Obwohl zwei Module desselben Typs sehr ähnlich sind, hofft man manchmal, dass keine Abhängigkeit zwischen ihnen besteht, was bedeutet, dass man sie nicht verwenden möchte Erweiterte Methode, dann können Sie gemeinsame Stile festlegen, indem Sie Selektoren zusammenführen.

Die Voraussetzung für die Verwendung dieser Methode ist, dass derselbe Typ, die gleiche Funktion und das gleiche Erscheinungsbild ähnlich sind und zur einfachen Wartung im gleichen Codebereich geschrieben sind.

  /* 两个元件共性的样式 */
.u-tip1,.u-tip2{}
.u-tip1 .itm,.u-tip2 .itm{}
/* 在分别是两个元件各自的样式 */
/* tip1 */
.u-tip1{}
.u-tip1 .itm{}
/* tip2 */
.u-tip2{}
.u-tip2 .itm{}

Verhindern Sie Verschmutzung und Verschmutzung

Wenn Module oder Komponenten untereinander verschachtelt sind und derselbe Tag-Selektor oder andere Nachkommen-Selektoren verwendet werden, dann Der Selektor im Inneren wird vom gleichen Selektor draußen beeinflusst.

Wenn Ihr Modul oder Ihre Komponente möglicherweise verschachtelt ist oder in anderen Modulen oder Komponenten verschachtelt ist, verwenden Sie Tag-Selektoren mit Vorsicht, verwenden Sie bei Bedarf Klassenselektoren und achten Sie auf die Benennungsmethode. Sie können .m-layer verwenden. Layerxxx-, .m-list2- und .list2xxx-Formulare, um die Verschmutzung von Nachkommenselektoren zu reduzieren.