CSSコーディング仕様書_html/css_WEB-ITnose

* 規則: 以下のコード例で使用される単位はすべて rem です。 rem 単位の使用については、「モバイル Web アプリのアダプティブ レイアウトの探索と概要」を参照してください。

1 命名

1.1 ファイルの命名

一般的に使用されるファイル命名:

• グローバル: global.css

• 構造:layout.css

• モジュール: module.css

• テーマ: teemes.css

長いファイル 最初名前は - Zhongheng で終わる必要があります。 ダッシュ文字の接続は、プロジェクト内のプライベート スタイル ファイルです: プロジェクト名-ビジネス モジュール名.css。

例:

/* 项目名为clout *//* good */clout-home.css/* bad */cloutHome.css;

1.2 セレクターの命名

(重要) IDセレクターが必要ない場合は、可能な限りIDセレクターを使用してください。

• セレクター名はすべて小文字である必要があり、大文字は使用できません。

• 長いセレクター名を接続するには、中央のクロスバーを使用します。

• 名前の競合が発生する可能性が高いと判断された場合、名前は次の規則に従う必要があります: 複数レベルのセレクターがある場合 (3 レベル以上を避ける必要があります)。各レベルの使用 - 中央のクロスバー接続。ネストを直接使用することはお勧めしません。 ~ t)

ページテーマ: body (bd)/main

Tail: footer (ft)

• Navigation: nav

• Subnav: subnav

• T ab:タブ

• サイドバー:sidebar

• column:column/col

• ペリフェラルコントロールレイアウト:ラッパー

• 左中央右

• メニュー:メニュー

• サブメニュー:メニュー

• リスト: リスト

• 現在: アクティブ

• アイコン: icon

• プロンプトメッセージ: msg

• ヒント: ヒント

• 2 コードスタイル

2.1歯列

• (重要)
スペースを 4 つ使用してください一律のインデントの場合、タブとスペース2文字は使用できません（指定前のインデント方法は無視されます）。
• sublime-＆gt;
  例:

/* 选择器名称 *//* good */.mydialog {    font-size: .28rem;} /* bad */.myDialog {    font-size: .28rem;}/* 模块及嵌套 *//* good */<div class="mydialog">    <div class="mydialog-hd">        <p class="mydialog-hd-title">标题</p>    </div></div>.mydialog-hd-title {    color: #3f3f3f;}/* bad */<div class="mydialog">    <div class="hd">        <p class="title">标题</p>    </div></div>.mydialog .hd .title {    color: #3f3f3f;}

• (重要)

  属性と : の間にスペースを入れることはできません。また、: と属性値の間にはスペースを入れる必要があります。
• 例:

  rrree

(重要)

>, +, ~ セレクターの両側にはスペースを残します。

例:

rrree

2.3 改行

(重要)

ルール内に複数のセレクターがある場合、セレクター間で改行する必要があります。

• 例:

  rrree

(重要)
• 属性値の間には改行が必要です。
  例:

/* good */.selector {}/* bad */ .selector{}

(推奨)

非常に長いスタイル属性値の場合は、行をスペースまたは , で折り返すことができます。

例: rrree

2.4 行の長さ

(重要) 1 行が分割できない (たとえば、URL が長すぎる) 場合を除き、各行は 120 文字を超えてはなりません。

3 値と単位

3.1 テキスト

(重要)

テキストの内容は二重引用符で囲む必要があります。

例:

rrree

3.2 値

(重要)

値は、整数部の 0 を省略した 0 ～ 1 の 10 進数です。

例:

rrree 3.3 単位

(重要)

値が 0 の属性値では単位を省略する必要があります。

例:

/* good */.selector {    color: #3f3f3f;}/* bad */.selector {    color:#3f3f3f; /* 或 color : #3f3f3f; */}

3.4 url​​()

(重要)

url() 関数内のパスは引用符で囲まれません

例:

/* good */.header > .title {    padding: .1rem;}label + input {    margin-left: .04rem;}input:checked ~ .input-face {    background-color: #ccc;}/* bad */.header>.title {    padding: .1rem;}......

(推奨)

url() 関数内の絶対パス省略可能 プロトコル名に移動

例:

/* good */p,div,input,textarea {    font-size: .28rem;}/* bad */p, div, input, textarea {    font-size: .28rem;}

3.5 Color

(重要)

RGB カラー値は 16 進形式 #3f3f3f を使用する必要があります。 rgb() は許可されません。

説明:

アルファ(不透明度)を含む色情報はrgba()を使用できます。 rgba() を使用する場合は、各カンマの後にスペースを残す必要があります。

例:

/* good */.content {    padding: .1rem;    color: #3f3f3f;}/* bad */.content {    padding: .1rem; color: #3f3f3f;}

(重要)

色の値を省略できる場合は、省略形を使用する必要があります。

例:

.selector {    bakcground:         url(veryveryveryveryveryLongUrlHere/image/icon.png)         no-repeat 0 0;}.selector {    background-image: -webkit-gradient(        linear,        left bottom,        left top,        color-stop(0.04, rgb(88,94,124)),        color-stop(0.52, rgb(115,123,162))    )}

(重要)

色の値に色の単語を使用することはできません。

例:

/* good */body {    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}/* bad */body {    font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;}

(推奨)

カラー値に大文字を使用する場合は、同じプロジェクト内で一貫性を持たせる必要があります。

例:

/* good */body {    font-size: .28rem;}/* bad */ {    font-size: 0.28rem;}

4 一般

4.1 セレクター

(重要)

DOM ノード ID とクラス属性に値を割り当てる場合、= の間にスペースを入れてはならず、属性値を二重引用符で囲む必要があります、一重引用符ではありません。

例:

/* good */<div class="container" id="container"></div>/* bad */<div class = "container" id='container'></div>

（重要）如无必要，尽量不使用 id 选择器，给 id、class 选择器设置属性时不需要添加类型选择器进行限定。

例：

/* good */#footer,.container {    background-color: #fff;}/* bad */div#footer,div.container {    background-color: #fff;}

（重要） id 选择器不需嵌套其他选择器。

例：

/* good */<div class="footer">    <span id="tips">提示语</span></div>#tips {    color: #bdbdbd;}/* bad */.footer #tips {    color: #bdbdbd;}

4.2 属性缩写

（建议）在可以使用缩写的情况下，尽量使用属性缩写。

例：

/* good */body {    font: .28rem/1.25 Helvetica;}/* bad */body {    font-family: Helvetica;    font-size: .28rem;    line-height: 1.25;}

（建议）使用 border、margin、padding 等缩写时，应注意确实需要设置多个方向的值时才使用缩写，避免其他方向的有用值被覆盖掉

例：

<div class="wrap list-wrap"></div>.wrap {    padding: .1rem;    border: 1px solid #dce1e8;}/* good */.list-wrap {    padding-left: .2rem;    padding-right: .2rem;    border-color: #ccc;}/* bad */.list-wrap {    padding: .2rem .1rem;    border: 1px solid #ccc;}

4.3 属性书写顺序

（建议）按如下顺序书写，摘自http://www.zhihu.com/question/19586885/answer/48933504

位置属性(position, top, right, z-index,display, float, overflow 等)

大小(width, height, padding, margin, border)　　

文字系列(font, line-height, letter-spacing,color- text-align等)

视觉(background, color, list-style等)　　

其他(animation, transition等)

例：

.footer-fixed {    position: fixed;    bottom: 0;    left: 0;    overflow: hidden;        width: 100%;    height: .5rem;    padding: .1rem;    border: 1px solid #dce1e8;    box-sizing: border-box;        font-size: .28rem;    line-height: 1.25;        background: #e9ecf1;    color: #3f3f3f;        -webkit-transition: color .5s;       -moz-transition: color .5s;            transition: color .5s;}

4.4 变换与动画

（重要） 使用 transition 时应指定 transiton-property，不用 all。

例：

/* good */.tab {    transition: color 1s, background-color: 1s;}/* bad */.tab {    transition: all 1s;}

4.5 属性前缀

（建议）属性的私有前缀按长到短排列，按 : 对其

例：

/* good */.tab {    -webkit-transition: color .5s;       -moz-transition: color .5s;            transition: color .5s;}/* bad */.tab {    -webkit-transition: color .5s;    -moz-transition: color .5s;    transition: color .5s;}