コードのリファクタリング

コース

ベーシック

学習領域

HTML/CSS

3 more properties

授業内でのゴール

よいCSSの考え方を知る

CSS設計に基づいた、クラス名のつけ方を知る

CSS変数を使えるようになる

リファクタリングをおこなう

学ぶこと・授業の流れ

CSS設計について

良いCSSとは

CSS設計とは

BEMについて

リファクタリングとは

演習-1：CSS変数を使う

接頭辞について

演習-2：BEM＋接頭辞をつけてクラスを整理する

改修してみる

※ 学ぶことの詳細は下記！

1. CSS設計について

☑︎ 良いCSSとは

⭕️ 良いCSSの特徴4つ

☑︎ CSS設計とは

「良いCSS」を書くための考え方に基づいたルール

【今回使用するZeroPlus教材でのルール】

☑︎ BEMについて

CSS設計の一つ。クラス名を「Block, Element, Modifier」に分けて記述する方法。

Block

Element

Modifier

【+α】命名の参考になる英単語 https://qiita.com/takahirocook/items/01fd723b934e3b38cbbc

☑︎リファクタリングとは

CSS設計の考え方やルールに基づいて、外部の見た目を変化させずに，内部構造を整理するためにコードを書き換えていく作業を「リファクタリング」と呼ぶ。

つまり、Webサイトの見た目を変えずに、綺麗なコードに書き換えるということ。

リファクタリングでやること

ここまでのポイント

よいCSSとはどんなものか

BEMを用いた名前のつけ方

リファクタリングはWebサイトの見た目を変えずに、綺麗なコードに書き換えるということ

2. 演習：CSS変数を使う

値を一覧として見るために、CSS変数を使って値を管理する。

CSS変数について

こちらを利用します

:root {
	/* 色管理用の変数 */
	--white-color: #fff;
	--black-color: #333;
	--gray-color: #e8e8e8;
	--gray-color02: #f7f7f7;
	--gray-color03: #aaa;
	--primary-color: #008db7;
}

:root {
	/* コンテンツ幅管理用の変数 */
	--content-width-sm: 760px;
	--content-width: 840px;
}

:root {
	/* z-index管理用の変数 */
	--z-index-back: -1;
	--z-index-default: 1;
	--z-index-header: 100;
	--z-index-menu: 150;
	--z-index-modal: 200;
}

解説

3. 接頭辞について

BEMでわかりやすくしたクラス名を、更に管理の観点からわかりやすくする頭の飾り。

Layout （l_）

Module（m_）

Utility（u_）

ページ固有のスタイルのクラス名（top_など）

JavaScriptで操作するところ（js_）

ここまでのポイント

接頭辞はBEMの書き方にさらにプラスして、どのような部分なのかわかりやすくするためのもの

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

4. 演習：BEM+接頭辞をつけてclassを整理する

レイアウト（l_）でまとめる

① headerとmainとfooterをレイアウトとして置き換える

模範コード

② コンテンツ幅をレイアウトとして置き換える

模範コード

解説

モジュール（m_）をまとめる

【仕様】

（接頭辞）をつけて書き換えてください。

接頭辞以降はBEMの形式で書いてください。

① ページのタイトルをモジュール化する

模範コード

② 記事をモジュール化する

模範コード

③ ページネーションをモジュール化する

模範コード

ユーティリティ（u_）でまとめる

順番クラス名を書き換えましょう！

【category.html / style.css】 m_page-title_break→u_md-dnに置換

模範コード

独自のページスタイルをまとめる

すべてsingle_にする

模範コード

5. 改修してみる

改修してみる（スタイルの変更）

共通化ができたので、スタイルを変更すると効率的に全てに適用されるようになる

実際に修正依頼がきたことを想定して修正してみましょう！

色を変える

メインカラーをカラーコードを#ff6347に変更したい

header-navの背景色を、footerの背景色と同じにしたい

フォントを変える

トップページ、カテゴリページのタイトルのfont-sizeをSP→28px, PC→36pxにしたい

カテゴリーアイコンの修正

カテゴリーアイコンを、背景色をメインカラーに、文字色を白にしたい

本日のまとめ

良いCSSの特徴4つ

予測しやすい

再利用しやすい

拡張しやすい

保守しやすい

クラス名は「どこの何か」がわかるような命名にすると良い

接頭辞は、一目で、そのクラス名がどんな役割があるのかをわかりやすくするために記述する

CSS変数を使うことによって、色やz-indexなどの管理がしやすくなる