Webフロントエンド仕様ドキュメント-テンセントAlloyTeam

CSS
構文

は、4つのスペースのsoft tabsを使用します.これは、コードがさまざまな環境で一貫して表示されることを保証する唯一の方法です.

コンビネーションセレクタを使用する場合、独立したセレクタごとに1行を占有します.

コードの読みやすさのために、各宣言の左かっこの前にスペースを追加します.

は、ブロックの右かっこを別の行にすることを宣言します.

各宣言:後にスペースを挿入します.

各宣言は、エラー・レポートがより正確であることを保証するために1行のみを占有する必要があります.

すべての宣言はセミコロンで終わるべきです.最後の宣言後のセミコロンはオプションですが、彼がいなければコードが間違いやすくなります.

カンマで区切られた値は、カンマの後にスペースを追加する必要があります.例えばbox-shadow

色値rgb()rgba()hsl()hsla()およびrect()にスペースを追加しないでください.また、0.5の代わりに0.5を使用するなど、値を取る前に不要な0を持たないでください.This helps differentiate multiple color values (comma, no space) from multiple property values (comma with space).

のすべての16進数値には、#fffなどの小文字を使用する必要があります.小文字はより多様な形をしているので、ドキュメントを閲覧するときに簡単に区別することができます.

は、可能な限り短い16進数値を使用し、例えばffffffの代わりにfffを使用する.

セレクタのプロパティ値には、input[type="text"]などの引用符を付けます.彼らは場合によってはあってもなくてもよいので、引用符を使って一貫性を高めることができます.

は、margin:0を使用するなど、0の単位を指定しないでください.margin:0 pxではありません.ここで言及したルールに問題がありますか?WikipediaのCSS構文セクションを参照してください.

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
    padding: 15px;
    margin: 0px 0px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

宣言順序
関連する属性宣言は、次の順序でグループ化する必要があります.

Positioning

Boxモデル

Typographicレイアウト

Visual外観Positioningは、要素を通常のテキストストリームから離れ、ボックスモデルに関連するスタイルを上書きできるため、1位にあります.ボックスモデルは、コンポーネントの大きさと位置を決定したため、後ろに続いています.

他のプロパティは、コンポーネントの内部でのみ機能するか、前の2つの状況の結果に影響を与えないため、後ろに並んでいます.完全な属性およびそれらの順序については、Recessを参照してください.

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}
//       ，   Recess order      ,     2014-05-05

// css property order
var order = [
    'position'
    , 'top'
    , 'right'
    , 'bottom'
    , 'left'
    , 'z-index'
    , 'display'
    , 'float'
    , 'width'
    , 'height'
    , 'max-width'
    , 'max-height'
    , 'min-width'
    , 'min-height'
    , 'padding'
    , 'padding-top'
    , 'padding-right'
    , 'padding-bottom'
    , 'padding-left'
    , 'margin'
    , 'margin-top'
    , 'margin-right'
    , 'margin-bottom'
    , 'margin-left'
    , 'margin-collapse'
    , 'margin-top-collapse'
    , 'margin-right-collapse'
    , 'margin-bottom-collapse'
    , 'margin-left-collapse'
    , 'overflow'
    , 'overflow-x'
    , 'overflow-y'
    , 'clip'
    , 'clear'
    , 'font'
    , 'font-family'
    , 'font-size'
    , 'font-smoothing'
    , 'osx-font-smoothing'
    , 'font-style'
    , 'font-weight'
    , 'hyphens'
    , 'src'
    , 'line-height'
    , 'letter-spacing'
    , 'word-spacing'
    , 'color'
    , 'text-align'
    , 'text-decoration'
    , 'text-indent'
    , 'text-overflow'
    , 'text-rendering'
    , 'text-size-adjust'
    , 'text-shadow'
    , 'text-transform'
    , 'word-break'
    , 'word-wrap'
    , 'white-space'
    , 'vertical-align'
    , 'list-style'
    , 'list-style-type'
    , 'list-style-position'
    , 'list-style-image'
    , 'pointer-events'
    , 'cursor'
    , 'background'
    , 'background-attachment'
    , 'background-color'
    , 'background-image'
    , 'background-position'
    , 'background-repeat'
    , 'background-size'
    , 'border'
    , 'border-collapse'
    , 'border-top'
    , 'border-right'
    , 'border-bottom'
    , 'border-left'
    , 'border-color'
    , 'border-image'
    , 'border-top-color'
    , 'border-right-color'
    , 'border-bottom-color'
    , 'border-left-color'
    , 'border-spacing'
    , 'border-style'
    , 'border-top-style'
    , 'border-right-style'
    , 'border-bottom-style'
    , 'border-left-style'
    , 'border-width'
    , 'border-top-width'
    , 'border-right-width'
    , 'border-bottom-width'
    , 'border-left-width'
    , 'border-radius'
    , 'border-top-right-radius'
    , 'border-bottom-right-radius'
    , 'border-bottom-left-radius'
    , 'border-top-left-radius'
    , 'border-radius-topright'
    , 'border-radius-bottomright'
    , 'border-radius-bottomleft'
    , 'border-radius-topleft'
    , 'content'
    , 'quotes'
    , 'outline'
    , 'outline-offset'
    , 'opacity'
    , 'filter'
    , 'visibility'
    , 'size'
    , 'zoom'
    , 'transform'
    , 'box-align'
    , 'box-flex'
    , 'box-orient'
    , 'box-pack'
    , 'box-shadow'
    , 'box-sizing'
    , 'table-layout'
    , 'animation'
    , 'animation-delay'
    , 'animation-duration'
    , 'animation-iteration-count'
    , 'animation-name'
    , 'animation-play-state'
    , 'animation-timing-function'
    , 'animation-fill-mode'
    , 'transition'
    , 'transition-delay'
    , 'transition-duration'
    , 'transition-property'
    , 'transition-timing-function'
    , 'background-clip'
    , 'backface-visibility'
    , 'resize'
    , 'appearance'
    , 'user-select'
    , 'interpolation-mode'
    , 'direction'
    , 'marks'
    , 'page'
    , 'set-link-source'
    , 'unicode-bidi'
    , 'speak'
]