Bootstrapの設計

Tag:

Bootstrapをカスタマイズするために知っておきたいBootstrapの設計について取り上げます。

CSSの設計知識

Bootstrapの設計について調べる前に、CSS設計についてどういった考え方があるのか取り上げます。CSSの設計といえば、以下の本が有名です。


この本の中で、「どのように部品間の関心を分離をさせるか」という課題を解決するために著明な開発者が考えた設計(アイデア)がまとめられています。

SMACSS

カテゴライズ、命名規則といったアイデアが取り入れられている。

BEM

コンポーネントをさらに次のように分類して命名規則をつけるというアイデアが取り入れられている。
・Element(Blockの構成要素)
・Modifier(BlockまたはElementのバリエーション違い)

※MindBEMding
Element アンダースコア2つ(alert__title)
Modifier ハイフン2つ(alert--warning)

MCSS

レイヤー(カテゴリ間にルールがあるもの)というアイデアが取り入れられている。

著者が作成しているFLOCSSの構成

Foundation – reset/normalize/base…
Layout – header/main/sidebar/footer…
Object
・a. Componnent – grid/button/form/media…
・b. Project – articles/ranking/promo…
・c. Utility – clearfix/display/margin…

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 p.88

設計方法によって、「コンポーネントの分類方法」や「命名規則」があるようです。

Bootstrapの設計

Bootstrapは、どのようにコンポーネントを分類しているのか、命名規則を持っているのかについてみてみます。

コンポーネントの分類

「bootstrap-4.0.0-alpha.5」のソースファイルをダウンロードして、scssフォルダの中をみてみます。

mixins/
utilities/
.scss-lint.yml
_alert.scss
_animation.scss
_breadcrumb.scss
_button-group.scss
_buttons.scss
_card.scss
_carousel.scss
_close.scss
_code.scss
_custom.scss
_custom-forms.scss
_dropdown.scss
_forms.scss
_grid.scss
_images.scss
_input-group.scss
_jumbotron.scss
_list-group.scss
_media.scss
_mixins.scss
_modal.scss
_nav.scss
_navbar.scss
_normalize.scss
_pagination.scss
_popover.scss
_print.scss
_progress.scss
_reboot.scss
_responsive-embed.scss
_tables.scss
_tags.scss
_tooltip.scss
_type.scss
_utilities.scss
_variables.scss
bootstrap.scss
bootstrap-flex.scss
bootstrap-grid.scss
bootstrap-reboot.scss

この中の「bootstrap.scss」にて、以下のように各種ファイルをimportしています。

/*!
 * Bootstrap v4.0.0-alpha.5 (https://getbootstrap.com)
 * Copyright 2011-2016 The Bootstrap Authors
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "custom";
@import "variables";
@import "mixins";

// Reset and dependencies
@import "normalize";
@import "print";

// Core CSS
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";

// Components
@import "animation";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "tags";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "responsive-embed";
@import "close";

// Components w/ JavaScript
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";

// Utility classes
@import "utilities";
13~15行目
FLOCSSでいう「Foundation」のような役割を持っています。
17~51行目
FLOCSSでいう「Componnent」「Project」のような役割を持っています。
53~55行目
FLOCSSでいう「Utility」のような役割を持っています。「_utilities.scss」ではさらに、以下のようにファイルをimportしています。

@import "utilities/align";
@import "utilities/background";
@import "utilities/borders";
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/float";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";

命名規則

navコンポーネントについてみてみます。

ベースとなるコンポーネント:nav
Modifier:nav-tabs、nav-pills、nav-inline、nav-stacked
Element:nav-item、nav-link

Bootstrapでは、ModifierやElementを命名規則で区別するようなことは行っておらず、すべてハイフン1つだけで区切っているようです。また、マルチクラスと呼ばれるアプローチを採用しているようです。

シングルクラス:単一のクラスで1つのスタイルを完成させる
マルチクラス:複数のクラスを組み合わせて1つのスタイルを完成させる(nav-pillsとnav-stackedを組み合わせる)

スポンサーリンク