suchen

Heim >Web-Frontend >HTML-Tutorial >Codierungsspezifikationen für HTML und CSS

Codierungsspezifikationen für HTML und CSS

WBOY
WBOYOriginal
2016-08-30 09:21:061106Durchsuche

HTML- und CSS-Codierungsspezifikationsinhalt

1. HTML-Spezifikationen

2. CSS-Spezifikationen

3. Dinge zu beachten:

4. Allgemeine Namensregeln

5. Benennung der CSS-Stylesheet-Dateien

6. Regeln zur Dateibenennung

1. HTML-Spezifikation:

1. Code-Spezifikationen

  • Fügen Sie die Standardmodus-Deklaration 8b05045a5be5764f313ed5b9168a17e6
    • zur ersten Zeile der Seite hinzu
  • Code-Einrückung: Legen Sie mit der Tabulatortaste vier Leerzeichen fest (stellen Sie normalerweise die entsprechende Leerzeichengröße in der unteren rechten Ecke der Software ein)
  • Außer dem DOC und „UTF-8“ am Anfang oder dem Sonderfall im Kopf, der großgeschrieben werden kann, ist alles andere in Kleinbuchstaben geschrieben, und die CSS-Klassen sind alle in Kleinbuchstaben geschrieben
  • Es wird empfohlen, das lang-Attribut für das HTML-Stammelement anzugeben, um die richtige Sprache für das Dokument lang="zh-CN" festzulegen
  • Unterschiedliche Dokumenttypen lösen in verschiedenen Browsern unterschiedliche Rendering-Modi aus f1f3e5f044ee836f5a0ba2e1bef33eb5
<code class="hljs xml"><span class="hljs-doctype">8b05045a5be5764f313ed5b9168a17e6
<span class="hljs-tag">fd1c7470616d86278840d6b7f184939d
  <span class="hljs-tag">544891a773924c17cba16fcfae7625a3
      <span class="hljs-tag">d373320a9b31d54a158ab0c769e5981d
      <span class="hljs-tag">e8039b8767e5ac2709e79e7579269c11
  <span class="hljs-tag">5cdbdac6b254fb497e2050d51cee3b1e
  ....
<span class="hljs-tag">3df78ee2da90f6777fae316d12dd978c
</span></span></span></span></span></span></span></code>
  • Verwenden Sie nicht @import
    • Im Vergleich zum 2cdf5bf648cf2f33323966d7f58a7f3f-Tag ist der @import-Befehl viel langsamer, was nicht nur die Anzahl zusätzlicher Anfragen erhöht, sondern auch unvorhersehbare Probleme verursacht. Zu den Alternativen gehören:
      • Verwenden Sie mehrere 52a25b17b52424c09a9e188108722f11-Elemente
      • Kompilieren Sie mehrere CSS-Dateien über einen CSS-Präprozessor wie Sass oder Less zu einer Datei
      • Funktion zum Zusammenführen von CSS-Dateien, bereitgestellt über Rails, Jekyll oder andere Systeme
<code class="hljs xml"><span class="hljs-comment"><!-- Use link elements -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"core.css">

<span class="hljs-comment"><!-- Avoid @imports -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
  <span class="hljs-at_rule">@<span class="hljs-keyword">import <span class="hljs-function">url(<span class="hljs-string">"more.css");
<span class="hljs-tag"></<span class="hljs-title">style>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

CSS- und JavaScript-Dateien einführen
  • Gemäß der HTML5-Spezifikation besteht bei der Einführung von CSS und JS normalerweise keine Angabe des Typs, da text/css bzw. text/javascript ihre Standardwerte sind
<code class="hljs xml"><span class="hljs-comment">5c6c51bc41886c301ce58ec77317e826
<span class="hljs-tag">d06eb969412e9d4a2552018f00a5f964

<span class="hljs-comment">48df608d85346f715d811edbe2b24159
<span class="hljs-tag">dabd89fc18491d0568a782031b6411c7<span class="css">
 <span class="hljs-comment">/* ... */
<span class="hljs-tag">d046036d3cc984786d6dec3577099da1

<span class="hljs-comment">f43272291475af4b6bd8a33a495f4618
<span class="hljs-tag">ab71ecaf05cdb791f516c43a54a9638a<span class="undefined"><span class="hljs-tag">ec5b9b155d57a51cb2f2cc4c7a39dc30
</span></span></span></span></span></span></span></span></span></span></span></code>

2. Kommentare

  • 1d5b7a301569e4e7c32164bb45035846
    Hinweis: Lassen Sie nach dem -- kein Leerzeichen. Wenn Sie ein Leerzeichen hinterlassen, fügen Sie allen anderen Kommentaren Leerzeichen hinzu (um die spätere Programmentwicklung zu erleichtern). Mit anderen Worten: Die Kommentare müssen global einheitlich sein

zB:
063cdccfbe2daa58849aece81acd0f27
13aefc90698bf74a1bf5dce7790c6a5d
ist eine Schreibvorgabe, es ist am besten, jeden Kommentar einzuschließen Das muss am Anfang und Ende gemacht werden, um spätere Probleme und Fehler zu reduzieren. Wickeln Sie die Leine nicht um. Das Gleiche gilt für CSS- und JS-Kommentare. b72ab2265678c9b794e8f5715841cf63

1747ec4207cc61892609c7cd8d763393
be76a34f08e132e86d3bcaf96c56926a
ist eine Schreibspezifikation, vorzugsweise alle benötigten Kommentare Sie müssen einen Anfang und ein Ende haben, um spätere Probleme und Fehler zu vermeiden. Wickeln Sie die Leine nicht um. Das Gleiche gilt für CSS- und JS-Kommentare. 3f813babe36e3927dff1365350928610

3. Namenskonvention

  • Verwenden Sie „-“ für Klasse; verwenden Sie „_“ für ID;
    • Semantische Codierung basierend auf dem Inhalt schreiben: Sie können mit der Abkürzung des Projektnamens beginnen – semantischer Name
zB: class="tb-head"; id="tb_head";

4. Attributsortierung

(Praktisch für Hintergrundprogrammierer zum Organisieren von Code)

    1. Sortierung nach Attributdefinition: Klasse, ID, Namenssortierung (diese Methode wird empfohlen)
  • (Klasse wird verwendet, um hochgradig wiederverwendbare Komponenten zu identifizieren, daher steht sie an erster Stelle, ID wird verwendet, um bestimmte Komponenten zu identifizieren, Verwendung mit Vorsicht. Daher an zweiter Stelle)

      Klasse [obligatorisch] Die Klasse wird durch den Bindestrich ' - '
    • unterschieden
      • id, name [Pflichtfeld] Die ID wird durch den Unterstrich „_“ unterschieden
      • Daten-*
      • src, for, type, href
      • Titel, alt
      • aria-*, Rolle
zB:

<code class="hljs scala"> <a <span class="hljs-class"><span class="hljs-keyword">class=<span class="hljs-string">"..." id=<span class="hljs-string">"..." data-modal=<span class="hljs-string">"toggle" href=<span class="hljs-string">"#">
    <span class="hljs-type">Example link
</a>

<input <span class="hljs-class"><span class="hljs-keyword">class=<span class="hljs-string">"form-control" <span class="hljs-class"><span class="hljs-keyword">type=<span class="hljs-string">"text">

<img src=<span class="hljs-string">"..." alt=<span class="hljs-string">"...">

</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>
    2. Spezielle Attribute können nach den Elementen sortiert und dann nach der Methode (1)
  • sortiert werden
zB:

<code class="hljs scala"><a href=<span class="hljs-string">"#" <span class="hljs-class"><span class="hljs-keyword">class=<span class="hljs-string">"..." id=<span class="hljs-string">"..."</a>
    <span class="hljs-type">Example link
</a>

<input <span class="hljs-class"><span class="hljs-keyword">type=<span class="hljs-string">"text" <span class="hljs-class"><span class="hljs-keyword">class=<span class="hljs-string">"...">
</span></span></span></span></span></span></span></span></span></span></span></span></code>
  • 3. Sortieren Sie nach alphabetischer Reihenfolge

    zB:

<code class="hljs cs">35a5735c4d13aab1f19a6a6608f5be135db79b134e9f6b82c0b36e0489ee08ed
</code>
    Sortieren Sie nach Ihrem eigenen Verständnis.
5. Reduzieren Sie die Anzahl der Tags

<code class="hljs xml"><span class="hljs-comment">4c76ac2c1023151a8e2d3158076fa24e
<span class="hljs-tag">ad790d93725fb3106baa46853aff6ac0
  <span class="hljs-tag">b932ae0017108b7fe3e1fd31c5a0da59
<span class="hljs-tag">56f9acf840e115a35ebba60d6f9fe6ca

<span class="hljs-comment">6b209e841d0ff16fd57e804718252b1f
<span class="hljs-tag">ccefbc2b1384a73e539b822ef19a6b0f
</span></span></span></span></span></span></code>
6. Boolesche Attribute

    Boolesche Attribute können ohne Zuweisung eines Werts deklariert werden. Die XHTML-Spezifikation erfordert die Zuweisung eines Werts, die HTML5-Spezifikation jedoch nicht. Mit anderen Worten: Es ist keine Zuweisung erforderlich. 
<code class="hljs xml"><span class="hljs-tag">1552813772daa9ad6d0d1ceb6d7a1cdd

<span class="hljs-tag">42afc11feee76d1f773281d7b3788f91

<span class="hljs-tag">fb0b45e61002348bececde7921721666
 <span class="hljs-tag">c86c43aa558cb7d0f6be6102cdc1e49e1<span class="hljs-tag">16148725ba3c64870356b0d518612457
<span class="hljs-tag">543154cbec1f6ea40fdaf0a76c8cde59
</span></span></span></span></span></span></code>

2. CSS-Spezifikationen

1. Grammatik

1.1, Einrückung
<code class="hljs cpp">[强制]使用 <span class="hljs-number">4 个空格做为一个缩进层级，不允许使用 <span class="hljs-number">2 个空格 或 tab 字符。  
</span></span></code>

1.2、空格

  • [强制]为了代码易读性，每个声明块的左花括号前添加一个空格
  • [强制]每条声明语句的" : "后应该插一个空格
  • [强制]属性多值每个逗号后应该插入空格 eg:box-shadow,border-image
  • [强制]不要在rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格
    对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代,替 -0.5px）

1.3、选择器

  • [强制]为选择器分组时，将单独的选择器单独存放在一行 eg:tr,td{}
  • [强制] >、+、~ 选择器的两边各保留一个空格。
  • [强制]为选择器中的属性添加双引号 不允许单引号
    例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
  • [强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。

  • [建议] 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
    eg:

    <code class="hljs css"><span class="hljs-comment">/* good */  
<span class="hljs-id">#error,  
<span class="hljs-class">.danger-message <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">font-color:<span class="hljs-value"> <span class="hljs-hexcolor">#c00;
}
<span class="hljs-id">#username <span class="hljs-tag">input <span class="hljs-rules">{}
<span class="hljs-class">.comment <span class="hljs-class">.avatar <span class="hljs-rules">{}

<span class="hljs-comment">/* bad */
<span class="hljs-tag">dialog<span class="hljs-id">#error,
<span class="hljs-tag">p<span class="hljs-class">.danger-message <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">font-color:<span class="hljs-value"> <span class="hljs-hexcolor">#c00;
}
<span class="hljs-class">.page <span class="hljs-class">.header <span class="hljs-class">.login <span class="hljs-id">#username <span class="hljs-tag">input <span class="hljs-rules">{}
<span class="hljs-class">.comment <span class="hljs-tag">div * <span class="hljs-rules">{}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

1.4、行

  • [强制]每行不得超过 120 个字符，除非单行不可分割。
  • [强制]声明块右花括号应当成行
  • [建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。
    eg:background:url(....) 此处应有换行 no-repeat;

1.5、属性

  • [强制] 属性定义必须另起一行。
  • [强制] 属性定义后必须以分号结尾。
    • 即每条声明应单独成行，以分号结尾
  • [建议] 在可以使用缩写的情况下，尽量使用属性缩写。
    eg:font: 12px/1.5 arial, sans-serif;

1.6、前缀

  • [强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。
  • [建议] 可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。

1.7、简写

  • 十六进制值应该全部小写,尽可能简写 eg:#fff
  • .避免为 0 值指定单位
    例如，用 margin: 0; 代替 margin: 0px;
<code class="hljs css"><span class="hljs-comment">/* Bad CSS */
<span class="hljs-tag">main><span class="hljs-tag">nav <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">10px;
}
<span class="hljs-class">.selector, <span class="hljs-class">.selector-secondary, <span class="hljs-class">.selector<span class="hljs-attr_selector">[type=text] <span class="hljs-rules">{  

   <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"><span class="hljs-number">15px;  
    <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"><span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-number">15px; 
   <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"><span class="hljs-function">rgba(<span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0, <span class="hljs-number">0.5);
   <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"><span class="hljs-number">0px <span class="hljs-number">1px <span class="hljs-number">2px <span class="hljs-hexcolor">#CCC,inset <span class="hljs-number">0 <span class="hljs-number">1px <span class="hljs-number">0 <span class="hljs-hexcolor">#FFFFFF 
}  
<span class="hljs-class">.selector, <span class="hljs-class">.selector-secondary, <span class="hljs-class">.selector<span class="hljs-attr_selector">[type=text] <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"><span class="hljs-number">15px;<span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"><span class="hljs-number">0px <span class="hljs-number">0px <span class="hljs-number">15px;}

<span class="hljs-comment">/* Good CSS */ 
<span class="hljs-tag">main > <span class="hljs-tag">nav <span class="hljs-rules">{
   <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">10px;
}
<span class="hljs-class">.selector,  
<span class="hljs-class">.selector-secondary,  
<span class="hljs-class">.selector<span class="hljs-attr_selector">[type="text"] <span class="hljs-rules">{  
   <span class="hljs-rule"><span class="hljs-attribute">padding:<span class="hljs-value"> <span class="hljs-number">15px;  
   <span class="hljs-rule"><span class="hljs-attribute">margin-bottom:<span class="hljs-value"> <span class="hljs-number">15px; 
   <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"> <span class="hljs-function">rgba(<span class="hljs-number">0,<span class="hljs-number">0,<span class="hljs-number">0,.<span class="hljs-number">5);
   <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value">
     transparent <span class="hljs-function">url(aVeryVeryVeryLongUrlIsPlacedHere)
       no-repeat <span class="hljs-number">0 <span class="hljs-number">0;
   <span class="hljs-rule"><span class="hljs-attribute">box-shadow:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">1px <span class="hljs-number">2px <span class="hljs-hexcolor">#ccc, inset <span class="hljs-number">0 <span class="hljs-number">1px <span class="hljs-number">0 <span class="hljs-hexcolor">#fff;
}  
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

 

2.注释

  • /* 注释内容 */
    注意：*后不要留空格，若留空格，其他注释全加空格（方便后续程序开发）换句话说，注释要全局统一

eg: /* S 注释内容 */

为书写规范，最好每一个需要注释都需要开头和结尾，减少后续麻烦和错误。不要翻行。CSS、JS注释亦然。

/* E 注释内容 */

 

3.命名规范

  • 1.应用 英文缩写命名法，杜绝用中文拼音或者中文拼音缩写（这是因为英文具有简易性，必要时可上网搜索国际缩写英文）
  • 2. 只能出现小写字符或者中划线（破折号符），不用下划线，驼峰命名法。
    eg: .btn 或者 .btn-danger
  • 3.避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思
  • 4.class 名称应当尽可能短，并且意义明确。
  • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
  • 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
  • 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。

<code class="hljs actionscript"><span class="hljs-comment">/* Bad example */
.t { ... }
.red { ... }
.header { ... }

<span class="hljs-comment">/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
</span></span></code>

 

4.选择器

  • 对于通用元素使用 class ，这样利于渲染性能的优化。
  • 对于经常出现的组件，避免使用属性选择器（例如，[class="..."]）。浏览器的性能会受到这些因素的影响。
  • 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
  • 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。
<code class="hljs cpp"><span class="hljs-comment">/* Bad example */
span { ... }
.page-container <span class="hljs-preprocessor">#stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

<span class="hljs-comment">/* Good example */
.avatar { ... }
.tweet-header .username { ... } <span class="hljs-comment">//不要超过3个
.tweet .avatar { ... }
</span></span></span></span></code>

5.声明顺序

5.1. 相关的属性声明应当归为一组，并按照下面的顺序排列：
<code class="hljs markdown"><span class="hljs-bullet">* Positioning
<span class="hljs-bullet">* Box model
<span class="hljs-bullet">* Typographic
<span class="hljs-bullet">* Visual  
</span></span></span></span></code>

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。 eg:

<code class="hljs css"><span class="hljs-class">.declaration-order <span class="hljs-rules">{
  <span class="hljs-comment">/* Positioning */
  <span class="hljs-rule"><span class="hljs-attribute">position:<span class="hljs-value"> absolute;
  <span class="hljs-rule"><span class="hljs-attribute">top:<span class="hljs-value"> <span class="hljs-number">0;
  <span class="hljs-rule"><span class="hljs-attribute">right:<span class="hljs-value"> <span class="hljs-number">0;
  <span class="hljs-rule"><span class="hljs-attribute">bottom:<span class="hljs-value"> <span class="hljs-number">0;
  <span class="hljs-rule"><span class="hljs-attribute">left:<span class="hljs-value"> <span class="hljs-number">0;
  <span class="hljs-rule"><span class="hljs-attribute">z-index:<span class="hljs-value"> <span class="hljs-number">100;

  <span class="hljs-comment">/* Box-model */  <span class="hljs-rule"><span class="hljs-attribute">display:<span class="hljs-value"> block;
  <span class="hljs-rule"><span class="hljs-attribute">float:<span class="hljs-value"> right;
  <span class="hljs-rule"><span class="hljs-attribute">width:<span class="hljs-value"> <span class="hljs-number">100px;
  <span class="hljs-rule"><span class="hljs-attribute">height:<span class="hljs-value"> <span class="hljs-number">100px;

  <span class="hljs-comment">/* Typography */
  <span class="hljs-rule"><span class="hljs-attribute">font:<span class="hljs-value"> normal <span class="hljs-number">13px <span class="hljs-string">"Helvetica Neue", sans-serif;
  <span class="hljs-rule"><span class="hljs-attribute">line-height:<span class="hljs-value"> <span class="hljs-number">1.5;
  <span class="hljs-rule"><span class="hljs-attribute">color:<span class="hljs-value"> <span class="hljs-hexcolor">#333;
  <span class="hljs-rule"><span class="hljs-attribute">text-align:<span class="hljs-value"> center;

  <span class="hljs-comment">/* Visual */
  <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"> <span class="hljs-hexcolor">#f5f5f5;
  <span class="hljs-rule"><span class="hljs-attribute">border:<span class="hljs-value"> <span class="hljs-number">1px solid <span class="hljs-hexcolor">#e5e5e5;
  <span class="hljs-rule"><span class="hljs-attribute">border-radius:<span class="hljs-value"> <span class="hljs-number">3px;

  <span class="hljs-comment">/* Misc */
  <span class="hljs-rule"><span class="hljs-attribute">opacity:<span class="hljs-value"> <span class="hljs-number">1;
}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

5.2.设置盒子模型 - 是否脱离标准（子絶父相）- 其他属性

注意兼容性写法（纯属个人习惯）

  • 盒子模型
    • 1.设置是否需要浮动元素 或者 转块(float,display)
    • 2.设置盒子边框、背景颜色、字体颜色（border,background，font,color）
    • 3.设置宽高大小（width,height）
    • 4.文字垂直居中（line-hight,text-align,vertical-align等等）
    • 5.设置margin、padding值
  • 标准流（子絶父相）
    • position ：relative、absolute、static、fixed
    • left/top/right/bottom
    • z-index
  • 其他属性
    • opcaity、cursor等
  • css3新属性
    • transition、transform、animation等

每个范围可由首字母开头为排序：
eg:盒子模型中的第2条中，可由background,border,color等首字母为先排序; 但有些例外，如position肯定排先，后定义left等方向位属性

ps:需要用到媒体查询，将媒体查询放在尽可能相关规则的附近

eg:

<code class="hljs cpp">.declaration-order {
  display: block;
  <span class="hljs-keyword">float: right;  
  background-color: <span class="hljs-preprocessor">#f5f5f5;
  border: <span class="hljs-number">1px solid <span class="hljs-preprocessor">#e5e5e5;
  border-radius: <span class="hljs-number">3px;
  color: <span class="hljs-preprocessor">#<span class="hljs-number">333;
  font: normal <span class="hljs-number">13px <span class="hljs-string">"Helvetica Neue", sans-serif;  

  width: <span class="hljs-number">100px;
  height: <span class="hljs-number">100px;
  text-align: center;
  line-height: <span class="hljs-number">100px;

  margin: <span class="hljs-number">0 <span class="hljs-keyword">auto;
  padding: <span class="hljs-number">10px <span class="hljs-number">0;  

  position: absolute;
  top: <span class="hljs-number">0;
  right: <span class="hljs-number">0;
  bottom: <span class="hljs-number">0;
  left: <span class="hljs-number">0;
  z-index: <span class="hljs-number">100;
  opacity: <span class="hljs-number">1;

  transtion: all <span class="hljs-number">.5s ease <span class="hljs-number">0s;
  animation: name initial <span class="hljs-number">2s;
}
@keyframes name{
    <span class="hljs-number">0%{}
    <span class="hljs-number">100{}
    <span class="hljs-comment">///
    from{}
    to{}
}
@<span class="hljs-function">media screen <span class="hljs-title">and <span class="hljs-params">(min-width) <span class="hljs-title">and <span class="hljs-params">(max-width){
    and左右之间要留空格
}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

5.3.按照首字母排列顺序编写

 

注意事项：

1. 尽量不使用 !important 声明。

  • [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。

2.媒体查询（Media query）的位置

  • 将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

3.带前缀的属性

  • 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

    在 Textmate 中，使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

    Prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);

4.单行规则声明

  • 对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行 (能仔细分析，检测错误)

5.简写形式的属性声明

  • 在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：
    • padding
    • margin
    • font
    • background
    • border
    • border-radius
<code class="hljs css"><span class="hljs-comment">/* Bad example */
<span class="hljs-class">.element <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">margin:<span class="hljs-value"> <span class="hljs-number">0 <span class="hljs-number">0 <span class="hljs-number">10px;
  <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> red;
  <span class="hljs-rule"><span class="hljs-attribute">background:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"image.jpg");
  <span class="hljs-rule"><span class="hljs-attribute">border-radius:<span class="hljs-value"> <span class="hljs-number">3px <span class="hljs-number">3px <span class="hljs-number">0 <span class="hljs-number">0;
}

<span class="hljs-comment">/* Good example */
<span class="hljs-class">.element <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">margin-bottom:<span class="hljs-value"> <span class="hljs-number">10px;
  <span class="hljs-rule"><span class="hljs-attribute">background-color:<span class="hljs-value"> red;
  <span class="hljs-rule"><span class="hljs-attribute">background-image:<span class="hljs-value"> <span class="hljs-function">url(<span class="hljs-string">"image.jpg");
  <span class="hljs-rule"><span class="hljs-attribute">border-top-left-radius:<span class="hljs-value"> <span class="hljs-number">3px;
  <span class="hljs-rule"><span class="hljs-attribute">border-top-right-radius:<span class="hljs-value"> <span class="hljs-number">3px;
}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

6.Less 和 Sass 中的嵌套

  • 避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。
<code class="hljs lua">// Without nesting
.<span class="hljs-built_in">table > thead > tr > th { &hellip; }
.<span class="hljs-built_in">table > thead > tr > td { &hellip; }

// With nesting
.<span class="hljs-built_in">table > thead > tr {
  > th { &hellip; }
  > td { &hellip; }
}
</span></span></span></code>

了解更多请点击，本文更多参照此文章

常用的命名规则

class的命名

用中划线 ' - '

<code class="hljs swift">头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：<span class="hljs-keyword">left <span class="hljs-keyword">right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
</span></span></code>

Id的命名:

用下划线 ' _ '

1)页面结构

容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center

(2)导航

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary

(3)功能

标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：register 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标籤页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright

CSS样式表文件命名

<code class="hljs css">主要的 <span class="hljs-tag">master<span class="hljs-class">.css
模块 <span class="hljs-tag">module<span class="hljs-class">.css
基本共用 <span class="hljs-tag">base<span class="hljs-class">.css
布局、版面 <span class="hljs-tag">layout<span class="hljs-class">.css
主题 <span class="hljs-tag">themes<span class="hljs-class">.css
专栏 <span class="hljs-tag">columns<span class="hljs-class">.css
文字 <span class="hljs-tag">font<span class="hljs-class">.css
表单 <span class="hljs-tag">forms<span class="hljs-class">.css
补丁 <span class="hljs-tag">mend<span class="hljs-class">.css
打印 <span class="hljs-tag">print<span class="hljs-class">.css
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

文件命名规则

项目命名 全部采用小写方式，以下划线分隔 例：my_project_name 目录命名

参照项目命名规则；

有复数结构时，要采用复数命名法。

例：scripts, styles, images, data_models JS文件命名

参照项目命名规则。

例：account_model.js CSS, SCSS文件命名

参照项目命名规则。

例：retina_sprites.scss HTML文件命名

参照项目命名规则。

例：error_report.html

 

 

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die HTML-TextformatierungNächster Artikel：Beispiel für die HTML-Textformatierung

In Verbindung stehende Artikel

Mehr sehen