先ほど、コードのリファクタリングが終わりました。

「リファクタリング」とは何でしょう？

私は「CSS設計の教科書」っていう本の中で初めて出会いました。
その本の注釈によると、「コードを整理する」って意味らしいです。

今回、私はちゃんとコードを整理してなかったため、とんでもなく時間がかかってしまいました・・・w

どうやら、整理しているつもりだったんだけど、途中途中で変数をコロコロ変えてしまったことが原因のようです。変数名のつけ方にも一貫性がなくて、どこに何が書いてあるのか、何を表しているのかがぱっと見てわからなくなってしまったんですね。自分が書いたのにw

整理し終わった時、さすがにこのリファクタリングの時間はもったいないなぁと思いました・・・。

これからは、リファクタリングになるべく時間をかけないようにしたいですね！

しっかり変数の決め方やスコープの決め方、クラスの決め方などのルールを作っておきたいと思います！

[TIPS] Three Rules

直訳すると、「３の法則」・・・ですね。
とあるプログラマーさんはこんなことを言っているようです。

「同じような法則が3回でてきたら、コードをまとめよ！」

例えば、ボタンの装飾を思い浮かべてみましょう。
ボタンを装飾するときに最低限使うCSSプロパティって、

• display
• padding
• border

・・・ですよね？

必ず使うとわかっているCSSプロパティのセットは、
HTMLファイルにタグを書く前に、
CSSファイルに記載しておきましょうね！
っていうのが、CSSの設計を考える上で理にかなっているらしいです。

つまり、そのほうが効率的に書けるよ！
ボタンを装飾する時に、何回もdisplay、padding、borderを書く必要ないよ！
この3つのCSSプロパティを「.btn」っていうクラス名として、CSSファイルにまとめて書いておこうよ！
HTMLファイルにボタンのタグを書く度に、「.btn」ってクラスを付けてあげてみて！
CSSファイルのコードの量が減らせるよ！

って言っているわけです。

しかし、一方でこうも言っています。

「最初からそれをやるのは危険すぎるぜ。
とりあえず、HTMLファイルにタグを書け。
そして、CSSファイルにコードを書いて、装飾していけ。
3つ目のボタンのを装飾する時、display、padding、borderを使ったのは、これで3回目か？
なら、その3つのCSSプロパティをCSSファイルにルールセットとしてまとめておけ。クラス名は「.btn」だぞ。
HTMLファイルに書いたボタンタグのクラス名を全部「.btn」にしろ！」

要は、CSSファイルで同じ記述が3回出てきたらリファクタリングしてね！って言ってます。

どうせ最初からルールセットを作っても、そのルールは壊れちゃう可能性が高いかららしいです。

私のような右も左もわからないペーペーはそんな大規模なWebサイトは1人で作りませんので、
そもそもリファクタリングどころか、全消しで一から再構築しても全然余裕なくらいだと思いますwww

けど、こういったベテランさんたちの慣習的なものは身につけておいて損はないのかなって思います！