CSS仕様のWEBフロントエンド

CSSは、問題を起こしやすいカバーするプロジェクトの複雑さが増すだけでなく、他のスタイルで、HTML要素を表示する方法を定義しますが、CSSがグローバル生まれ、カスケーディングスタイルシート（カスケードスタイルシート）を参照します。

1.一般仕様

ファイルのエンコーディング

文字化けした内容を回避するために、統一された使用UTF-8保存されてコーディングを。
スタイルファイルの最初の行はUTF-8に文字セットを設定し、

@charset 'UTF-8'; /* 注意字符集说明应在第一行 */

インデント仕様

統一された使用两个空格缩进

2.初期化仕様

各ブラウザは、HTMLテキストをレンダリングする最初のスタイルが異なるブラウザの違いをなくすために、異なるベンダー我々は次のように注意を払う必要があるとき、私たちはしばしば、これらのスタイルの導入のため、などnormalize.css、reset.css、などいくつかの初期のスタイルを、ご紹介いくつかの状況：

構築するためにゼロからUIフレームワークを使用しないでください
、それは開発の途中で導入していない、プロジェクトの開始当初に導入したとき、競合予測不可能なスタイルを避けるために、スタイルの初期化に、ゼロから構築されたケースを。
UIフレームワークを使用しますが、プラグインの一部ではいけない
のプラグイン、多くの場合、リッチテキストプラグイン、スタイルの混乱の開発に道をリードして初期化パターンの使用など、独自のユニークなスタイルが付属しています、大規模な範囲を初期化するだけでは推奨されない简单进行初始化ことができます。

* {
  padding: 0;
  margin: 0;
}

UIフレームワークが使用されてきた
時間を使用する必要性を明確に認識してUIフレームワークで不使用第三方初始化样式UIフレームワークは、一般的に初期化してくるので、中またはプロジェクトの開始前に行われるかどうか、追加の導入が、元の効果に影響を与えます。

3.コードの仕様

命名規則

フォーム何という名前のないクラス名、機能やコンテンツべきで
下線付きを使用している場合、クラスIDと小文字の単語、複数の単語を-分離
なしスタイル情報クラスの作成なかっ回避しながら、Javascriptのフックとして一意のIDを使用して
Webフロントエンドを開発リソースQqun：767273102、無料の開発ツールがあり、ゼロベース、高度なビデオチュートリアルでは、私は初心者回り道を願っています

コードスタイル

統一された使用は展开格式、コンパクトなフォーマットを推奨されていません

/* 展开格式 */
.test {
  color: red;
  font-size: 12px;
}

/* 紧凑格式 */
.test {
  color: red;
  font-size: 12px;
}

統一された两个空格インデント
エンド・プロパティの宣言は、セミコロンを追加します

セレクタと左ブラケットスペース、コロンのプロパティの後のスペースの間

/* 推荐 */
.test {
  color: red;
  font-size: 12px;
}

/* 不推荐 */
.test {
  color: red;
  font-size: 12px;
}

0単位を指定しないでください
色は16進数の値を値と属性値が短縮の可能な限り省略することができ
```
/* 推荐 */
.test {
  color: #fff;
}
```
```
/* 不推荐 */
.test {
  color: #ffffff;
}
```
引用符を使用します

URL（）、セレクタ属性は、使用する属性値单引号。
クリアフロート

要素は、明確なclearfix擬似クラスを設定することにより、インナーフロート含むの高さを保持するか、BFCモードをトリガする必要がある場合。空のラベルの使用を増加させないようにしてください。

BFCは、多くの方法をトリガし、一般的なのは、次のとおりです。
- 非どれも浮いていません
- 位置非静的
- 可視非オーバーフロー

フォントの仕様

外国商用サイトでは、使用しないfont-faceの導入微软雅黑（画像コンテンツを含む）の侵害を避けるため、フォントを
中国では、Windowsプラットフォームの内容を表示する必要があり、その大きさがより小さくすべきではありません 12px

网站上使用 微软雅黑 字体有三种形式：

1、【侵权】图片中使用 微软雅黑 字体，比如网站头图
2、【安全】网站 CSS 用 font-family 声明网站使用 微软雅黑 字体，比如文章标题和正文
3、【侵权】网站通过 font-face 引用 微软雅黑 ，这种方式不常见

仕様を選択

厳密に従ってBEM（ブロック要素修飾子）、唯一のクラスセレクタを使用することをお勧めしますが、BEMトラブル書いて、以下のことをお勧めします

ユニバーサルセレクタを無効にします*
具体的な定義はセマンティックタグセレクタを使用していないなし

属性の順序

CSS CSSプロパティの順序の良いコーディングスタイルの一部であり、コードの問題を見つけるのは簡単、コードの可読性を向上させることができますそれはチームワークを助長しているが、プロジェクト内のプロパティを記述するために考えられ、一部の学生は、属性の順序を書くことで、よりカジュアルされていることがわかりましたA。

次の順序で書くことをお勧めします

位置決め特性（位置、表示、フロート、左、右）
サイズ属性（幅、高さ、パディング、マージン、ボーダー）
フォント特性（色、フォント、テキストアライン）
その他の属性（背景、カーソル、アウトライン）

目的は、徐々にターゲット要素の影響を消去するために、コードを閲覧することです。

.test {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  font-size: 12px;
  color: #333;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路

4.ノート仕様

単一行コメント

注/*に始める*/終わり、コメントはコメントのコンテンツ内にネストすることはできません前后空一个空格。

/* 推荐的单行注释 */

/*不推荐的单行注释*/

注：また、SASSと少ない前処理言語ダブルスラッシュコメントを使用できますが、CSSファイルには表示されませんコメントをコンパイルした後、統一使用することをお勧めし/* */コメントを。

モジュールの備考

時々、我々はモジュール（コードのブロック）機能説明および所望の他のコードから明確に区別できる必要がある、我々はモジュールを注意することができます。

注/*を開始し*/終了前后空一个空格埋める最初の行を描述行ことにより、最後の行に記入し、分割线。

/* 推荐的模块注释
---------------------------------------------------- */

/* 不推荐的模块注释 ---------------------------------------------------- */

`*` ファイル情報メモ

あなたは、人々はすぐにファイルの役割を理解するための機能説明のために提出する必要がある場合は、それが推奨されます（文字セットの説明）ファイルように、ファイルの説明、作成者、作成日時などが含まれ、以下のコメントの最初に書かれています。

@charset "UTF-8";
/**
 * @desc 文件功能描述，方便其他人快速理解
 * @author 创建人
 * @date 创建时间
 */

仕様カバー

少用必須
CSS /以下/ SASSを使用してVUE単一の統合ファイルコンポーネント scoped
各ページ/コンポーネントが持っている必要があり全局唯一、それはユニークな識別に追加する必要があります下に属しているロゴID /クラス、スタイルを
世界的に避け、既存のスタイルを変更するには、（重量）ページに固有でなければなりません
一致ディセーブル*（例えば、初期化などの特殊な状況を除いて）セレクタ

VUE単一ファイルアセンブリが有効になりませんスタイルを変更するために使用することができます/deep/か>>>

6.メディアお問い合わせ先

内部管理システム、マルチユースのThinkPadビジネスノートブック、画面の解像度のため1366*768。推奨Resolution Testブラウザは、デバッグウィンドウのサイズを拡大してナビゲートします。

ダウンロード：www.cnplugins.com/devtool/res ...

次のように一般的な寸法は、

サイズ	説明
≥1366px	大画面の大きなデスクトップモニタ
≥1200px	ミディアム画面デスクトップモニタ
≥992px	ミディアム画面デスクトップモニタ
≥768px	小さな画面のタブレット
<768px	超小型の携帯電話の画面

優先エンドPC

携帯端末のサイズが次第に狭いレイアウトとなる最大サイズに応じてデフォルトのレイアウト、

body {
  background: gray;
}
@media screen and (max-width: 1366px) {
  body {
    background: red;
  }
}
@media screen and (max-width: 1200px) {
  body {
    background: yellow;
  }
}
@media screen and (max-width: 920px) {
  body {
    background: green;
  }
}
@media screen and (max-width: 768px) {
  body {
    background: black;
  }
}

優先順位の携帯端末

サイズは徐々にPCのレイアウトに拡大されている最小サイズに応じてデフォルトのレイアウト、

body {
  background: gray;
}
@media (min-width: 768px) {
  body {
    background: red;
  }
}
@media (min-width: 920px) {
  body {
    background: green;
  }
}
@media (min-width: 1200px) {
  body {
    background: yellow;
  }
}
@media (min-width: 1366px) {
  body {
    background: red;
  }
}

あなたは、印刷スタイルの適応を行う必要がある場合は、@media印刷を使用

@media print {
  body {
    background: #fff;
  }
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路

7.ユニット仕様

CSSは、それぞれ、二つのユニットを持っている、绝对单位と相对单位。

共通絶対単位
- PX：画素（コンピュータ画面上の点）
- CM：CM
- 中：インチ
- PT：ポンド（インチの1/72に等しい1 PT）
一般的な相対単位
- ％：親要素の割合
- VW：ビューポートの幅の割合
- VH：ビューポートの高さの割合
- 全角：現在のフォントの倍数
- REM：複数のフォントのルート要素
- * RPX：マイクロチャンネル専用の小さなプログラム、画面750rpxの所定幅

以上のユニットのピクセル、％、REMを使用して3です建议 PC 端用 px 单位、移动端用 rem，需要具体控制尺寸还是使用 px

注：異なる単位の値を計算する必要がある場合は、この方法は、CalcのCSS3を使用することができます（）_

8.互換性仕様

私有財産の使用

これは、効果の接頭辞を取るために、いくつかのスタイルを追加する必要があり、一般的なブラウザカーネルと次の接頭辞で、その結果、理由は異なるブラウザベンダーであります

ブラウザ	カーネル	接頭辞
Firefoxの	ヤモリ	-moz-
クロム	WebKitの	-webkit-
IE	トライデント	-ミズ-
サファリ	WebKitの	-webkit-
オペラ	プレスト	-O-
よく知られているブラウザ	WebKitの	-webkit-
一般的な携帯電話のブラウザ	WebKitの	-webkit-

標準の接頭辞の後にフロントでCSS3ブラウザプライベート接頭辞、

.test {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

注：WebPACKの環境では、あなたは自動的にpostcssローダーを使用する接頭辞を追加することができます_プライベート