Learning site for website creation

b002:SassとBEMを組み合わせる

  • 投稿日:2020年11月22日

CSS用クラス名の命名規則例

  • CSS用にid属性は使わない
  • class属性はBEMで命名する
  • 基本的にすべての要素にclass属性を付与する
    ※CSSファイル内で要素セレクタを使用しないようにするため
  • サイト共通のデザインを反映させる時は「_クラス名」と「_(アンダースコア)」始まりで命名する
    • 例)「_inner」「_pc」「_sp」等
  • JavaScript用のid属性やclass属性は「js-名前」と接頭辞「js-」をつける

フォルダ構成例

SassとBEMを組み合わせる際はブロック(パーツ)ごとにSCSSファイルを分けて管理すると扱いが楽です。

  • cssフォルダ
    • scssフォルダ:Sassファイル群
      • base:リセットとサイト共通定義
        • _init.scss:サイト共通定義
        • _reset.scss:リセットCSS
      • mixinフォルダ:サイト内で何度も使うデザイン定義群
        • _btn.scss:ボタンデザイン
        • _font.scss:書体関係デザイン
        • _form.scss:フォームデザイン
        • _media.scss:メディアクエリ
        • _other.scss:その他
      • moduleフォルダ:ブロック(パーツ)単位のSCSSファイル群
        • _ブロック名.scss:
      • page:ページ専用CSSが必要な時に使用するファイル群
        • index.scss:トップページ専用デザイン定義
      • setting:変数管理ファイル群
        • _config.scss:サイト共通変数
      • style.scss:使用するSCSSをインポートするファイル
    • 書き出されるCSS.css

サイト共通変数設定

css/scss/setting/_config.scss

// ** 外部ファイル読み込み
// * FontAwesome
// @import url("https://use.fontawesome.com/releases/v5.6.1/css/all.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

// * WebFont
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap&subset=japanese");

// ** 初期設定
// * サイト共通の値を変数で定義

// ブレイクポイント
$breakPoint-pc: 480px;
$breakPoint-sp: 479px;

// 画像格納ディレクトリ
$imgDir: "./img/";

// PC最小表示幅
$inner: 1000px;

// サイトで使用する色
$color-light: #e8e8e8;
$color-dark: #222831;
$color-main: #f05454;
$color-sub: #30475e;

// 基本書体
$font: 'Noto Sans JP',
-apple-system,
BlinkMacSystemFont,
'Helvetica Neue',
'メイリオ',
Meiryo,
'Yu Gothic',
YuGothic,
sans-serif !default;

// 基本フォントサイズ
$fontSize-pc: 16px;
$fontSize-sp: 5vw;

// 基本行間
$lineHeight: 1.6;

サイト共通部品「@mixin」

css/scss/mixin/_btn.scss

// ** mixin
// * ボタン
// * 複数ブロックで同じスタイルが必要なもの

css/scss/mixin/_font.scss

// ** mixin
// * 文字
// * 複数ブロックで同じスタイルが必要なもの

css/scss/mixin/_form.scss

// ** mixin
// * フォーム
// * 複数ブロックで同じスタイルが必要なもの

css/scss/mixin/_media.scss

// ** mixin
// * ブレイクポイント
@mixin pc {
  @media screen and (min-width: $breakPoint-pc) {
    @content;
  }
}
@mixin sp {
  @media screen and (max-width: $breakPoint-sp) {
    @content;
  }
}

css/scss/mixin/_other.scss

// ** mixin
// * その他
// * 複数ブロックで同じスタイルが必要なもの

リセットCSS

css/scss/base/_reset.scss

// ** Reset CSS
// * modern-css-reset
// * https: //github.com/hankchizljaw/modern-css-reset/blob/master/dist/reset.css

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

サイト共通デザイン

css/scss/base/_init.scss

// ** サイト共通設定
// * サイト共通デザインのクラス名は「_(アンダースコア)」始まり

body {
  background-color: $color-light;
  color: $color-dark;
  font-family: $font;
  line-height: $lineHeight;
}

// PC
@include pc {
  body {
    font-size: $fontSize-pc;
    width: 100%;
  }

  ._inner {
    width: $inner;
    margin-left: auto;
    margin-right: auto;
  }

  ._sp {
    display: none;
  }
}

// SP
@include sp {
  body {
    font-size: $fontSize-sp;
    min-width: 320px;
  }

  html,
  body {
    height: 100%;
    min-height: 100%;
  }

  ._pc {
    display: none;
  }
}

ブロック(パーツ)のデザイン定義

css/scss/module/_ブロック名.scss

// ** 記述の基本ルール例
// * 0.基本的に子孫セレクタを使用しない
// *   ※セレクタのポイント計算を簡略化するため
// * 1.BlockとBlock__elementに対するセレクタは「&」を使わずに記述する
// *   ※セレクタ検索しやすくするため
// * 2.-modifierは「&」を使って記述
// * 3.:hoverなどの擬似クラス「&」を使って記述
// * 4.::beforeや::afterなどの擬似要素も「&」を使って記述
.Block {
  color: $color-dark;
  background-color: $color-light;
}
.Block__element {
  color: $color-dark;
  background-color: $color-light;

  @include pc {
    padding: 10px;
  }
  @include sp {
    padding: 3vw;
  }

  &.-modifier {
    color: $color-dark;
    background-color: $color-main;

    @include pc {
      padding: 10px;
    }
    @include sp {
      padding: 3vw;
    }
  }

  &:hover {
    background-color: $color-sub;
  }
}

ページごとのデザイン定義

ページ単位でデザインが変わるだけ作成し、共通CSSとは別に書き出します。そのためファイル名の前に「_(アンダースコア)」をつけません。

該当ページのみ「共通CSS」とこの「ページごとのCSS」を読み込みます。

css/scss/page/ページ名.scss

// ** ページごとのデザイン
// *