フロントエンドエンジニアリングコード仕様(三)——CSS,SCSS

インデントとセミコロン

はsofttab(4つのスペース)を使用します.

各属性宣言の末尾にセミコロンを付けます.

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

スペース
1.スペースが不要な場合:

属性名後

複数の規則の区切り記号','前の

!important '!'後

行末に余分なスペースがないでください

/* not good */
.element {
    color :red! important;
}

/* good */
.element {
    color: red !important;
}

/* not good */
.element ,
.dialog{
    ...
}

/* good */
.element,
.dialog {
    ...
}

2.スペースが必要な場合

属性値前

セレクタ'>','+','~'前後

'{'前

!important '!'前

@else前後

属性値の','後

注記'/'後および'/'前

空行

ファイルは、最後に空の行

を保持する.

'}'の後、scssにネストされたルール

を含む空行を付けることが望ましい.

属性の間には、適切な空白行

が必要である.

/* not good */
.element {
    ...
}
.dialog {
    color: red;
    &:after {
        ...
    }
}

/* good */
.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

折り返し

'{'後と'}'前に改行する必要がある

各属性排他行

複数の規則の区切り記号','後

/* not good */
.element
{color: red; background-color: black;}

/* good */
.element {
    color: red;
    background-color: black;
}

/* not good */
.element, .dialog {
    ...
}

/* good */
.element,
.dialog {
    ...
}

コメント

統一用'/**/'(scssでも'/'は使用しない).

インデントは次の行のコードと一致している.

コメントが必要なコードの上に書いてあり、コードの後ろについてはいけません.

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;
}

引用符

urlの内容は引用符で囲みます.

プロパティセレクタのプロパティ値には引用符が必要です.

.element:after {
    content: "";
    background-image: url("logo.png");
}

input[type="checkbox"] {
    ...
}

名前を付ける

クラス名は小文字で区切られています.

idはアルパカ式の命名を採用している.

scssの変数、関数、混合、placeholderはアルパカ式で命名されています.

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/*    */
$colorBlack: #000;

/*    */
@function pxToRem($px) {
    ...
}

/*    */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

色
色は16進数で、小文字で表し、できるだけ簡潔に書きます.

/* not good */
.element {
    color: #ABCDEF;
    background-color: #001122;
}

/* good */
.element {
    color: #abcdef;
    background-color: #012;
}

メディアクエリ
メディアクエリーのルールをできるだけ関連するルールに近づけます.独立したスタイルのファイルに一緒に入れたり、ドキュメントの一番下に置いたりしないでください.そうすると、後で忘れやすくなります.

.element {
    ...
}

@media (min-width: 480px) {
    .element {
        ...
    }
}

SCSS関連
1.コミットされたコードに@debugがないこと.2.宣言順序:

@extend

は、@contentの@include

を含む.

は、@contentを含む@include

である.

自己属性

ネスト規則

3.@importで導入されたファイルには先頭の''は必要ありません.とエンディングの'.scss';4.ネストは最大5層を超えてはならない.5.@extendにplaceholderセレクタを使用する.6.不要な親参照記号&を削除します.

/* not good */
@import "_dialog.scss";

/* good */
@import "dialog";

/* not good */
.fatal {
    @extend .error;
}

/* good */
.fatal {
    @extend %error;
}

/* not good */
.element {
    & > .dialog {
        ...
    }
}

/* good */
.element {
    > .dialog {
        ...
    }
}

いくつかの小さなアドバイス

空きルールは許可されていません.

要素セレクタは小文字を使用します.

小数点の前の0を取り除きます.

数字の不要な小数点と末尾の0を取り除く.

属性値'0'の後に単位を付けないでください.

同じ属性の異なる接頭辞の書き方は垂直方向に位置合わせを保つ必要がある.

接頭辞のない標準属性は、接頭辞のある属性の後ろに書くべきである.

同じ規則に重複する属性が現れないでください.重複する属性が連続していれば大丈夫です.

同じルールを1つのファイルに2つ表示しないでください.

用border:0;borderの代わりに:none;;

セレクタは4層を超えないでください(scssでは4層を超える場合はネストされた方法で書くことを考慮すべきです).

で発行されたコードに@importはありません.

できるだけ'*'セレクタを使わないでください.

/* not good */
.element {
}

/* not good */
LI {
    ...
}

/* good */
li {
    ...
}

/* not good */
.element {
    color: rgba(0, 0, 0, 0.5);
}

/* good */
.element {
    color: rgba(0, 0, 0, .5);
}

/* not good */
.element {
    width: 50.0px;
}

/* good */
.element {
    width: 50px;
}

/* not good */
.element {
    width: 0px;
}

/* good */
.element {
    width: 0;
}

/* not good */
.element {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;

    background: linear-gradient(to bottom, #fff 0, #eee 100%);
    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background: -moz-linear-gradient(top, #fff 0, #eee 100%);
}

/* good */
.element {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;

    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
    background:         linear-gradient(to bottom, #fff 0, #eee 100%);
}

/* not good */
.element {
    color: rgb(0, 0, 0);
    width: 50px;
    color: rgba(0, 0, 0, .5);
}

/* good */
.element {
    color: rgb(0, 0, 0);
    color: rgba(0, 0, 0, .5);
}

目次索引
フロントエンドエンジニアリングコード仕様(一)——命名規則とエンジニアリング約定フロントエンドエンジニアリングコード仕様(二)——HTMLフロントエンドエンジニアリングコード仕様(四)——JS