ざきの学習帳(旧 zackey推し )

日々の学びを書きます

CSSフレームワークに依存しない手法を学ぶため / 「 CSS設計完全ガイド 」を読んだ

CSS設計完全ガイド 」を読んだ。

本書では、

  • CSS設計の知識を吸収し,フロントエンドエンジニアにステップアップしたいひと
  • 向上心が強く,CSS設計について理解を深めたい初級フロントエンドエンジニア
  • 会社としてCSSのルールを策定したいチームリーダー等の責任者

をターゲットととし、

  • CSSにおけるレイアウト、モディファイアといった種類の紹介
  • BEMやPRECSSなどのCSS設計手法の紹介と実践
  • 「カード、ラベル、ボタン」のような定番レイアウトの設計手法

を学べる。

CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計完全ガイド ~詳細解説+実践的モジュール集

  • 作者:半田 惇志
  • 発売日: 2020/02/27
  • メディア: 単行本(ソフトカバー)

以下から正誤表やサンプルコード、参考記事が参照できる。

本記事では、本書のざっくりとした紹介・学べたことを記載する。

きっかけは「CSSフレームワークに依存しない手法を学ぶため」

今まで携わってきた開発では、BootstrapMaterializeのようなCSSフレームワークを使ってきた。だが、求めているUIにしたい場合、CSSフレームワークに定義されているスタイルをそのまま適用するとはいかず、独自のCSSの定義 or CSSフレームワークのスタイルをラッパーするといった手法が取られてきた。

後者*1の場合、CSSフレームワークがアップデート(クラス名が変更)されたことにより、スタイルが大きく崩れたことも発生したことがある。

このような体験から「フレームワークに依存しないCSS設計」を学習、設計の選択肢を増やすため、本書を手に取った。

本書に触れる

本書を読み始めた目的や参考になったポイントを記載する。

リセットCSSの種類

ブラウザによって独自に定義されているスタイルの誤差をなくすのがリセットCSS。ただ、そのリセットCSSにも以下のような種類があることを理解した。

名称 概要
ハードリセット系 ブラウザ間の差分をなくす HTML5 Reset Stylesheet | HTML5 Doctor
ノーマライズ ブラウザの良い部分を残し、その他差分をなくす Normalize.css: Make browsers render all elements more consistently.

どのような見た目になるかは、w3schools - CSS Layout Flexbox に対し、各代表的なリセットCSSが適用した以下デモを確認してほしい。

適用なし

See the Pen CSS Layout Flexbox - Normal by zucky (@zucky_zakizaki) on CodePen.


ハードリセット系 適用

See the Pen CSS Layout Flexbox - Hard Reset Css by zucky (@zucky_zakizaki) on CodePen.


ノーマライズ系 適用

See the Pen CSS Layout Flexbox - Normalize Css by zucky (@zucky_zakizaki) on CodePen.


PRECSSなどのCSS設計手法の紹介と実践

目から鱗だったのは以下。

  • CSS設計手法(BEM、PRECSS等)が必要となった経緯
  • BEM、PRECSS - Manage your CSS with prefixes.等の紹介
  • BEM、PRECSSを用いた「カード、ラベル、ボタン、etc...」のレシピとその設計指針

PRECSSは、BEMやGoogle HTML/CSS Style GuideをベースしたCSS設計手法。

公式サイトは日本語対応、サンプルコードも記載されている。BEMやPRECSSのような設計手法を学んだこなかった方は、ぜひ以下だけでも一読してほしい。


まとめ

本書から学習したことと、身につけるためのトライを記載する。

学んだこと

  • リセットCSSの存在と活用方法
  • BEM、PRECSSなどのCSS設計手法
  • 「カード、ラベル、ボタン」等の設計指針

実践すること

CSSフレームワークを使用せず、以下のような成果物を作ること。

*1:CSSフレームワークのスタイルをラッパーする