CSS ユニバーサル コーディング仕様_html/css_WEB-ITnose

CSS ユニバーサル コーディング標準

フロントエンド コーディング標準のいくつかを要約すると、そのほとんどは比較的一般的であり、主流の方法となるはずです。

1 はじめに

このドキュメントの目標は、CSS コードのスタイルをチーム全体で統一し、理解しやすく保守しやすくすることです。

このドキュメントは CSS 用に設計されていますが、さまざまな CSS プリコンパイラ (less、sass、stylus など) を使用する場合、該当する部分も可能な限りこのドキュメントの規約に従う必要があります。

2 (たとえば、.btn と .btn-blue)。

略語の過度の使用は避けてください。 .btn はボタンをうまく表現できますが、.t は要素を表すことができません。

クラスの名前は、できるだけ短く、できるだけ明確にする必要があります。

意味のある名前を使用します。抽象的な名前ではなく、構造化された名前または目標に関連した名前を使用します。

グローバルに名前を付ける場合は、「zk-wrap」などの特定のプレフィックスを追加する必要があります

ローカルに名前を付ける場合は、モジュールのコンテンツまたは最も近い親ノードに従ってプレフィックスを付けることができます

3 CSS インフラストラクチャ

エンコーディング形式: ファイルエンコーディング形式` UTF-8` エンコーディング、CSS ファイルの先頭位置でドキュメントエンコーディング文字セットを宣言します

  @charset "utf-8";<br /><br />

4 コーディングスタイル

インデント方法: インデントレベルとして 4 つのスペースを使用し、2 つのスペースまたはタブ文字は禁じられている。

スペース

セレクターと { の間にはスペースが必要です。

属性名と次の : の間にスペースは使用できません。また、 : と属性値の間にはスペースが必要です。

リストの属性値を 1 行で記述する場合は、その後にスペースを入力する必要があります。

Selector

必要に応じて、ID セレクターとクラス セレクターを制限するために型セレクターを追加しないでください。

セレクターのネストレベルは 3 レベル以下である必要があり、後ろの認定条件はできるだけ正確である必要があります

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

属性

属性定義は新しい行で開始する必要があります。

属性は定義後にセミコロンで終わる必要があります。

略語を使用できる場合は、属性の略語を使用するようにしてください。

属性プレフィックス、標準属性は末尾に配置され、エディターで読みやすく複数行編集できるようにコロンで揃えられます。

.box {-webkit-box-sizing: border-box;   -moz-box-sizing: border-box;        box-sizing: border-box;}

属性の書き込み順序: 位置 > ボックスモデル > 外観 > その他の印刷タイプ設定

// 包括 float、display、overflow……position: absolute;top: 50px;left: 0;overflow-x: hidden;

フロートをクリアする

float をクリアし、擬似クラスに clear を設定して clearfix を実行します。空のタグを追加しないようにしてください。 [参照]

border: 1px solid #000margin: 20px;padding: 15px;width: 240px;height: 160px;  

Color

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

カラー値を省略できる場合は、border-color: #ccc;

という短縮形を使用する必要があります。

color:red などの英語をカラー値の名前に使用しないでください

すべて小文字を使用することをお勧めしますカラー値の文字

数値

値が0の場合、単位は省略可能、padding: 0; margin: 0;

値が0〜1の間の10進数の場合、 opacity: .8;

z -index では、通常、将来の追加や変更を容易にするために、ステップ (50、60、70 など) として 5 または 10 を使用します

! important' 試してみてください。 ! important ステートメントは使用しないでください。

Font

font-family 属性内のフォント ファミリ名には、フォントの英語のファミリー名を使用する必要があります。スペースがある場合は、引用符で囲む必要があります。

いわゆる英語のファミリーネームは、フォントファイルのメタデータです:

字体 操作系统 Family Name

宋体 (中易宋体)	Windows	SimSun
黑体 (中易黑体)	Windows	SimHei
微软雅黑	Windows	Microsoft YaHei
微软正黑	Windows	Microsoft JhengHei
华文黑体	Mac/iOS	STHeiti
冬青黑体	Mac/iOS	Hiragino Sans GB
文泉驿正黑	Linux	WenQuanYi Zen Hei
文泉驿微米黑	Linux	WenQuanYi Micro Hei

//css用法h1 {    font-family: "Microsoft YaHei";}

字号

需要在 Windows 平台显示的中文内容，其字号应不小于 12px。

字重

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold

行高

line-height 默认全局定义为 1.5 比较舒适，可根据实际情况调整

Hack 针对某个浏览器写的样式或某个浏览器BUG的样式，必须加上注释说明

// css.clearfix{    zoom:1; /* for IE6 IE7 */}