Bootstrap v4で追加されたRebootというスタイルシートを見てみる

UI開発者 郡司

CSS設計を行うとき、各ブラウザ上にデフォルトで指定されているスタイルを初期化するリセットCSS、初期化ではなくノーマライズするノーマライズCSSを始めに適用するのがベターな方法かと思います。そこから、デザインにあわせてサイトのベースとなるスタイルを上書きする、あるいはリセットCSSないしノーマライズCSSにミックスするなど、人それぞれの方法でサイト全体のベースとなるスタイルを定義するでしょう。

HTML/CSSフレームワークとして人気のBootstrapから、v4のAlpha版公開から約2年の月日を経て、2017年8月10日にBeta版が公開されました。その主要な変更点の中に以下の項目があります。

「Normalize.cssをフォークし、Rebootという名の新しいスタイルシートで独自のスタイルを定義しました」

このRebootと言う名の独自のスタイルはAlpha版からありましたが、Beta版がリリースされたこともあり、今回はNormalize.css_reboot.scssを比較してRebootで追加されたスタイルの中で特徴的な違いを以下に列挙します。

Normalize.cssと比較するとrem単位の使用や、フォーム要素のtype属性を使ったスタイル指定の多さなどが目立ちました。個人的に印象に残ったのは、各ブラウザ固有スタイルへの調整がNormalize.cssよりも多く適用されていたり、DOMがJavaScriptで変更されることを想定したスタイル指定がされていたことです。

Bootstrapに合わせてカスタマイズされたスタイル指定の手法は、新規サイトを構築する際にも進んで取り入れたい内容と感じました。 これを期に自分のCSS設計の指針と照らし合わせ、CSSフレームワークの思想を取り入れた独自のリセットCSS、ノーマライズCSSなどを検討してみても面白いのではないでしょうか。