構造

スタイルシートを構造化するためのさまざまな方法があります。コアにCSSがある場合、高い可読性を維持することが重要です。これにより、後から参加する貢献者が文書の流れを明確に理解できるようになります。

  • 各プロパティをインデントするためにスペースではなくタブを使用します。
  • セクション間には2行の空白を、セクション内のブロック間には1行の空白を追加します。
  • 各セレクタは独自の行に配置し、カンマまたは開き中括弧で終わらせます。プロパティ-値ペアは独自の行に配置し、1タブのインデントと終了セミコロンを付けます。閉じ中括弧は左揃えにし、開きセレクタと同じレベルのインデントを使用します。

正しい: 

  1. #selector-1,
  2. #selector-2,
  3. #selector-3 {
  4.    background: #fff;
  5.    color: #000;
  6. }

間違っている: 

  1. #selector-1, #selector-2, #selector-3 {
  2.    background: #fff;
  3.    color: #000;
  4.    }
  6. #selector-1 { background: #fff; color: #000; }

セレクタ

特異性には大きな責任が伴います。広範なセレクタは効率的ですが、テストされない場合には悪影響を及ぼす可能性があります。位置特定のセレクタは時間を節約できますが、すぐに混乱したスタイルシートにつながります。全体のスタイルとDOMのレイアウトに貢献するセレクタを作成するために、最良の判断を行ってください。

  • ファイル名のWordPress PHPコーディング基準に似て、セレクタの名前を付ける際は小文字を使用し、単語をハイフンで区切ります。キャメルケースやアンダースコアは避けてください。
  • 要素をスタイルするセレクタは、人間が読みやすいものであるべきです。
  • 属性セレクタは値の周りに二重引用符を使用するべきです。
  • 過剰に資格を与えたセレクタの使用は控え、div.containerは単に.containerと表現できます。

正しい: 

  1. #comment-form {
  2.    margin: 1em 0;
  3. }
  5. input[type="text"] {
  6.    line-height: 1.1;
  7. }

間違っている: 

  1. #commentForm { /* Avoid camelcase. */
  2.    margin: 0;
  3. }
  5. #comment_form { /* Avoid underscores. */
  6.    margin: 0;
  7. }
  9. div#comment_form { /* Avoid over-qualification. */
  10.    margin: 0;
  11. }
  13. #c1-xr { /* What is a c1-xr?! Use a better name. */
  14.    margin: 0;
  15. }
  17. input[type=text] { /* Should be [type="text"] */
  18.    line-height: 110% /* Also doubly incorrect */
  19. }

プロパティ

セレクタと同様に、特定のプロパティはデザインの柔軟性を妨げます。少ない方が多いです。スタイリングを繰り返したり、固定寸法を導入したりしないようにしてください（流動的な解決策がより受け入れられる場合）。

  • プロパティの後にはコロンとスペースを付けるべきです。
  • フォント名とベンダー固有のプロパティを除いて、すべてのプロパティと値は小文字であるべきです。
  • 色には16進数コードを使用するか、透明度が必要な場合はrgba()を使用します。RGB形式や大文字は避け、可能な限り値を短縮します: #fffの代わりに#FFFFFFを使用します。
  • スタイルを上書きする場合を除き、background、border、font、list-style、margin、paddingの値については、できるだけショートハンドを使用します。ショートハンドの参照については、CSSショートハンドを参照してください。

正しい: 

  1. #selector-1 {
  2.    background: #fff;
  3.    display: block;
  4.    margin: 0;
  5.    margin-left: 20px;
  6. }

間違っている: 

  1. #selector-1 {
  2.    background:#FFFFFF;
  3.    display: BLOCK;
  4.    margin-left: 20PX;
  5.    margin: 0;
  6. }

プロパティの順序

「似たようなプロパティを一緒にグループ化してください。特に多くのプロパティがある場合は。」

— Nacin
何よりも、あなたにとって意味のあるものを選び、ある程度の意味を持たせてください。ランダムな順序は混沌であり、詩ではありません。WordPressコアでは、私たちの選択は論理的またはグループ化された順序であり、プロパティは意味によってグループ化され、特にそのグループ内で順序付けられます。グループ内のプロパティも、backgroundの前にcolorのように、セクション間の遷移を作成するために戦略的に順序付けられています。順序付けの基準は次のとおりです:

  • 表示
  • 位置決め
  • ボックスモデル
  • 色とタイポグラフィ
  • その他

コア自体でまだ使用されていないもの、たとえばCSS3アニメーションは、上記のいずれかに論理的に適合する可能性がありますが、特定の場所は指定されていないかもしれません。CSSが進化するように、私たちの基準もそれに伴って進化します。

上/右/下/左（TRBL/trouble）は、関連するプロパティの順序であるべきです（例: margin）、値の順序と同様です。コーナー指定子（例: border-radius-*-*）は、左上、右上、右下、左下の順に配置するべきです。これはショートハンド値がどのように順序付けられるかに基づいています。

例: 

  1. #overlay {
  2.    position: absolute;
  3.    z-index: 1;
  4.    padding: 10px;
  5.    background: #fff;
  6.    color: #777;
  7. }

自動的に/WordPress.comテーマチームによってよく使用される別の方法は、特定の例外の有無にかかわらず、プロパティをアルファベット順に並べることです。

例: 

  1. #overlay {
  2.    background: #fff;
  3.    color: #777;
  4.    padding: 10px;
  5.    position: absolute;
  6.    z-index: 1;
  7. }

ベンダープレフィックス

2014-02-13に更新、[27174]の後:

私たちはAutoprefixerをプレコミットツールとして使用し、必要なブラウザプレフィックスを簡単に管理し、このセクションの大部分を無意味にします。Gruntを使用せずにその出力を追跡したい場合、ベンダープレフィックスは最も長い（-webkit-）から最も短い（プレフィックスなし）に配置するべきです。他のすべてのスペーシングは、他の基準に従って残ります。 

  1. .sample-output {
  2.    -webkit-box-shadow: inset 0 0 1px 1px #eee;
  3.    -moz-box-shadow: inset 0 0 1px 1px #eee;
  4.    box-shadow: inset 0 0 1px 1px #eee;
  5. }

値

プロパティの値を入力する方法は多数あります。以下のガイドラインに従って、高い一貫性を維持するのに役立ててください。

  • 値の前にスペースを、コロンの後にスペースを付けます。
  • 括弧にスペースを入れないでください。
  • 常にセミコロンで終わらせます。
  • 必要な場合にのみ二重引用符を使用し、フォント名にスペースがある場合やcontentプロパティの値の場合に使用します。
  • フォントの太さは数値（例: 400の代わりにnormal、700の代わりにbold）を使用して定義するべきです。
  • 0の値には、transition-durationのように必要な場合を除いて単位を付けないでください。
  • 行の高さも単位なしであるべきで、特定のピクセル値として定義する必要がある場合を除きます。これは単なるスタイルの慣習以上のものであり、ここで言及する価値があります。詳細情報: https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/。
  • 小数値には先頭のゼロを使用し、rgba()を含めます。
  • 1つのプロパティに対する複数のカンマ区切りの値は、スペースまたは改行で区切るべきです。可読性を向上させるために、box-shadowやtext-shadowのようなショートハンドプロパティの長い複数部分の値には改行を使用し、最初の値の前に改行を入れます。値はその後、プロパティから1レベルインデントされるべきです。
  • rgba()のような値内の値のリストは、スペースで区切るべきです。

正しい: 

  1. .class { /* Correct usage of quotes */
  2.    background-image: url(images/bg.png);
  3.    font-family: "Helvetica Neue", sans-serif;
  4.    font-weight: 700;
  5. }
  7. .class { /* Correct usage of zero values */
  8.    font-family: Georgia, serif;
  9.    line-height: 1.4;
  10.    text-shadow:
  11.    0 -1px 0 rgba(0, 0, 0, 0.5),
  12.    0 1px 0 #fff;
  13. }
  15. .class { /* Correct usage of short and lengthier multi-part values */
  16.    font-family: Consolas, Monaco, monospace;
  17.    transition-property: opacity, background, color;
  18.    box-shadow:
  19.    0 0 0 1px #5b9dd9,
  20.    0 0 2px 1px rgba(30, 140, 190, 0.8);
  21. }

間違っている: 

  1. .class { /* Avoid missing space and semicolon */
  2.    background:#fff
  3. }
  5. .class { /* Avoid adding a unit on a zero value */
  6.    margin: 0px 0px 20px 0px;
  7. }
  9. .class {
  10.    font-family: Times New Roman, serif; /* Quote font names when required */
  11.    font-weight: bold; /* Avoid named font weights */
  12.    line-height: 1.4em; /* Avoid adding a unit for line height */
  13. }
  15. .class { /* Incorrect usage of multi-part values */
  16.    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
  17.    0 1px 0 #fff;
  18.    box-shadow: 0 1px 0 rgba(0, 0,
  19.    0, 0.5),
  20.    0 1px 0 rgba(0,0,0,0.5);
  21. }

メディアクエリ

メディアクエリを使用すると、異なる画面サイズに対してDOMを優雅に劣化させることができます。追加する場合は、ターゲットとしているブレークポイントの上と下でテストしてください。

  • 一般的には、メディアクエリはスタイルシートの下部にメディアごとにグループ化しておくことが推奨されます。
    • コアのwp-admin.cssファイルには例外があり、非常に大きく、各セクションは本質的に独自のスタイルシートを表します。したがって、メディアクエリは適用可能なセクションの下部に追加されます。
  • メディアクエリのルールセットは1レベルインデントされるべきです。

例: 

  1. @media all and (max-width: 699px) and (min-width: 520px) {
  2.    /* Your selectors */
  3. }

コメント

  • コメントをし、自由にコメントしてください。ファイルサイズに関する懸念がある場合は、ミニファイドファイルとSCRIPT_DEBUG定数を利用してください。長いコメントは手動で80文字で行の長さを折り返すべきです。
  • 長いスタイルシート、特にセクションが多いものには目次を利用するべきです。インデックス番号（1.0、1.1、2.0など）を使用すると、検索や特定の場所へのジャンプが容易になります。
  • コメントはPHPDocのようにフォーマットされるべきです。CSSDoc基準は必ずしも広く受け入れられているわけではありませんが、時間とともにその一部が採用される可能性があります。セクション/サブセクションのヘッダーには前後に改行が必要です。インラインコメントは、関連する項目との間に空の改行を入れないでください。

セクションとサブセクションの場合: 

  1. /**
  2.  * #.# Section title
  3.  *
  4.  * Description of section, whether or not it has media queries, etc.
  5.  */
  7. .selector {
  8.    float: left;
  9. }

インラインの場合: 

  1. /* This is a comment about this selector */
  2. .another-selector {
  3.    position: absolute;
  4.    top: 0 !important; /* I should explain why this is so !important */
  5. }

ベストプラクティス

スタイルシートは長さと複雑さが増す傾向があり、成長するにつれて冗長性の可能性が高まります。いくつかのベストプラクティスに従うことで、CSSが進化する際に焦点と柔軟性を維持するのに役立ちます:

  • 問題を修正しようとしている場合は、追加する前にコードを削除しようとしてください。
  • マジックナンバーは不運です。これは、単発のクイックフィックスとして使用される数字です。例: .box { margin-top: 37px }。
  • DOMは時間とともに変化します。親を通じて「見つける」のではなく、使用したい要素をターゲットにしてください。例: 親にセレクタがある.highlight aの代わりに、要素に.highlightを使用します。
  • heightプロパティを使用するタイミングを知ってください。外部要素（画像など）を含める場合に使用するべきです。それ以外の場合は、line-heightを使用して柔軟性を高めます。
  • デフォルトのプロパティと値の組み合わせを再度述べないでください（たとえば、ブロックレベル要素にdisplay: block;）。

WP管理CSS

WP管理CSSコードの健康を文書化するために生成されたレポートであるWP管理CSS監査をチェックしてください。 リポジトリのREADMEで詳細を読むことができます。

関連リンク