Teilen von CSS-Codespezifikationen

Beim Erlernen von CSS werden wir feststellen, dass CSS nicht schwer zu erlernen ist, aber in großen Projekten wird es schwierig, es zu verwalten. Verschiedene Programmierer haben sehr unterschiedliche Schreibstile, was die Kommunikation bei der Arbeit im Team erschweren kann. Daher gibt es Standards zum Schreiben von CSS-Code.

1. Verwenden Sie Zurücksetzen, aber kein globales 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 Sie bitte nicht den globalen Reset verwenden:

*{ margin:0; padding:0; }

Dies liegt nicht nur daran, dass es sich um eine langsame und ineffiziente Methode handelt, sondern führt auch dazu, dass einige unnötige Elemente auch ihre Ränder und Abstände zurücksetzen. 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 Benennungsgewohnheiten

Zweifellos wird chaotischer oder unsemantisch benannter Code jeden verrückt machen. Genau wie dieser Code:

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

Ich denke, nicht einmal ein Anfänger würde eine Klasse wie diesen in einem tatsächlichen Projekt 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 ist, ob Sie es müssen Ändern Sie alle ursprünglichen roten Schriftarten in Blau, dann wird der Stil wie folgt aussehen:

.red{color:bule;}

Eine solche Benennung wird sehr verwirrend sein. Wenn Sie dieselbe Seitenleiste mit dem Namen .leftBar benötigen, wird es auch mühsam sein, sie in die rechte Seitenleiste zu ändern. 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 aussagekräftige Benennung wählen, wie zum Beispiel: #navigation{...}, .sidebar{.... }, .postwrap{ ...}

Auf diese Weise hat es keinen Einfluss auf die Verbindung mit HTML-Elementen, egal wie Sie die Stile ändern, die diese Klassen oder IDs definieren.

Es gibt eine andere Situation: Einige feste Stile werden nach der Definition nicht geändert. 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;}

Dann für einen solchen Absatz

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

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

3. Code-Abkürzung

CSS-Code-Abkürzung kann die Geschwindigkeit beim Schreiben von Code verbessern und die Codemenge optimieren. Es gibt viele Eigenschaften, die in CSS abgekürzt werden können, darunter Rand, Abstand, Rahmen, Schriftart, Hintergrund und Farbwerte. Wenn Sie Codeabkürzungen lernen, kann der Originalcode wie folgt abgekürzt werden:

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

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

4. CSS-Vererbung verwenden

Wenn mehrere untergeordnete Elemente des ü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. Dann kann der ursprüngliche Code wie folgt abgekürzt werden:

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

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

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

kann in

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

6 zusammengeführt werden. Geeignete Codekommentare können anderen das Lesen Ihres Codes erleichtern, und eine angemessene Organisation von Codekommentaren kann die Struktur klarer machen. Sie können am Anfang des Stylesheets ein Verzeichnis hinzufügen:

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

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

Der Hauptinhalt des Codes sollte ebenfalls angemessen unterteilt sein und der Code sollte bei Bedarf sogar kommentiert werden. Dies ist auch förderlich für die Teamentwicklung:

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

7. Sortieren Sie Ihren CSS-Code alphabetisch sortiert werden können, ist es schneller, sie zu finden und zu ändern:

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

8 CSS lesbar halten

Das Schreiben von lesbarem CSS erleichtert das Auffinden und Ändern von Stilen. Ich denke, es ist selbstverständlich, welcher der beiden folgenden Fälle besser lesbar 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; }

Wenn es um einige Selektoren mit weniger Stilattributen geht, schreibe ich eine Zeile:

/*** 样式属性按字母排序 ***/
div{
    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;
}

Es gibt keine feste Regel für diese Regel, aber egal wie Sie sie schreiben, mein Vorschlag ist, die immer beizubehalten Code konsistent. 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, es gibt jedoch Unterschiede in der Leistung, wie z. B.

Der Unterschied besteht darin, dass border:0 border auf 0px setzt. Obwohl es auf der Seite nicht sichtbar ist, rendert der Browser gemäß dem Standardwert von border immer noch border-width/border-color, was bedeutet, dass der Speicherwert belegt ist.

Und border:none setzt den Rand auf „none“, was bedeutet, dass es keinen Rand gibt. Wenn der Browser „none“ analysiert, führt er keine Renderaktion aus, das heißt, er verbraucht keinen Speicherwert. Daher wird die Verwendung von border:none;

Ebenso empfohlen, display:none verbirgt den Objektbrowser ohne Rendering und belegt keinen Speicher. Und Sichtbarkeit: verborgener Wille.

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代码，减少文件大小，以获得更高的加载速度。

相关推荐：CSS教程

Das obige ist der detaillierte Inhalt vonTeilen von CSS-Codespezifikationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!