CSSにおける変数について思ったこと

はじめに

2020年10月～2022年2月、とんで、2022年9月くらいから、WordPressの勉強をしています。
と言っても、WordPressに入る前に、HTML/CSSをある程度理解しておきたくて（自分に対して、揺らがない知識の土台が欲しかった）WordPressを本格的に触る前の段階で、1年以上、FLOCSSに基づいたCSS設計で、Sassを使ったコーディングを行っていました。

その学習期間を経て、継続してきて、思ったことや感じたことを綴っていきます。

変数定義

FLOCSSでコーディングしていると、foundationの中に、_mixin.scssや_variable.scssというファイルを作りませんか？
私は、変数関係を全てこのファイルの中で定義するのですが、学習を開始した初期の段階で、クラス名についてかなり悩みました。

例えば、ブレイクポイント。レスポンシブの際に、設定します。

breakpoint-pc
breakpoint-tab
breakpoint-sp

2021年頃の当時は、このように、pc、tab、spといった単語をよく見かけました。
でも、私はそこに対してすごく違和感を覚えまして。。
PCでも窓を小さくすれば、sp表示になるのにな。
それとも、端末で判別するためのあえての命名なのだろうか？
そんな細かいところが気になって仕方なく、結果、色々な記事を読み漁り、某コミュニティで質問までした記憶があります(笑)

結局、私が普段使うことになったブレイクポイントに関するmixinは。こちら。

/* モバイルファースト */
@mixin breakpoint( $breakpoint ) {
	@if $breakpoint == breakpoint-medium{
		@media ( min-width : 834px ){
			@content;
		}
	}
	@if $breakpoint == breakpoint-large{
		@media ( min-width : 1025px ){
			@content;
		}
	}
}

基本的に、スマホファーストで進めていくので、ブレイクポイントの数字は変わりますが、この2つが多いです。
そんなにたくさんサイトを作ってないので、経験は浅いですが。。
もっとブレイクポイントが増えれば、

breakpoint-extra-small
breakpoint-small
breakpoint-extra-large

という感じで、増やしていくと思います。
服のサイズのように、XS, S, M, L, XLとしてもいいかもしれませんね。
Bootstrapだと、sm, md, lg, xl, xxlといった具合に、デフォルトでブレイクポイントがあるみたいです。
参考元：https://getbootstrap.jp/docs/5.0/layout/breakpoints/

違和感を持ったカラー変数

いきなりいきましょう。例えば、こんな感じの変数を見かけます。

$color-black: #000;
$color-white: #fff;
$color-red: #ff0000;

私、これに関しては、自分のブログ始めたら絶対に触れておきたい！と思っていました(笑)
それくらい、すごく引っかかっていました。

これは変数というより、定数に近いのでは？？？
color-blackには、黒（もしくはそれに近しい色）以外の色を入れることが出来ないですよね。
じゃあ、color-blackを呼び出している場所が10か所あったとして、「やっぱり黒じゃなくて赤に変更してください」って仕様変更があったら…。

何のための変数なのか

仕様変更があった時、color-blackを使用しているところに、いちいちcolor-redと置換していくのでしょうか？
置換して変更になったファイル数が多い時、そのファイルが使用される画面を、またブラウザチェックしていくのでしょうか？
何のために、変数にしたのでしょうか？

色に関しては、デザインカンプがある時点で、何色出てきて、どのような場所にどのような色が設定されているのか、色の設計？を意識しておくと、あとが楽なんじゃないかなと（保守の観点から）感じました。
デザインカンプ自体にも、カラー表みたいなのがあると、「ここの色の設定ってなんだっけ？」となった時に確認しやすいんじゃないかな？とか。

あ、話が逸れました。。
そう、カラーコードの変更があった場合、その変更だけ（極論、1か所だけ）で済んだはずです。
修正箇所が複数あったとしても、ファイルは_variable.scssの1ファイルの修正で済みます。
手間を軽減させるためでもあるのではないのか…（私の思い違いなのか…）
私の手元を離れたコードが誰かの元へたどり着いたときに、出来るだけわかりやすく！を意識して、
なんなら、未来の自分に向けてスムーズにバトンを渡せるように！を意識してコーディングします。
やはり、リリース後に待っているのは保守管理。設計を大事にしているのは、きっと前職のおかげだと思います。

そこで、私は、色の変数名に「black」というような英名をつけないようにしています。
例えば、こんな感じ。

$text-color--main:  #333;
$text-color--sub:  #696969;
$text-color--accent:  #ff7f50;

$background-color--main: #f9f8f5;
// 以下、変数名のみ、例として記載
$background-color--sub
$pcard-background-color--main
$pcard-background-color--sub

黒を、赤に変えたければ、$text-color–mainを#ff0000にするだけでOK！

おわりに

命名には、時間を取られがちです。
でも、ある程度経験を積めば、このファイル自体を他へ流用できるのではないか、と思い、ひな形を作る気持ちで日々模索中です。

おまけ

ところで、ブレイクポイントなのでしょうか、ブレークポイントなのでしょうか。
breakは、ブレイク。brakeは、ブレーキ。

だから私は、ブレイクポイントを採用しています！