\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > L_HTML/CSS > Step4 > CSSにルールを設けてさらに保守性を高めよう part2

CSSにルールを設けてさらに保守性を高めよう part2

2022/07/14

2022/09/30

前回の、「CSSにルールを設けてさらに保守性を高めよう part1」では、CSS設計における基本的な考え方と、簡単に命名規則の話をしていきました。

アイキャッチ画像
CSSにルールを設けてさらに保守性を高めよう part1

次は、具体的な書き方の話をしていこうと思います。

この記事で身につく内容
  • BEMを使用したクラス名のつけ方
  • 接頭辞の使い分け
  • その他CSS設計のポイント
  • CSS設計を勉強する上での参考

 

BEMの具体的な書き方

初めてBEMでの命名をしてみると、本当にこの書き方で合っているのか不安になると思います。

今回は、具体的な書き方を紹介していこうと思いますので、参考にしてください。

基本的な書き方

まずは基本的な書き方です。

【BEMで書かない場合のコード】

<header class="header">
  <h1 class="header-logo">
    ZeroPlus <span class="header-logo-primary">Ad</span>Sense
  </h1>
</header>
【BEMに直したもの】
<header class="header">
  <h1 class="header_logo">
    ZeroPlus <span class="header_logo__primary">Ad</span>Sense
  </h1>
</header>

BEMの基本的な書き方として「Block_Element__Modifire」という書き方があります。

例えば、ここでは主に

headerというBlock

_logoというElement

__primaryというModifier

という構成で作られています。

BlockとElementは例えるなら、住所がわかりやすいと思います。

「東京都豊島区」という住所があるとしたら、これは「Block_Element」の構造となっています。

「東京都の中にある豊島区」というような構造となっているように、「特定Blockの中にあるElement」という命名の付け方をしていきます。そうすることで、住所と同じように被ることなくclass名を命名することができるわけですね。

なので、上記のコードではheaderの中にあるロゴということでheader_logoというclass名がついています。

Modifierは独特の考え方で、基本的な作りは同じですが、色や機能などで変化をつけたい場合に使います。

上記のコードのheader_logo__primaryというclass名は「その箇所だけ色に変化をつけたい」という使い方をしています。

Blockの中でBlockを作る

BEMを学びながら書いていると、構造上Elementにするのにも限界を感じるときがあります。

そのため、BEMでは「Blockの中でBlockを作る」ということを行っていきます。

次のコードでは、headerというBlockのなかにheader-navというBlockを作って命名しています。

<header class="header">
  <h1 class="header_logo">
    ZeroPlus <span class="header_logo__primary">Ad</span>Sense
  </h1>

  <nav class="header-nav">
    <ul class="header-nav_list">
      <li class="header-nav_item">
        <a class="header-nav_link" href="index.html#news">お知らせ</a>
      </li>
      <li class="header-nav_item">
        <a class="header-nav_link" href="index.html#service">サービス</a>
      </li>
      <li class="header-nav_item">
        <a class="header-nav_link" href="index.html#contact">お問い合わせ</a>
      </li>
    </ul>
  </nav>
</header>

このようにして命名することで、「Block_Element_Element」のような書き方せずに、被りづらい命名をすることができます。

Mixを使う

BEMには「Mix」と呼ばれるテクニックがあります。Mixとは、一つの要素に複数のclassをつけることを指します。

Mixを行う目的として、「classごとに責任を分ける」というものがあります。

例えば、part1で紹介した次のコードを見てみると、.pagination_numbersと.pagination_numbers__currentというclassが同じ1つの要素につけられている箇所があります。

<div class="pagination">
	<span class="pagination_numbers pagination_numbers__current">1</span>
	<a href="" class="pagination_numbers">2</a>
	<span class="pagination_between">…</span>
	<a href="" class="pagination_numbers">10</a>
	<a href="" class="pagination_numbers pagination_numbers__next"></a>
</div>
.pagination_numbers {
	font-size: 18px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d3d3d3;
	background: #ffffff;
}
.pagination_numbers__current {
	color: #ffffff;
	border-color: #cb7aa6;
	background: #cb7aa6;
}

 

このように書くことで、.pagination_numbersが全体で共通のスタイルをつけてくれ、.pagination_numbers__currentが部分的に変化させたいスタイル（ここでは1だけ青くしたいという変化）を担っています。

役割を分担することで、再利用しやすく、保守しやすく、拡張しやすいCSSとなっているわけです。

接頭辞の具体例と注意点

part1の記事では、次のように概要を説明しましたが、今回はより具体的に解説していこうと思います。

BEMで書いたclass名の前につける文字のことを指しています。

役割として、そのclass名がなんの役割を果たしているかを示したり、class名の重複を避ける目的があります。

教材では次の接頭辞と役割が対応しています。

接頭辞役割
l_class-name汎用的に使えるレイアウトにつかう。sectionレイアウトなど。
headerやfooterは便宜上一つのレイアウトとして扱う。
m_class-name汎用的に使えるモジュール（コンポーネントと似たモノ）につかう。
u_class-nameユーティリティクラス（単一のスタイル・役割を持つclass）につかう。
js_class-namejsセレクタにつかう。

layout（レイアウト）

layoutは共通化できる、大きな「枠」専用のグループです。

このグループは原則として、widthやmarginやpaddingなどのようなレイアウトに関わるスタイリングのみ行います。

例を挙げるなら、コンテンツごとの上下のpaddingや、コンテンツ幅のwidth, marginに対して当てます。

/* コンテンツごとの上下の余白の例 */
.l_contents-wrapper {
	padding: 120px 0;
}

/* コンテンツ幅の例 */
.l_container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	width: 92%;
}

headerやfooterは少し例外として、全てlayoutとして扱います。

そのため、「ヘッダーの背景色は黒」など「枠」と「あしらい」が結びついている場合は、必要に応じてレイアウト（余白や横幅）以外のスタイリングを行うことは問題ありません。

 

module（モジュール）

moduleとは、どこでも使いまわせるパーツのグループです。

このグループは基本的に、レイアウトに関わるスタイリングは行いません。

<div class="single_main_meta">
	<div class="m_meta">
		<time class="m_meta_date">2021.06.05</time>
		<a href="category.html" class="m_meta_cat">SEO</a>
	</div>
	<!-- /.m_meta -->
</div>
/* モジュールの例 */
.m_meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m_meta_date {
  color: #aaa;
  font-size: 12px;
  font-weight: bold;
}
.m_meta_cat {
  color: #008db7;
  font-size: 12px;
  font-weight: bold;
  width: 116px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #008db7;
  border-radius: 5px;
}

/* レイアウトを分担させている例 */
.single_main_meta {
  margin-top: 16px;
}

教材ではわかりやすくするために、widthなどのレイアウトを指定しているモジュールもあります。

拡張性を考えると、レイアウトに関することはMixを使ったり、親要素に依存すると良いです。

 

utility（ユーティリティ）

utilityとは、基本的にclass名がそのまま、CSSのプロパティ名と値を表現しているもののグループです。名前の付け方はEmmetを参考にすることが多いです。

また、このグループは、Web制作では補助的に使われることがあります。
例えば以下の例は、上に10pxのmarginを付けたい箇所に使い回したいときのクラス名です。

/* 「.u_プロパティ-値」の順で指定している */
.u_mt-10 {
  margin-top: 10px;
}

教材でも補助的に使っており、別箇所で使う際にも使えるような書き方になっています。

ユーティリティクラスは、同じスタイルを高頻度で使い回すWebサイトのデザインや、Web開発で主に使われます。

その他CSS設計を意識した書き方

ここまで扱った命名規則はCSS設計の代表的な方法の一つであり、他にもよいCSSを書くために気をつけることがあります。

詳細度をあげないこと

良いCSSを書くためには、セレクタの詳細度をコントロールする必要があります。

例えば、次のようなスタイルの指定をむやみに行うと、破綻が起きたり改修段階で不要なコストがかかります。

/* 同じ「!important」でしか上書きができなくなる */
.example {
  color: red !important;
}

/* 上書きしづらい + 使いまわせない */
#about {
 /* #aboutに対して与えるスタイル */
  color: red;
}

基本的にはclassセレクタで同じ詳細度で書いてあげることを意識しましょう。

もちろん、「スタイルの上書き」を意図して詳細度をあげる場合は、問題ありません。ただし、何も意図せずに詳細度をあげる書き方を頻繁におこなうことは避けましょう。

使っても大きな問題がないのは、擬似クラスを使う場合や、プラグインで付与されるスタイルを打ち消す時などですね。

 

回避方法

どうしてもidセレクタを使わなければならない時は、次のような書き方で、詳細度をあげることを回避できます。

[id='about'] {
 /* #aboutに対して与えるスタイル */
  color: red;
}

デザイン依存の命名を避ける

命名方法で、次のように「見た目からつける」というのは避けた方が良いです。

:root {
  --yellow-color: yellow;
  --blue-color: blue;
}

.class-name__color-red {
  color: red;
}

このように書いてしまうと、値が変わった時に名前まで変更しなければなりません。名前を変更しなければ予測しづらいコードになりますし、名前も変更が必要となると、保守性に欠けます。

なので、次のように「意味や役割からつける」方法がおすすめです。

/* 変数の命名も役割からつける */
:root {
  --primary-color: yellow;
  --accent-color: blue;
}

/* 警告用の色として扱う */
.class-name__warning {
  color: red;
}

教材では、色変数でblack, white, grayがありますが、無彩色（白・黒・グレー）かそれに近い色は色自体が役割となっているので、例外としてそのままつけています。

CSS設計を学んでいく

ここまで細かく解説してきましたが、ここに書いてあることがCSS設計の全てではありません。

規模やサイトの種類によって、適切なCSS設計は変わりますし、現場によっては複数の手法は変わってきます。本記事ではCSS設計の考え方を学んでいただいて、他の記事や意見を見ながらCSS設計の根本の考え方とテクニックを身につけていってください。

また、初めから完璧を目指さず、書いていく中でブラッシュアップする方式で学んでいってもらえれば良いと思います。

最後に、より理解を深めてもらいたいので、参考になる記事を紹介させていただきます。

CSS設計を作っていく上での考え方の参考

CSS設計において特に大切にしている思想をまとめてみた

別角度からのCSS設計の基礎

【初心者向け】模写修行流CSS設計を紹介！ | 模写修行メディア

僕がCSSを書く際に必ず意識している CSSのコーディングルール30条｜TAK / Web Creator.｜note

CSS設計手法

他にも、OOCSSやSMACSSなど、いろいろありますが、基本的に目指しているのは「良いCSSを書くこと」なので、似た内容だったり、それぞれ合体させた手法だったりします。

勉強してみるととても奥が深く、合理的なのでぜひいろいろ調べてみてください。

まとめ

さまざまなことを説明しましたが、ここでのポイントは以下です。

  • BEMの基本的な書き方
  • 接頭辞layoutは大きな枠やheader/footerに使用する
  • 接頭辞moduleは、ページ関係なく使いまわされているパーツに使用する
  • 接頭辞utilityは、moduleよりも小さく部分的に共通スタイルをつける箇所に使用できる（余白・表示非表示など）
  • CSS設計では、詳細度やデザインに依存した命名にも注意する

あとは実際に書いていくことが一番なので、アウトプットしながら身につけていきましょう！

\ 学んだことをSNSでシェアしよう /

FacBook
Twitter
LINE
はてブ
PPocket

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

あなたの目的に合わせた２つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

記事のアイキャッチ画像

完全無料！30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

記事のアイキャッチ画像

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから