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!

CSS-Benennung – BEM

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

Block

Wie im Beispiel unten ist li.item ein untergeordnetes Element der Liste

/* 常规写法和BEM写法相同 */
.list

Element

/* 常规写法 */ 
  <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{}

Modifikator (Modifikator)

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>

Kombinierte Benennung ist besser als einzelne Benennung Spezifisch Der CSS-Stil hat nichts mit dem Projekt, der Seite oder dem Modul zu tun. Zum Beispiel der klassischere klare Floating-Klassenname .clearfix:

• /* 常规写法 */ 
  .list{} 
  .list .item{} 
  .list .item.active{} 
  
  /* BEM写法 */ 
  .list{} 
  .list__item{}
  .list__item_active{}

  Nach dem Login kopieren
Die semantisch orientierte Benennung richtet sich nach dem Kontext, in dem sich das Anwendungselement befindet. Zum Beispiel:

• //  推荐
  .some-intro{...}
  
  // 不推荐
  .some-introduction{...}

  Nach dem Login kopieren
Die beiden oben genannten Benennungsmethoden haben ihre eigenen Vor- und Nachteile:
• 1. Attributorientiert

Vorteile

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; }

• Funktionskomponenten

• .header { background-color: #333; color: #fff; }
  .logo {font-size: 0; color : transparent;}

  Nach dem Login kopieren
Empfohlene Namenswebsite

Codelf: https://unbug.github.io/codelf
• Referenzdokumentation:
• 1. Zhang X in Xus „css“ Wähle die Welt》
2, https://www.cnblogs.com/qianxiaox/p/13816077.html

(Lernvideo-Sharing: Web-Frontend)

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!