一般規約


一般的な規約

コードの構成

  • コンポーネント単位でコードセグメントを構成する
  • コンポーネントブロックとサブコンポーネントブロック と 宣言ブロック< /code> コード> は 1 つの空白行 で区切られ、 サブコンポーネント ブロック は 3 つの空白行 で区切られます。
  • 複数の CSS ファイルが存在する場合。ページは再編成され、コンポーネントは移動のみされるため、ページではなくコンポーネントに分割します。组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
  • 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；

良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的。

提示：通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

/* ==========================================================================
   组件块
 ============================================================================ */

/* 子组件块
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子组件块
 ============================================================================ */
.selector-secondary {
  display: block; /* 注释*/
}

.selector-three {
  display: span;
}

Class 和 ID

  • 使用语义化、通用的命名方式；
  • 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
  • 避免选择器嵌套层级过多，尽量少于 3 级；
  • 避免选择器和 Class、ID 叠加使用；

出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。

元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护。

/* Not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}

/* Recommended */
#nav {}
.box-video {}
#username input {}
#example {}

声明块格式

  • 选择器分组时，保持独立的选择器占用一行；
  • 声明块的左括号 { 前添加一个空格；
  • 声明块的右括号 } 应单独成行；
  • 声明语句中的 : 后应添加一个空格；
  • 声明语句应以分号 ; 结尾；
  • 一般以逗号分隔的属性值，每个逗号后应添加一个空格；
  • rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
  • 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；
  • 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
  • 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;
良いコメントは非常に重要です。コンポーネントがどのように機能するか、その制限事項、およびコンポーネントの構築方法について説明する時間を設けてください。一般的または明白ではないコード部分の目的を推測するのを、チームの他のメンバーに任せないでください。

ヒント: エディターを構成することで、合意されたコメント パターンを出力するためのショートカット キーを提供できます。 

/*  Not recommended  */
.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
}

/* Recommended */
.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;
}

クラスと ID

セマンティックで汎用的な名前を使用します。

ID とクラス名の区切り文字としてハイフンを使用し、キャメルケースの名前とアンダースコアを使用しないでください。

セレクターのネストされたレベルが多すぎることを避けてください。 3 レベル以上;

🎜クラスと ID とのセレクターの重複使用を避けてください。🎜🎜🎜パフォーマンスを考慮し、不要な場合はクラスと ID に要素セレクターを重ねて使用しないでください。 🎜🎜要素セレクター、ID、クラスを混合して使用することも、関心の分離の原則に違反します。 HTML タグを変更すると、CSS コードを再度変更する必要があり、後のメンテナンスに役立ちません。 🎜
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

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

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}
🎜宣言ブロックの形式🎜🎜🎜セレクターをグループ化するときは、独立したセレクターが 1 行を占めるようにします。🎜🎜宣言ブロックの左括弧の前にスペースを追加します。{; block < code>} は別の行に置く必要があります。 🎜🎜 宣言ステートメントの : の後にスペースを追加する必要があります。 🎜🎜 宣言ステートメントはセミコロン で終わる必要があります。 ;; 🎜 🎜通常、カンマで区切られた属性値の場合は、各カンマの後にスペースを追加する必要があります 🎜🎜rgb()、rgba()、hsl()、hsla()、または rect() 括弧内の値はカンマで区切られますが、スペースは追加しませんカンマの後; 🎜🎜属性値または色のパラメータの場合は、1 未満の小数点の前の 0 を省略します (たとえば、0.5 の代わりに .5)。 -0.5px の代わりに >-.5px ); 🎜🎜16 進数の値はすべて小文字にし、可能な限り省略する必要があります (例: #fff #ffffff の代わりに 🎜🎜たとえば、margin: 0px; の代わりに margin: 0; を使用して、0 の値に単位を指定することは避けてください。 ; 🎜🎜
/* Not recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

/* Recommended */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

.selector[type="text"] {

}
🎜宣言順序🎜🎜関連する属性はグループにする必要があります、推奨スタイルの記述順序🎜🎜1.配置🎜 🎜2.ボックスモデル🎜🎜3.タイポグラフィ🎜🎜4.ビジュアル🎜

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

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

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

二重引用符を使用した引用符、属性セレクター、および属性値には

url() を使用します。 参照url() の値の引用符は本当に必要ですか?url() 、属性选择符、属性值使用双引号。 参考 Is quoting the value of url() really necessary?

rrreee

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

rrreee

不要使用 @import

与 <link> 相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。

替代办法：

  • 使用多个 元素；
  • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
  • 其他 CSS 文件合并工具；

参考 don’t use @import；

链接的样式顺序：

a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

rrreee

メディアクエリの位置

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

rrreee

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

<link>、@import と比較してください> 速度が大幅に遅くなり、追加のリクエストの数が増えるだけでなく、予期せぬ問題が発生することもあります。

代替案:
  • 複数の要素を使用します。
  • Sass などの CSS プリプロセッサを使用して、複数の CSS ファイルを 1 つのファイルにコンパイルします。
  • その他の CSS ファイル結合ツール;
参照は @import を使用しません;


a:link -> a:visited -> a: hover -> active (LoVeHAte)

🎜ブラウザベンダープレフィックスを追加する必要はありません🎜🎜CSSを記述するときにブラウザベンダープレフィックスを自動的に追加するには、🎜Autoprefixer🎜を使用します。標準CSSを直接​​記述します。 🎜🎜Autoprefixer は、🎜Can I use🎜 を介して互換性要件に従って、ブラウザーのベンダー プレフィックスを対応する CSS コードに追加します。 🎜🎜🎜🎜🎜🎜
→