BEM記法で使用する

SMACSS採用の理由

CSSのクラス命名記法は、ハイフンで接続する「SMACSS」と、アンダースコアで接続する「BEM」に大きく分けられます。

echo.cssは主に「わかりやすさ」を重視する理由から、コーディングルールにSMACSSを採用しています。

  • クラス名が短く簡潔
  • コーディングスキルが高くない制作者にも読みやすい
  • PHPやJavaScriptの変数名と重複しにくい（キャメルケースやアンダースコアが使用されることが多いため）
  • 主要CMSの公式テーマのCSSはSMACSSが多い
  • BEMに強いポリシーを持つコーダーは、社内のフレームワークを使用しているか、CSSフレームワークを自作している

BEM記法に変更する手順

Sassを使用できる環境では、BEM記法に変更することができます。

設定ファイル _scss/_config_basic.scss をエディタで開き、15行目付近にある変数 $rule の値を 'bem' に変更して、リビルドしてください。

$rule: 'bem' !default;

BEM記法の場合の基本ルール

種別を表す接頭辞 l, m, c, u, p はハイフンで接続されます。

.l-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

要素同士はアンダースコア2つで接続されます。親子関係は2階層以内となるようにしています。

.c-card__header {
  padding: 10px 10px;
}

.c-card__contents {
  padding: 10px 10px;
  font-size: 0.75rem;
  line-height: 1.125rem;
}

「色」「大きさ」などを示すモディファーはハイフン2つで接続されます。

.m-btn--first {
  color: #fff;
  background-color: #1976d2;
  border-color: transparent;
}

「AがB」といった挙動を表す key, value はハイフン2つで接続されます。

.l-grid__col--order--lg--first {
  order: -1;
}

これらのルールを変更したい場合は、 _scss/_config_advance.scss を参照ください。

Next echo.cssとは？