Bootstrap依存症から抜け出せない

Bootstrapを使ってかれこれ5年になりますが、その間に大小さまざまなCSSフレームワークが生まれました。
その中にはグリッドシステムなどがBootstrapと同じクラス名で構成されており、移行が容易と思われるものもあります。
また、FlexboxはBootstrapはVer.4から対応していますが後発組ということもあり、最新技術をガンガン取り入れているCSSフレームワークに目移りしてしまうことも事実です。

mini.css - Minimal, responsive, style-agnostic CSS framework

• [Web制作]

IE非対応でEdgeはposition:stickyなど一部未実装という点を考慮する必要はあるけど、グリッドレイアウトなどBootstrapと似たクラス名で使いやすそうなので乗り換えようと思った。ただパンくずリストが微妙。

2017/10/07 08:39

mini.cssという軽量CSSフレームワークをここ数日ドキュメントを眺めて少しいじってみたのですが、ヘッダーのナビゲーションバーがPC用とモバイル用を切り替えるタイプなので二重に書く必要があって、なんだかなぁ～って感じなんですよ。

<!-- http://minicss.org/ より抜粋 -->
<h1 id="top-heading">
	<span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini
	<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span>
</h1>
（中略）
<!-- ナビゲーションバー（PC用） -->
<header class="sticky">
	<a href="index" class="logo">
		<span id="header-logo">m</span>
	</a>
	<label class="drawer-toggle button" for="navigation-toggle"></label>
	<a href="index" class="button hidden-sm">Introduction</a>
	<a href="modules" class="button hidden-sm">Modules</a>
	<a href="flavors" class="button hidden-sm">Flavors</a>
	<a href="templates" class="button hidden-sm">Templates</a>
	<a href="customization" class="button hidden-sm">Customization</a>
	<a href="quick_reference" class="button hidden-sm">Quick Reference</a>
	<a href="https://github.com/Chalarangelo/mini.css" class="button">
		<i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>
		&nbsp;Github
	</a>
</header>
<!-- ナビゲーションバー（モバイル用） -->
<input type="checkbox" id="navigation-toggle">
<nav class="drawer hidden-md hidden-lg">
	<label class="close" for="navigation-toggle"></label>
	<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
	<a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
	<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
	<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
	<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
	<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>

モバイル用メニューの文字を太く大きくするために<h4>を使っているのもセマンティックじゃない感じで気になりますが、Webフォントを使うときインラインに書かないと適用されないというのもなんだかなぁ～って感じです。

結局、どんなに個々のモジュールやサンプルサイトのつくりがよくても、思い通りのサイトを作れるようになるまでの手間が、どんどんやる気を削いでいってしまうのです。
熱しやすく冷めやすい性格ですから、鉄は熱いうちに打ってしまいたいのですが…

こうしてのっけからつまづくと、結局慣れ親しんだBootstrapに戻ってしまうため、なかなか他のCSSフレームワークを使いこなすことが出来ないというジレンマが起きるわけです。
CSSフレームワークの本来の目的としては、機能を熟知して使いこなすことでコーディングのスピードアップが出来ているのですからよいことなのでしょうけど、はたしてこのままBootstrapに依存したままでいいのか？という不安もつきまとうんですよねぇ…