ワン❀リード

前半年前のように、私は、フロントエンドのJavaScript開発グループの規範と少なく、CSSスタイル開発仕様の定義を仕上げを担当していました。常に2つの仕様に記事を整理したかったのですが、JavaScript仕様を終えた後、私はスタイル指定用の状態に置かれているは、JavaScriptの基本を学んで多くの時間を費やしました。先週までは、私は、JavaScriptの標準にコメントを受け取ったので、休日にもかなり良いです前に復習として再びそれを整理するために時間がかかり、遅延することはできませんスタイル指定を思い出しました。

彼は以前、この記事では当たり前のようにあまり用とCSSの文言も提言のいくつかを与えるものの、本明細書を読む前に、読者は以下の基本的な使い方を習得し、仕様のため、ここだけだけ、自分のために、すべての後に、助言を与えることが推奨されましたそれは、この記事の最良の始まりです。

II❀命名規則

II❀一つのクラス、id名

ここでは、私たちはお勧め、JavaScript変数小さなこぶを使用することをお勧めしますが、スタイルは変更にちなんで命名された - 区切りステッチを。

/* good */
#foo-bar;.foo-bar

/* bad */
#fooBar;.fooBar

II❀IIという名前の少ない変数

我々は、マルチワード変数名に対して、多重化のために提供以下の変数スタイルは@で始まり、推奨される知っている - という名前の区切りステッチ。

/* good */
@border-color:#fff;

/* bad */
@borderColor: #fff;

II❀3以下という名前の関数

パラメータが短い小文字を使用することが推奨されて複数の単語、単語の最初の文字である場合;.ラインという名前のスプライシングを分割し、複数 - 変数に加えて、以下も勧告の機能で始まる、スタイルクラスの機能を多重化、マルチ属性クラスを提供しますパラメータ間のセミコロン;単離されました。（多くの機能が）

/* good */
.foo-bar (@bg: #f5f5f5;@color: #900; @fz: 12px) {
    background: @bg;
    color: @color;
    font-size: @fz;
}

/* bad */
.foo-bar (@background: #f5f5f5, @color: #900, @font-size: 12px) {
    background: @background;
    color: @color;
    font-size: @font-size;
}

II❀店少ない名前空間

除行スプライシング統一 - 名前空間が少なく、実際に、それは初めに推奨スペース番号にちなんで名づけられ、変数の一部とハイブリッドモジュールのパッケージングです。

/* good */
#foo-bar {
    .border-radius() {
        font-size: 12px;
    };
    .border-color() {
        color: #fff;
    }
}

トリプル❀少ないファイルの紹介

一つの大きな利点は、より少ない他で導入することができるストアファイルへの変数として純粋にファイルの以下のサポートで、あまり直接公式サイトここ使い方に取り付けられた第1の使用の導入は、言いました：

可能同時にindex.less持つファイルindex.css、ファイル自体は文書のみで参照する必要があり、出力をコンパイルする必要なく、基準として使用されている場合、インポート外部ドキュメント@サフィックスファイルを区別容易にするために、ファイル、同じ名前が異なる、組み込まれたサフィックスは、__ __お勧めしません省略しました参照フィールドを追加します。

/* good */
@import 'demo.css'; //引入demo.css
@import (reference) 'demo.less';//引入demo.less,只作引用，不输出demo的内容

/* bad */
@import 'demo.css'; //引入demo.css
@import 'demo';     //引入demo.less，并输出

気まぐれ❀CSS、以下省略

1つの属性値ストア❀省略表現

パディングについて、マージン：

/* good */
margin: 1px 2px;
padding: 2px;

/* bad */
margin: 1px 2px 1px 2px;
padding: 2px 2px 2px 2px;

単位値を省略単位、ゼロの場合、小数点存在する場合、0の略語が使用されている勧告を削除します。

/* good */
transition-duration: .5s;
margin-top: 0;

/* bad */
transition-duration: 0.5s;
margin-top: 0px;

進数のカラー値は、あなたがRGBの透明性を使用する必要がある場合はもちろん、あなたが使用することができ、むしろRGB表現よりも、柔軟な言葉遣いをお勧めします：

/* good */
border-color: #f00;
color: #fefefe;

/* bad */
border-color: red;
color: rgb(254, 254, 254);

IIストア❀非推奨要素セレクタ+クラス/ IDの組み合わせ

パフォーマンス上の理由のために、要素セレクタとクラスまたはIDセレクタオーバーレイを使用しないように、そのようなアプローチおよび別のスタイルのHTMLのルールに反して、対応するHTMLタグが変更CSS要素選択を変更した場合、第二には、セレクタため右から、もともとあなたは要素のセレクターを追加した場合、終了する必要がありますクラスまたはIDをターゲットに、左へのマッチングルールは、すべての要素、巨大なパフォーマンスを一致させる必要がありcss'll、それが強く推奨されていません。

/* good */
.foo-bar

/* bad */
div.foo-bar

❀店のスタイル3つの多重化

セレクタは、共通の複数の属性を有する場合、カンマで区切られたセレクタ、各セレクタ別々の行を多重化推奨。環境が小さい場合、推奨変数、混合およびその他の慣行もあります。

/* good */
h1,
h2,
h3{
    color: #fff;
}

/* bad */
h1,h2,h3{
    color: #fff;
}

使用ストアストア少ない❀親セレクタ＆

疑似親クラスの属性セレクタは、いくつかの例を見て、伝統的な書かれた書面の代わりにお勧めします。

などホバー、などの一般的な疑似クラス、

/* good */
a {
    color: #fff;
    &:hover {
        color: #ddd;
    }
}

/* bad */
a {
    color: #fff;
}
a:hover {
    color: #ddd;
}

clearfixハック例：

/* good */
.demo {
    font-size: 12px;
    &:after {
        display: block;
        content: '';
        clear: both;
    }
}

/* bad */
.demo {
    font-size: 12px;
}
.demo:after {
    display: block;
    content: '';
    clear: both;
}

呉❀コード組織構造

呉❀一つは、レイアウトスタイルのコードにブロック単位に分割しました

文章のスタイル、ページレイアウト、およびスタイルのレイアウトを書く分割ブロック単位を喜ばせるために前に、任意に定義された断片化ではありません。上から下書き込みすることを推奨コードブロック、左から右への書き込み順序は、パターンが先に定義されたスタイルの基礎となる上位層の場合には、何の早い子スタイル定義の親よりも存在してはなりません。

たとえば、ページが頭部、胴体と尾に分割され、その後、尾の様式初期のスタイル定義に向かう、左、右、右のボックススタイルの2つのボックスには、以前のボックスの左側を超えることができませんにもう一つの例は、本体の内部なので、コードをより読書習慣のレイアウトに沿ったものであること。

/* good */
.parent {}
.child {}
.top {}
.bottom {}

/* bad */
.child {}
.parent {}
.bottom {}
.top {}

呉❀II以下の変数は、使用後に関数を定義してください

変数、ファイルなければならない最初の宣言/再利用の参照、および第二に、ファイル参照コードは、ファイルヘッダ内に配置されるべきです。

/* good */
@import 'demo.less';
@color: #fff;
.page {
    color:@color;
}

/* bad */
@import 'demo.less';
.page {
    color:@color;
}
@color: #fff;

呉❀ネストされた3つのスタイルのルール

あまり推奨文言のネストとネストが3層以上を推奨されていません。

/* good */
.parent {
    color: #fff;
    .child{
        font-size: 12px;
    }
}

/* bad */
.parent {
    color: #fff;
}
.parent .child {
    font-size: 12px;
}

呂❀コメント要件

チャンク内のページの全体的なレイアウトのために、次のようなスタイル定義の前に注釈を追加することをお勧めします：

/* good */
/* 头部样式定义 */
.header {}

/* 产品推荐样式定义 */
.mayLike {}

SEVEN❀のmixin混合要件

混合属性クラス自体は、出力属性クラスの必須の括弧をコンパイルする必要がない場合、機能と混合しました（）。

/* good */
.border-color() {
    color: #fff;
}
.demo {
    .border-color;
}

/* bad */
.border-color{
    color:#fff;
}
.demo{
    .border-color;
}

パラメータの関数、所望であれば、パラメータは、プロパティのすべての異なる値を参照し、分散パラメータの代わりに推奨@arguments文言です。

/* good */
.box-shadow(@x:0;@y:0;@blur:1;@color:#000){
    box-shadow:@arguments;
}

/* bad */
.box-shadow(@x:0; @y:0; @blur:1; @color:#fff){
    box-shadow:@x @y @blur @color;
}

Baが継承需要を拡張❀

混合属性クラス自体は出力をコンパイルする必要がある場合は、混合するのではなく、継承を使用することをお勧めします。

/* good */
.border-color{
    color: #fff;
}
.demo {
    &:extend(.border-color);
}
/* 编译后 */
.border-color,
.demo{
    color: #fff;
}

/* bad */
.border-color{
    color: #fff;
}
.demo {
    .border-color;
}
/* 编译后 */
.border-color{
    color: #fff;
}
.demo {
    color: #fff;
}

ナイン❀パフォーマンス最適化（サプリメント）

表示プロパティは、ページのレンダリング、の使用の合理化に影響を与えます
- 表示：幅は、インライン、高さ、マージン、パディングとフロートの後に使用すべきではありません。
- 表示：もはやインラインブロックの後にfloatを使うべきではありません。
- 表示：もはや垂直整列ブロックを使用する必要があります。
- 表示：卓上はマージンやフロートの後に使用してはなりません*。
フロート計算集約をレンダリングする際、虐待をフロートしません。コンテキストは、フレックス推奨レイアウトすることができます。
アニメーションの最適化
- 使用して、より良いFPSを取得する絶対位置を交換するために翻訳し、アニメーションがよりスムーズになります。
- 同様のjQueryのアニメーション（）避けるために - スタイルの変更スタイルをCSS宣言を使用して、すべてのフレームアニメーションは、より良いブラウザの最適化となります。
- あなたはrequestAnimationFrameのを利用するためには、JavaScriptベースのアニメーションを使用している場合。setTimeoutメソッド、のsetIntervalを使用しないでください。（私はピットを残すために、単独のCSSアニメーションについて説明します）
パフォーマンスを向上するためにCSSセレクタ、キーセレクタの使用の合理化
- 特記事項、メカニズムは右から左に一致する一致するCSSセレクタ、長い他のセレクタの左側に、現在選択された文字のように、スタイル、システムは、それが一致するルールとセレクターを見つけるまで、左に移動し続ける、または不一致理由ます終了します。私たちは、右端の選択キーセレクタと呼ばれるようにします。
- ユニバーサルセレクタを使用しないでください .content * {color: red;}
- 制限IDタグセレクタの使用を避けます button#backButton {…}
- クラスセレクタを制限回避のラベル treecell.indented {…}
- 多層タグセレクタを使用しないでください、クラスセレクタの使用を置き換える、CSSの発見を減らします。
- 子孫セレクタを使用しないでください、可能な限り階層を明記してください。
逆流を減らす（並び替え）
- あなたは素子の変位を制御したい場合は、ドキュメントフローの最初のアウトをお勧めします。
- ほとんど変化、フォントサイズ、およびフォントファミリとして、
- マージン要素の内側と外側の少しの変化
- 還流なるがFlexとフロートを用いたインラインブロック、が、より良好な屈曲特性を置換します。

❀全体的なピック

そこでここでは、完成したプレゼンテーションのCSS、以下の仕様上、スタイルはシンプルですが、適切な計画によって、コードを読み取るために、ポスト保守コードや同僚でいるかどうか、予想外の利便性をもたらすでしょう。

たった3つの家が書いたがまだある、8つのブログの最小値を書くために良い月と言います。これは、1月20日の夜12時18分で、私は休日のため家に行くんだ、今日完成し、それを持っていた、2020年です！！！！私は、良い夜、明日家に行くために切符をつかむませんでした...か牛がそれを手配見つけることが、私は遅くまで起きています。

フロントエンドの開発、CSS、仕様の少ない準備