bw-coding-basic-v4

• WebGridとFlexBoxを使用することを想定したコーディングフォーマット。
• 記述方式はBEMを使用。

ファイル概要

• style.scss…コード内検索を楽にするため、過度なボリュームにならない限り全スタイルを1ファイルにまとめる。

独自機能

メディアクエリをmixinにて追加可能

メディアクエリの数値はbootstrap5を参照。mixinあり。サイズは以下の通り。

• xs 576px以下
• sm 576px以上（default）
• md 768px以下
• lg 992px以下
• xl 1200px以下
• wp 1201px以上
• xxl 1400px以上

@include mq(★){
  //add class
}
★にはxs、sm、md、lg、xlのいずれかを挿入

ほんの少しのUtilityクラス

最低限のUtilityを用意。過度に増やすことは推奨しないが、マルチクラスの方が早い場合もあるため。内容は以下。（随時追加）

• clearfix

簡単なコーディングルール

ルールをあまりに縛った所でその通りにならないので、緩めのルールを設ける。

• SCSSを使う事（prepros推奨）
• @extend 、@at-rootは使用しない
• レスポンシブのサイズ違いスタイルは、@include mq(){}を使い、要素に一番近い位置へ記載する。（スマホ用、PC用とCSSファイルや位置をわけない）
• BEMを使う事
• ちょっと似たような見た目のスタイルを無理して流用しなくてよい（記述の重複を許容）。CSSではあえて重複を許容することで複雑化に歯止めをかけられることがよくある。
• エレメントの入れ子は避ける（.BlockName__element1__element2 { ... } /* NG */）
• クラス名に名前空間を利用しない（layoutを .l-* 、Utilityを .u-* みたいな）。ただしJavascript関連のクラス名には名前空間をつける。（.js-*）
• 複数単語によるクラス名にハイフンやアンダーバーは使わない（ blockName、BlockName等と記述 ）。ハイフンやアンダーバーはBEMの区切りとして目立たせるため

その他

• WebGridを古ブラウザに対応するため、preprosのautoprefixerにオプション指定。設定は以下。

> 3% in JP, ie 11, Android 4.4, last 3 versions

サイズルール

• フォントサイズは16px（＝1rem）を基準、行間、文字間の既定値を設定。（コメントアウトしている）
• NotoSansJPのウエイトは、見出し700、本文400（指定しない）