CSS仕様_html/css_WEB-ITnose

• 更新日: 2015 年 4 月 25 日
• バージョン: 2015.04.25.00
• 改訂版: Pan Tao

過去の改訂

• 2015-04-25: 最初の新しい改訂版、Pan Tao

標準コンテンツ

構文

• タブ文字を置き換えるには 2 つのスペースを使用します。これが、すべての環境で一貫したプレゼンテーションを保証する唯一の方法です。
• セレクターをグループ化するときは、個々のセレクターを独自の行に配置します。
• コードを読みやすくするために、各宣言ブロックの左中括弧の前にスペースを追加します。宣言ブロックの右中括弧は、単独の行に置く必要があります。
• 各宣言文の : の後にスペースを挿入する必要があります。
• より正確なエラー報告を行うには、各ステートメントを独自の行に配置する必要があります。
• すべての宣言ステートメントはセミコロンで終わる必要があります。最後の宣言ステートメントの後のセミコロンはオプションですが、省略するとコードでエラーが発生しやすくなる可能性があります。
• カンマ区切りの属性値の場合、各カンマの後にスペースを挿入する必要があります (例: box-shadow)。
• rgb()、rgba()、hsl()、hsla()、rect() 値内のカンマの後にスペースを挿入しないでください。これは、複数の色の値 (カンマのみ、スペースなし) を複数の属性値 (カンマとスペース) から区別するのに役立ちます。
• 属性値またはカラーパラメータの場合、1 未満の小数の先頭の 0 を省略します (例: 0.5 の代わりに .5、-0.5px の代わりに -.5px)。
• 16 進数値はすべて小文字にする必要があります (例: #fff)。小文字は、その形が区別しやすいため、原稿をスキャンするときに読みやすくなります。
• 短縮された 16 進値を使用するようにしてください。たとえば、#ffffff の代わりに #fff を使用します。
• セレクター内の属性に二重引用符を追加します (例: input[type="text"])。場合によってはオプションですが、コードの一貫性を保つために二重引用符を使用することをお勧めします。
• 0 の値に単位を指定することは避けてください。たとえば、margin: 0px; の代わりに margin: 0; を使用します。

ここで使用されている用語についての質問については、Wikipedia のカスケード スタイル シートの記事の構文セクションを参照してください。

非推奨

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

推奨

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;}

宣言の順序

関連するプロパティの宣言は、グループ化して次の順序で並べる必要があります:

• 位置決め
• ボックスモデル
グラフィカル
ビジュアル
を入力

配置により通常のドキュメント フローから要素が削除され、ボックス モデル関連のスタイルもオーバーライドできるため、最初にランク付けされました。ボックス モデルが 2 番目に来るのは、コンポーネントのサイズと配置が決定されるためです。

他のプロパティはコンポーネントの内部にのみ影響を与えるか、プロパティの最初の 2 つのグループに影響を与えないため、後ろにランクされます。

属性の完全なリストとその順序については、「Recess」を参照してください。

@import は使用しないでください

タグと比較して、@import コマンドは追加のリクエストの数が増えるだけでなく、予期しない問題を引き起こします。代替案は次のとおりです:

複数の 要素を使用する

Sass などの CSS プリプロセッサを介して複数の CSS ファイルを 1 つのファイルにコンパイルする
Rails、Jekyll またはその他のシステムを介して提供される CSS ファイルのマージ機能を使用する
• 詳細については、Steve Souders の記事を参照してください。

非推奨

css.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;}

推奨

html<!-- @imports --><style>  @import url("more.css");</style>

メディア クエリの配置

メディア クエリを関連ルールのできるだけ近くに配置します。これらを単一のスタイル ファイルにパッケージしたり、ドキュメントの最後に配置したりしないでください。分けてしまえば、将来的には誰からも忘れられるだけです。典型的な例を以下に示します。

html<!-- 使用 link 元素 --><link rel="stylesheet" href="core.css">

接頭辞付き属性

特定のメーカーの接頭辞付き属性を使用する場合、各属性の値はインデントによって垂直方向に整列され、複数行の編集が容易になります。

Textmate で、[テキスト] → [選択範囲内の各行を編集] (??A) を使用します。 Sublime Text 2 では、選択 → 前の行を追加 (??↑) および選択 → 次の行を追加 (??↓) を使用します。

推奨

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

単一行のルール宣言

宣言が 1 つだけ含まれるスタイルの場合、読みやすさと迅速な編集のために、ステートメントを同じ行に置くことをお勧めします。複数の宣言を含むスタイルの場合も、宣言を複数の行に分割する必要があります。

これを行う際の重要な要素はエラー検出です。たとえば、CSS バリデーターは 183 行目に構文エラーがあることを示します。 1 行に 1 つのステートメントがある場合は、エラーを無視できません。1 行に複数のステートメントがある場合は、エラーを見逃さないように注意深く分析する必要があります。

css.selector {  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);          box-shadow: 0 1px 2px rgba(0,0,0,.15);}

短縮されたプロパティ宣言

短縮されたプロパティ宣言の使用は、すべての値を明示的に設定する必要がある状況に限定する必要があります。省略された属性宣言の一般的な悪用は次のとおりです:

• padding
• margin
• font
• background
• border
• border-radius
• 
  大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

MDN（Mozilla Developer Network）上一片非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。

不推荐

css.element {  margin: 0 0 10px;  background: red;  background: url("image.jpg");  border-radius: 3px 3px 0 0;}

推荐

css.element {  margin-bottom: 10px;  background-color: red;  background-image: url("image.jpg");  border-top-left-radius: 3px;  border-top-right-radius: 3px;}

Less 和 Sass 中的嵌套

避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。

无嵌套

css.table > thead > tr > th { … }.table > thead > tr > td { … }

嵌套

css.table > thead > tr {  > th { … }  > td { … }}

注释

代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。

对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。

不推荐

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

推荐

css/* 包裹 .modal-title 与 .modal-close 的外围容器 */.modal.header {  ...}

class 命名（此条暂时未完全定下来）

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。同时，破折号只有在多个单词必须连着同时存在才具有真实意义时使用，用于区分两个不同的单词，例如，.button 与 .danger.button ，但是不允许使用 .danger-button 或者 .button.danger。

不允许使用简写。但 class 名称应当尽可能短，并且意义明确。使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。

不推荐

css.t { ... }.red { ... }.header { ... }

推荐

css.tweet { ... }.important { ... }.tweet.header { ... }

选择器（此条暂时未完全定下来）

对于通用元素使用 class ，这样利于渲染性能的优化。对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。

选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

不推荐

cssspan { ... }.page-container #stream .stream-item .tweet .tweet-header .username { ... }.avatar { ... }

推荐

css.avatar { ... }.tweet-header .username { ... }.tweet .avatar { ... }

代码组织

• 以组件为单位组织代码段。
• 制定一致的注释规范。
• 使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。
• 如果使用了多个 CSS文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。

css/* * 组件 */.element { ... }/* * 组件 * * 有的时候也可能一个组件是很复杂的 */.element { ... }/* 组件的子组件 */.element-heading { ... }