BEM記法で使用する

SMACSS採用の理由

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

echo.cssは、コーディングルールにSMACSSを採用しています。理由は以下のとおりです。

BEM記法に変更する手順

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

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

$rule: 'bem' !default;

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

要素同士はアンダースコア2つで接続されます。

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

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

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

.echo-button--info {
  ...
}

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

.echo-grid__col--order--lg--last {
  ...
}

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