Miobiki

  1. HOME
  2. css
  3. いまさらながらCSSフレームワーク(Bootstrap)便利だなと思っている

いまさらながらCSSフレームワーク(Bootstrap)便利だなと思っている

目次

CSSフレームワークを使って楽できる部分は楽したいです。

フレームワーク利用前

何度も同じスタイル書きたくない

ベースとなるscssのテンプレートは準備していましたが、新規案件ごとにフルスクラッチでスタイル作成してました。
昔は楽しかったですが案件をこなすごとに面白みが減り、今や過去に作ったスタイルは書きたくない病です。

自作フレームワーク作る?

自作フレームワークを作ることを考えましたが、ドキュメント作成などメンテナンスの大変さがネックになると思い断念。

フレームワークと共存

フレームワークを部分的に使って、コンポーネントだけスタイル作成すれば楽になりそうな予感がしました。
特にレイアウト関連(containerやgridレイアウト)とユーティリティが欲しかったです。

Bootstrapを選択

利用するフレームワークはBootstrapを選びました。
一番の理由は自分以外の人も知っている可能性が高いからです。

よかった部分、よさそうな部分

  • 広く使われている
  • 多くの人が知っている
  • ドキュメントがある
  • VSCodeでBootstrapのクラス名補完が出る
  • 必要なもののみimportできる
  • function, mixinを利用できる

具体例

必要なもののみimportできる

コンポーネントは使わないことも多いので大事です。
Importing Precompiled Sassを参考にしつつITCSSの構造に合わせて作ってみました。
https://github.com/nao5151/itcss-bootstrap

function, mixinを利用できる

これは実際は少ないのですが、たとえば$grid-gutter-widthが違うgridレイアウトもほしい場合などに、bootstrapのmixinを使って作成したりもできます。
https://getbootstrap.com/docs/4.1/layout/grid/#mixins を参考にします。

$grid-gutter-width: 100px;

.items {
  @include make-row();
  
  &__item {
    @include make-col-ready();
    @include make-col(4);
  }
}
<div class="container-fluid">
  <div class="container">
    <section class="py-4">
      <h2 class="text-center">.row</h2>
      <p class="text-center small"><code>$grid-gutter-width: 30px;</code></p>
      <div class="row">
        <div class="col">
          <div class="bg-primary text-center text-white p-4">
            .col
          </div>
        </div>
        <div class="col">
          <div class="bg-primary text-center text-white p-4">
            .col
          </div>
        </div>
        <div class="col">
          <div class="bg-primary text-center text-white p-4">
            .col
          </div>
        </div>
      </div>
    </section>
    <section class="py-4">
      <h2 class="text-center">.items</h2>
      <p class="text-center small"><code>$grid-gutter-width: 100px;</code></p>
      <div class="items">
        <div class="items__item">
          <div class="bg-primary text-center text-white p-4">
            .items__item
          </div>
        </div>
        <div class="items__item">
          <div class="bg-primary text-center text-white p-4">
            .items__item
          </div>
        </div>
        <div class="items__item">
          <div class="bg-primary text-center text-white p-4">
            .items__item
          </di>
        </div>
      </div>
    </section>
  </div>
</div>

screenshot

そうするとこのように、行間が違うgridレイアウトを簡単に準備することができます。

改善したい部分

命名規則を採用ルールに寄せれたらなと思います。
例えば、ECSSを採用した時には.nsp-Component_ChildNodeの命名規則から外れないようにしたいです。
BootstrapをECSSに寄せて.bs-Button-primary的な感じにできたらいいのですが。

今の所、新規で書く時は採用ルールに則ると心に決めるのですが、すでに違うものが存在しているし、急いでるからといいか思ってしまいます…
mixinを覚えたらできたりするかもしれませんが、それやると面倒くさそう。

まとめ

うまくフレームワークを使うことで、他の部分に時間を割いていきたいです。(スタイル楽してJSを書いていたい)
Bootstrapはまだまだ知らないコンポーネントも多いので知見をためていきたいです。

理念に共感してるTailwind CSSもそのうち触ってみようかなと思います。