検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >htmlとcssのコーディング仕様

htmlとcssのコーディング仕様

WBOY
WBOYオリジナル
2016-08-30 09:21:061106ブラウズ

HTMLおよびCSSコーディング仕様の内容

1.HTML仕様

2.CSS仕様

3. 注:

4. 一般的に使用される命名規則

5. CSSスタイルシートファイルの名前付け

6. ファイル名のルール

1.HTML仕様:

1. コード仕様

  • 標準モード宣言 8b05045a5be5764f313ed5b9168a17e6 をページの最初の行に追加します
  • コードのインデント: Tabキーを使用して4つのスペースを設定します(通常、ソフトウェアの右下隅で対応するスペースのサイズを設定します)
  • 先頭の DOC と「UTF-8」、または大文字にできる先頭の特殊な状況を除き、その他はすべて小文字であり、CSS クラスもすべて小文字です
  • ドキュメント lang="zh-CN" に正しい言語を設定するには、HTML ルート要素の lang 属性を指定することをお勧めします
  • 異なる doctype は、異なるブラウザで異なるレンダリング モードをトリガーします 703576b692806d30468f04351f972c84
リーリー
  • @import は使用しないでください
    • 2cdf5bf648cf2f33323966d7f58a7f3f タグと比較すると、@import コマンドは非常に遅いため、追加のリクエストの数が増加するだけでなく、予期しない問題が発生します。代替案には次のようなものがあります。
      • 複数の 2cdf5bf648cf2f33323966d7f58a7f3f 要素を使用する
      • Sass または Less のような CSS プリプロセッサを通じて複数の CSS ファイルを 1 つのファイルにコンパイルします
      • Rails、Jekyll、その他のシステムを通じて提供されるCSSファイルマージ機能
リーリー

CSS と JavaScript ファイルを紹介します
  • HTML5の仕様によれば、CSSとJSを導入する際、通常はtypeを指定する必要はありません。それぞれtext/cssとtext/javascriptがデフォルト値であるためです
リーリー

2. コメント

  • 7a8588c23088ed06bd93c0515736d916
    注: -- の後にスペースを残さないでください。スペースを残す場合は、他のすべてのコメントにスペースを追加してください (その後のプログラム開発を容易にするため)。コメントはグローバルに統一する必要があります

例:
99598100062d9a4d9a907784b46d2acc
72b7f80341f58a3fd41ecaec48315776
書き方の基準としては、コメントを減らすために必要なすべてのコメントに始まりと終わりを設けるのが最善です。その後のトラブルやミス。線を折り返さないでください。 CSS や JS のコメントも同様です。 7a8588c23088ed06bd93c0515736d916

16dc0b2f613c9236f6576f45a8b61404
121cdc96f166a5fbdf255a86e1519b50
は、必要なすべてのコメントに始まりと終わりがあることが最善です。その後のトラブルやミスを軽減します。線を折り返さないでください。 CSS や JS のコメントも同様です。 7547317c45e4590ca27da0d99421ac3a

3. 命名規則

  • クラスには「-」を使用し、ID には「_」を使用します。
    • コンテンツに基づいてセマンティックコーディングを作成: プロジェクト名の略語、つまりセマンティック名から始めることができます
例: class="tb-head";

4. 属性の並べ替え

(バックグラウンドプログラマーがコードを整理するのに便利)

    1. 属性定義に従って並べ替えます: クラス、ID、名前の並べ替え (この方法が推奨されます)
  • (クラスは再利用性の高いコンポーネントを識別するために使用されるため、最初にランクされます。ID は特定のコンポーネントを識別するために使用されるため、注意して使用してください) 2番目にランクされます)

      class [必須] クラスはダッシュ ' - ' で区別されます
      • id、name [必須] IDはアンダースコア「_」で区別されます
      • データ-*
      • src、for、type、href
      • タイトル、代替
      • aria-*、役
例:

リーリー
    2. 特殊な属性を要素ごとにソートし、(1)の方法に従ってソートすることができます
例:

リーリー
  • 3. アルファベット順に並べ替えます

    例:

リーリー
    ご理解の上ご注文ください。
5.タグの量を減らす

リーリー
6.ブール属性

    ブール型プロパティは、値を割り当てずに宣言できます。 XHTML 仕様では値を割り当てる必要がありますが、HTML5 仕様では必要ありません。言い換えれば、割り当ては必要ありません。
リーリー

2.CSS仕様

1. 文法

1.1、インデント
リーリー

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

 

 

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML テキストの書式設定の例次の記事：HTML テキストの書式設定の例

関連記事

続きを見る