Japaweb ではコーディングの品質を担保するため、またお客様が後から編集する際に迷いが生じないように、下記ルールに従って記述を行います。

スタイルシートについて

設計思想

FLOCSS をベースとする。ただしスムーズに運用するためにSCSSファイル構成などで若干のアレンジを加えている。

プロパティの記述順

stylelint-config-property-sort-order-smacss の順番とする。 

クラスの命名ルール

「該当のスタイルを検索しやすくする」「ブロック名の重複を避ける」「他のファイルに影響を与えないようにする」ため以下のルールに従ってクラス名を付けてください。

  • MindBEMding ( Block__Element–Modifier ) を使用する。
  • Element は必ず1つとする。
  • Modifier を使用する場合は、マルチクラスとし、modifier 適用前のクラスとともに HTML に記述する。またModifier より前の部分を省略しないこと。
  • ID は使用せず、すべて class を使用する。ただし JavaScript から参照される要素の場合は例外とする(後述)。
  • 単語の区切りにはハイフンを使用し、キャメルケースは使用しない。
  • クラス名の頭の部分は SCSS ファイル名と合わせる。ただしファイル名にプレフィックスは付けない。
  • FLOCSS の役割を示すプレフィックス( l-、c-、p- 、u- )は付与しない。ただしお客様が希望すれば追加する。
// SCSSファイル (ファイル名:company.scss)

/* NG */
.member__list {} // 頭の部分がファイル名と合致しない
#company-member__list-item {} // ID は使用しない
.company-member__list__item {} // Element は複数回登場してはならない ( __ は必ず1つにすること)
.companyMember__list-item {} // キャメルケースは使用しない
.company-member__list-item.--ceo {} // クラス名の頭はファイル名と合わせる (--ceo ではじまるクラスはNG)

/* OK */
.company-member__list-item {}
.company-member__list-item--ceo {}


// HTMLファイル

/* NG */
<h3 class="title-a--sm">見出し</h3> /* Modifier はマルチクラスで記述しなければならない  */ 

/* OK */
<h3 class="title-a title-a--sm">見出し</h3>

JavaScript から参照される要素へのクラス名

  • JavaScript から参照される要素には ID を使用する。ただしページに複数回登場する場合は class を使用する。そして接頭辞には「js-」を付与する。
  • JavaScriptで操作されるような「状態」を表すようなModifierについては、is-*プレフィックスを付与する。
/* 例 */
.js-accordion {}
#js-hamburger {}
.c-button.is-open {}

クラスに使用する単語

Google HTML/CSS Style Guide に基づき一般的な略語と思われるものは省略形を使用する。
一般的の判断は Bootstrap、Google Coding Guideline、ファイル拡張子やHTMLタグとして存在しているかなどを参考に決定。

headerヘッダー
footerフッター
sidebarサイドバー
heading見出し
wrapper囲み
inner内包
containerコンテンツ領域に上下余白などを指定する必要がある場合の囲み。
content (※1)<main> エリアに使用してサイトコンテンツの幅を指定する。ページ独自のSCSSファイルを作成しない、流し込みページに使用。
sectionセクション上下の余白。ページ独自のSCSSファイルを作成しない、流し込みページに使用。
title見出しに内包される見出し
buttonボタン ※WordPressコアのクラス名と合わせる
txtテキスト
img画像
content (※2)※1 とは異なる部分に使用するコンテンツ
colカラム
body内容
linka タグに使用
item複数連なるものの各アイテム
navナビゲーション
mediaメディア
cardカード
catカテゴリー
copyrightコピーライト
primary等級がある場合の主要なもの 例)sidebar-primary
secondary等級がある場合の2番目のもの 例)sidebar-secondary
thumbnailthumb
(検討中) noナンバー
lvレベル
colカラム
–smsmall ※Bootstrapより
–lglarge ※Bootstrapより
-a、-b、-c…ボタンや見出しなどはデザインの種類ごとにアルファベットを末尾に付与して Block にする。
例)button-a、button-b …
数字にしない理由: 数字は長さや余白、連番を表す際に使用するので、それらと区別するため。
–reverse逆方向に指定するモディファイア ※Bootstrapより

ユーティリティクラス

原則 .sp-only、.pc-only のみの使用とするが、サイトの規模が大きく、ページ独自のSCSSファイルを作成せずに流し込みが中心となる案件においてはユーティリティクラスを利用する。

ユーティリティクラス一覧

クラス名はTailwind を参考にしている。

.text-(color)文字色 ※bootstrap、tailwindより
.text-right
.text-left
.text-center
text-align: right
text-align: left
text-align: center

単位について

margin / padding / li スタイル上下rem
border / border-radius / 固定パーツ(例:ハンバーガーメニュー)
layout コンテナの幅がpx指定の場合、それを基準とした width / min-width / max-width / box-shadow / text-decoration-thickness
px
li のインデント / heading の上 / letter-spacing (0.025em 0.05em 0.1em) / text-underline-offset (0.1em);em

単位の小数点

小数点3桁で四捨五入 例 padding: calc(0.667em + 2px) calc(1.333em + 2px);

カスケーディングと詳細度について

詳細度を高めないため、クラスを付与するHTML要素の変更を可能にするため下記をルールとする。

  • 無駄なカスケーディングは禁止する。
  • HTML要素に直接クラスを付けることを禁止する。ただし、末端の span、a、th、td、dt、ddへの指定は許容する。理由としてはすべてにクラス名を付与を義務とすると、コーディングスピードが低下するため。
  • モジュール間のカスケーディング、他のモジュールを親とするセレクタを用いたカスケーディングは禁止とする。ただし、modifier を親としたカスケーディングは例外として許容する。
  • Project レイヤーが Component レイヤーのモジュールを変更することは許容するが、ProjectレイヤーのElementや、ComponentレイヤーのModifierによって拡張することによって解決することが望ましい。詳細は FLOCSS 公式ドキュメント「レイヤー、モジュールのカスケーディング」を参照
/* NG */
.p-member ul // HTML要素への直接指定はNG
ul.p-member-list // HTML要素への直接指定はNG
.p-member-list dl dd // HTML要素への直接指定はNG。加えて無駄なカスケーディングである(dd の親は 必ず dlのため)
.c-box-a .c-btn-a {} // モジュール間のカスケーディングはNG
.p-about .p-contact {} // モジュール間のカスケーディングはNG

/* OK */
.p-about__box.c-heading {}

/* 例外でOK */
.p-profile--reverse .p-profile__image {}

/* 許容でOK */
.p-member-list a {}
.p-profile .c-media__image {} // 許容範囲だが、ProjectレイヤーのElementや、ComponentレイヤーのModifierによって拡張することが望ましい

画像について

画像に使用する単語

banner-バナー
button-ボタン
icon-アイコン
logo-ロゴ
bg-背景
heading-見出し
thumb-サムネイル
-spスマートフォン用の画像に使用する接尾辞

その他ルール

連番の場合は画像の末尾に「 -数字」 例)xxx-01.png、 xxx-02.png

SCSSについて

SCSS のファイル構成

  • ファイル構成は下記とし、ファイル名とそのファイルに記述する BEM の Block の最初の部分は必ず合わせるものとする
  • Project レイヤーであるページ独自のスタイルは、ページ名を BEM の Block とすると、element 部分が冗長になるため、同じデザインのセクションを1つの Blockとする。
    例) Block名: about-history__xxx、about-location__xxx ファイル名:about.scss
  • header、footer などのコンテナ―に内包されているが、レイアウトの性質を持たないモジュールに関しても layout に分類する。理由としては、フォルダ構成や判断基準をシンプルにし、該当クラスを見つけやすくするため。
  • content、section、col などのレイアウトの性質を持ったモジュールもコンポネントに分類する。理由としては、1. IDに置き換えられない、2. FLOCSSのルールでそのようになっている、3. フォルダ構成や判断基準をシンプルにし、該当クラスを見つけやすくするため。
sass/
  ├ style.scss---------------- SCSSファイルのルート
  │
  ├ settings/----------------- ツール
  │  ├ _variables.scss-------- 変数
  │  ├ _mixin.scss------------ ミックスイン
  │  └ _functions.scss-------- 関数
  │
  ├ foundation/--------------- 基本設定
  │  └ _base.scss------------- リセット/ サイトの基本設定
  │
  ├ layout/ ------------------ header/footerなどのサイト共通のコンテナーのスタイル
  │  ├ _header.scss----------- ヘッダー
  │  ├ _footer.scss----------- フッター
  │  ├ _sidebar.scss---------- サイドバー
  │
  ├ object/ ------------------ プロジェクトにおける繰り返されるビジュアルパターン
  │  │
  │  ├ component/ ------------ 再利用できる小さな単位のモジュール
  │  │  ├ _button.scss-------- ボタン
  │  │  ├ _heading.scss------- タイトル(見出し)
  │  │  ├ _icon.scss---------- アイコン
  │  │  ├ _col.scss----------- カラム
  │  │  ├ _table.scss--------- テーブル
  │  │  ├ _slider.scss-------- スライド
  │  │  ├ _youtube.scss------- Youtube
  │  │  ├ _pagetop.scss------- ページの先頭へボタン
  │  │  ├ _content.scss------- コンテンツ幅
  │  │  ├ _section.scss------- セクション上下の余白
  │  │  ├ _media.scss--------- メディア
  │  │  └ _card.scss---------- カード
  │  │
  │  ├ project/ -------------- プロジェクト固有でページにまたがって表示されるもの、ページ個別のスタイル (WordPress案件の場合は原則ファイル名を slug に合わせる)
  │  │  ├  _globalnav.scss-------- グローバルナビゲーション
  │  │  ├  _breadcrumbs.scss------ パンくず
  │  │  │
  │  │  ├ _index.scss--------- トップページ個別のスタイル
  │  │  ├ _about.scss--------- aboutページの個別のスタイル
  │  │  ├ _contact.scss------- contactページの個別のスタイル
  │  │  └ _…------------------ ページ個別のスタイルを以下に追加していく
  │  │
  │  └ utility/ -------------- ユーティリティクラス
  │     └ _utility.scss.scss-- ユーティリティクラス
  │
  └ wordpress/---------------- WordPress案件の場合
     └ wp-blocks/------------- ブロック用スタイル

SCSS の注意事項

  • @extend は使用しない。理由としては第三者が編集をする場合にすぐに理解することが難しいため。