クラスレスCSS（simple.css）を@importして拡張する
目次
クラスレスCSS（simple.css）を@importして拡張する
CSSは「Bootstrap」・「Bulma」・「Buefy」などのフレームワークを使ってきました。
どれも、かっこいいですし気に入ってたのですが、ふと「フレームワーク」に依存してCSSの基本的なことを忘れかけている自分に気づいて個人で使うのをやめました。
今は「クラスレスCSS」を主に使っています。
クラスレスCSSはファイルサイズも小さく読む気になる＝勉強にもなりますから。
simple.css
2022年8月時点の僕のお気に入りは「simple.css」です。
ここから「simple.css」ファイルを自分のCSSフォルダにコピーすれば使えます。
こちらにホームページがありますが。
ここで優れた点として
- ダークモードへの自動切り替え
- 完全なレスポンシブ
- 標準的なHTML要素をフォーマットする賢明なデフォルト。
- 4KB以下の超軽量サイズ。
などをうたってます。
僕としてはデフォルトの見栄えの良さと、クラスレスフレームワークでフルレスポンシブ対応という点が特に気に入ってます。
simple.cssを@importして拡張する
simple.cssのデフォルトでほぼほぼ良いのですが、僕的にちょっとだけ修正したい点がないわけではありません。
例えば、このあたり。
テキストボックスとかラジオボタンの入力域の枠線の色が、僕の好みからすると薄すぎるので、ここは黒でくっきりとしたいのです。
simple.cssの定義を見ると
textarea,
select,
input {
font-size: inherit;
font-family: inherit;
padding: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 5px;
box-shadow: none;
max-width: 100%;
display: inline-block;
}
とあり、色は「--border」で、実際の色は「--border: #666;」と定義されてます。
だからといって、この色を直接書きかえるのはスマートではありません。
そういう癖をつけると、結局あとで泣くのは自分です。
@importして拡張する
こういう時に便利なのが「@import」です。
やり方は簡単で、別のCSSファイルを用意して、以下のように書くだけです。
@import url("simple.css");
textarea,
select,
input {
border: 1px solid black;
}
そう。
同じcssフォルダにある「simple.css」をインポートして、変更したいborderの色だけ上書きしてやります。
これで修正したCSSを適当な名前で保存して、それを読み込むようにします。
すると。
枠がくっきりして僕好みになりました。
クラスレスCSSはファイルが小さいので読む気になりますし、内容が理解できれば、このような感じで気になる部分だけ手をいれて自分好みにすることも簡単です。
インポートを使っておけばバージョンアップとかにも対応できますし、CSSの勉強にもなります。
ではでは。
