13 Tipps zum Schreiben von gutem CSS-Code

CSS ist nicht schwer zu erlernen, aber in großen Projekten wird es schwierig, es zu verwalten. Insbesondere wenn verschiedene Personen leicht unterschiedliche Schreibstile in CSS haben, wird es noch schwieriger, im Team zu kommunizieren. Zu diesem Zweck habe ich einige Möglichkeiten zusammengefasst um effiziente und saubere Methoden zu erreichen:

1. Verwenden Sie „Zurücksetzen“, aber nicht das globale Zurücksetzen

Die Standardattribute verschiedener Browserelemente sind unterschiedlich. Verwenden Sie Zurücksetzen, um einige Standardattribute von Browserelementen zurückzusetzen, um Browserkompatibilität zu erreichen. Es ist jedoch zu beachten, dass bitte kein globaler Reset verwendet wird:

*{ margin:0; padding:0; }

Dies ist nicht nur langsam und ineffizient, sondern führt auch dazu, dass die Ränder und der Abstand unnötiger Elemente zurückgesetzt werden. Es wird empfohlen, sich auf die Praktiken von YUI Reset und Eric Meyer zu beziehen. Ich teile die gleiche Ansicht wie Eric Meyer. Um Browserkompatibilität und Bedienkomfort zu erreichen, müssen entsprechende Änderungen vorgenommen werden. Der Reset, den ich verwende, ist wie folgt:

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, 
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{ 
  border:medium none; 
  margin: 0; 
  padding: 0; 
} 
/** 设置默认字体 **/
body,button, input, select, textarea { 
  font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; 
} 
h1, h2, h3, h4, h5, h6 { font-size: 100%; } 
em{font-style:normal;} 
/** 重置列表元素 **/
ul, ol { list-style: none; } 
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;} 
a:hover { text-decoration: underline; color:#F40; } 
/** 重置图片元素 **/
img{ border:0px;} 
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2. Gute Namensgewohnheiten

Es besteht kein Zweifel, dass chaotischer oder unsemantisch benannter Code jeden in den Wahnsinn treibt. Code wie folgt:

.aaabb{margin:2px;color:red;}

Ich denke, nicht einmal ein Anfänger würde eine Klasse in einem tatsächlichen Projekt so benennen, aber haben Sie jemals gedacht, dass ein solcher Code auch sehr problematisch ist:

<h1>My name is <span class="red blod">Wiky</span></h1>

Das Problem besteht darin, dass, wenn Sie alle ursprünglichen roten Schriftarten in blaue ändern müssen, der Stil wie folgt aussieht:

.red{color:bule;}

Eine solche Benennung wird sehr verwirrend sein und es wird auch sehr problematisch sein, wenn die Seitenleiste mit dem Namen .leftBar in die rechte Seitenleiste geändert werden muss. Bitte verwenden Sie daher nicht die Eigenschaften des Elements (Farbe, Position, Größe usw.), um eine Klasse oder ID zu benennen. Sie können eine sinnvolle Benennung wählen, wie zum Beispiel: #navigation{...}, .sidebar{.... }, .postwrap{ ...}

Auf diese Weise wird die Verbindung zwischen ihnen und HTML-Elementen nicht beeinträchtigt, egal wie Sie die Stile ändern, die diese Klassen oder IDs definieren.

Es gibt eine andere Situation, in der einige feste Stile nach der Definition nicht geändert werden können. Dann müssen Sie sich bei der Benennung nicht um die gerade erwähnte Situation kümmern, z. B.

.alignleft{float:left;margin-right:20px;} 
.alignright{float:right;text-align:right;margin-left:20px;} 
.clear{clear:both;text-indent:-9999px;}

​Also für einen solchen Absatz

<p class="alignleft">我是一个段落！</p>

Wenn Sie diesen Absatz von der ursprünglichen linken Ausrichtung in eine rechte Ausrichtung ändern müssen, müssen Sie nur seinen Klassennamen in rechts ausrichten ändern.

3. Code-Abkürzung

CSS-Code-Abkürzungen können die Geschwindigkeit beim Schreiben von Code erhöhen und die Codemenge vereinfachen. Es gibt viele Eigenschaften, die in CSS abgekürzt werden können, darunter Rand, Abstand, Rahmen, Schriftart, Hintergrund und Farbwerte usw. Wenn Sie die Codeabkürzung gelernt haben, würde der Originalcode so aussehen:

li{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 1.2em; 
    line-height: 1.4em; 
    padding-top:5px; 
    padding-bottom:10px; 
    padding-left:5px; 
}

Es kann wie folgt abgekürzt werden:

li{ 
    font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
    padding:5px 0 10px 5px; 
}

Wenn Sie mehr darüber erfahren möchten, wie diese Attribute abgekürzt werden, können Sie sich „Common CSS Abbreviation Syntax Summary“ ansehen oder CSS-Shorthand-Cheat-Sheet.pdf herunterladen.

4. Verwenden Sie die CSS-Vererbung

Wenn mehrere untergeordnete Elemente eines übergeordneten Elements auf der Seite denselben Stil verwenden, ist es am besten, dieselben Stile für ihre übergeordneten Elemente zu definieren und sie diese CSS-Stile erben zu lassen. Auf diese Weise können Sie Ihren Code gut pflegen und die Codemenge reduzieren. Der Originalcode sieht also so aus:

#container li{ font-family:Georgia, serif; } 
#container p{ font-family:Georgia, serif; } 
#container h1{font-family:Georgia, serif; }

Es kann wie folgt abgekürzt werden:

#container{ font-family:Georgia, serif; }

5. Verwenden Sie den Multiselektor

Sie können mehrere CSS-Selektoren zu einem kombinieren, wenn sie einen gemeinsamen Stil haben. Dadurch bleibt der Code nicht nur prägnant, sondern Sie sparen auch Zeit und Platz. Zum Beispiel:

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Kann in

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

zusammengeführt werden 6. Passende Codekommentare

Codekommentare können anderen das Verständnis Ihres Codes erleichtern, und eine sinnvolle Organisation von Codekommentaren kann die Struktur klarer machen. Sie können am Anfang des Stylesheets ein Verzeichnis hinzufügen:

/*------------------------------------ 
    1. Reset 
    2. Header 
    3. Content 
    4. SideBar 
    5. Footer 
  ----------------------------------- */

Auf diese Weise ist die Struktur Ihres Codes auf einen Blick klar und Sie können den Code leicht finden und ändern.

Auch der Hauptinhalt des Codes sollte sinnvoll gegliedert sein und der Code sollte bei Bedarf sogar kommentiert werden, was auch der Teamentwicklung förderlich ist:

/***    Header  ***/ 
#header{ height:145px; position:relative; } 
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;} 
  
/***    Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;} 
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; } 
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; } 
  
/***    Footer  ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;} 
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. Bestellen Sie Ihren CSS-Code

Wenn die Attribute im Code alphabetisch sortiert werden können, können Sie sie schneller finden und ändern:

/*** 样式属性按字母排序 ***/
p{ 
    background-color:#3399cc; 
    color:#666; 
    font:1.2em/1.4em Arial, Helvetica, sans-serif; 
    height:300px; 
    margin:10px 5px; 
    padding:5px 0 10px 5px; 
    width:30%; 
    z-index:10; 
}

8. Halten Sie CSS lesbar

Das Schreiben von lesbarem CSS erleichtert das Auffinden und Ändern von Stilen. Ich denke, es ist selbsterklärend, welcher der beiden folgenden Fälle besser lesbar ist.

/*** 每个样式属性写一行 ***/
p{ 
    background-color:#3399cc; 
    color:#666; 
    font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
    height:300px; 
    margin:10px 5px; 
    padding:5px 0 10px 5px; 
    width:30%; 
    z-index:10; 
} 
  
/*** 所有的样式属性写在同一行 ***/
p{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

Wenn ich es mit einigen Selektoren mit weniger Stilattributen zu tun habe, schreibe ich eine Zeile:

/*** 选择器属性少的写在同一行 ***/
p{ background-color:#3399cc; color:#666;}

Diese Regel ist nicht verbindlich, aber egal wie Sie sie schreiben, mein Vorschlag ist, den Code immer konsistent zu halten. Wenn es viele Attribute gibt, schreiben Sie diese in separate Zeilen. Wenn weniger als 3 Attribute vorhanden sind, können Sie eine Zeile schreiben.

9. Wählen Sie bessere Stilattributwerte

Einige Attribute in CSS verwenden unterschiedliche Attributwerte. Obwohl die Auswirkungen ähnlich sind, gibt es Unterschiede in der Leistung, wie zum Beispiel

　　区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

　　而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;

　　同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。

　　10. 使用代替@import

　　首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import

　　11. 使用外部样式表

　　这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：

<style type="text/css" > 
    #container{ .. } 
    #sidebar{ .. } 
</style>

或

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

　　而是使用导入外部样式表：

<link rel="stylesheet" type="text/css" href="css/styles.css" />

　　12. 避免使用CSS表达式（Expression）

　　CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

　　如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

　　表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

　　如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

　　13. 代码压缩

　　　当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor

　　利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

　　14. 总结

　　在本文中，我力图更详尽的总结书写更高效的CSS代码的原则，但鉴于本人见识和精力有限，我还是希望这些原则能帮助您更好的书写和管理您的CSS代码，不知您又是如何书写CSS的，是否也有一些想要分享的技巧？给我留言吧谢谢~

Das obige ist der detaillierte Inhalt von13 Tipps zum Schreiben von gutem CSS-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!