Heim >Web-Frontend >CSS-Tutorial >Wie schreibe ich eleganten und langlebigen CSS-Code? Teilen Sie Tipps zur CSS-Benennung!
Wenn Sie schon länger mit CSS arbeiten, wissen Sie, dass Vererbung, Spezifität und Benennung zu den am schwierigsten zu bewältigenden Dingen gehören. Da das gesamte CSS global ist, wird es mit zunehmender Codebasis immer schwieriger zu verhindern, dass Stile miteinander in Konflikt geraten und unbeabsichtigte Nebenwirkungen verursachen! Der folgende Artikel gibt Ihnen einige Tipps zur CSS-Benennung, um unseren Code elegant und attraktiv zu gestalten. Ich hoffe, dass er für alle hilfreich ist!
Was ist BEM?
BEM ist eine CSS-Benennungsspezifikation. [Empfohlenes Lernen: CSS-Video-Tutorial]
BEM steht für „Block, Element, Modifikator“.
Im Selektor stellen die folgenden drei Symbole erweiterte Beziehungen dar:
- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线:双下划线用来连接块和块的子元素 _ 单下划线:单下划线用来描述一个块或者块的子元素的一种状态
Mit BEM-Beispielvergleich
Wie im Beispiel unten ist li.item ein untergeordnetes Element der Liste
/* 常规写法和BEM写法相同 */ .list
/* 常规写法 */ <ul class="list"> <li class="item">Pricing</li> <li class="item">Contact</li> </ul> /* BEM写法 */ <ul class="list"> <li class="list__item">Pricing</li> <li class="list__item">Contact</li> </ul>
/* 常规写法 */ .list{} .list .item{} /* BEM写法 */ .list{} .list__item{}
Ein „Modifikator“ kann als ein bestimmter Status eines Blocks verstanden werden! Die Vorteile von BEM besser
Da kurze Namen die Schreibzeit verkürzen, verringert sich auch die Größe von CSS-Dateien! Zum Beispiel dieses Beispiel: /* 常规写法 */
<ul class="list">
<li class="item">Pricing</li>
<li class="item">Contact</li>
</ul>
/* BEM写法 */
<ul class="list">
<li class="list__item_active">
Pricing
</li>
<li class="list__item">Contact</li>
</ul>
/* 常规写法 */ .list{} .list .item{} .list .item.active{} /* BEM写法 */ .list{} .list__item{} .list__item_active{}
// 推荐 .some-intro{...} // 不推荐 .some-introduction{...}
Nachteile: Aufgrund seiner einzelnen Eigenschaft sind die Anwendungsszenarien begrenzt. Da es außerdem einfach zu verwenden ist, kann es leicht überbeansprucht werden, was zu höheren Wartungskosten führt.
2. Semantikorientiert
Der Vorteil ist, dass es ein breites Spektrum an Anwendungsszenarien bietet, sehr exquisite Layouteffekte erzielen kann und
Nachteil: Der Code ist lang und Die Entwicklungseffizienz ist durchschnittlich, da der gesamte HTML-Code sogar einen Abstand von 10 Pixeln haben muss. Dies führt dazu, dass viele Entwickler entweder den Tag-Selektor direkt verwenden oder einen einfachen Klassennamen wählen und dann den Stil über die Eltern-Kind-Beziehung definieren, was zu größeren Wartungsproblemen führt. „Benannte Zusammenfassungsempfehlungen“ e Komponenten
// 不建议 .header{...} //推荐 .cs-header{...}
Semantische Widgets
.clearfix:after { content : ''; display: table; clear: both; }
.header { background-color: #333; color: #fff; } .logo {font-size: 0; color : transparent;}
Das obige ist der detaillierte Inhalt vonWie schreibe ich eleganten und langlebigen CSS-Code? Teilen Sie Tipps zur CSS-Benennung!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!