メンバーサイトテスト
未経験からコーダーとして仕事をし始めて2年が経過しました。
最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。
自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。
デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。
この記事の前
[groups_login]
[groups_member group=”labomember”]
コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません…。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい内容になっているかもしれません。
仕事でコーディングしたことあったり、CSS設計の概念が理解できている方でしたら、ちょうど読めるコンテンツになっている気がします。
また、コーディングに対する考え方がメインになっていて、具体的な手法はほぼ紹介していません。なので、こういう考え方もあるんだなって感じで読んでもらって、良さそうなところがあれば取り入れてもらえたらと思います。!
基本的に紹介しているサンプルコードは、要素を標準化するリセットCSSが当たっていることが前提となっています。
用語
コンポーネントという言葉がたくさん出てくるかと思いますが、ホームページ内で使いまわしできるパーツの1単位といった感じで捉えてもらえたらと思います。
コーディングにおける保守しやすいとは？
コーディングにおける保守性の話は基本的にはCSSの保守と捉えても差し支えないほどにCSSの割合が高いです。
そんなCSSの保守のしやすさを表す指標として、「予測できる」「再利用できる」「保守できる」「拡張できる」の高さが挙げられます。
参考：https://philipwalton.com/articles/css-architecture/
- 予測できる・・・クラス名からどういった振る舞いをするかが想像できる
- 再利用できる・・・他の場所でも同じよう使いまわしできるパーツがある
- 保守できる・・・要素を追加・削除した際に他の要素に影響を及ぼさない
- 拡張できる・・・誰が携わっても同一の品質でコーディングできる
これらがベースとなり、CSS設計であったり、クラス名のルールが決められていたりするわけですね。個人的には再利用性を重要視していて、使い回しのしやすいコンポーネントが多くかつ参照しやすくなっていればいるほど、他の人が携わっても管理しやすいホームページになると思っています。
使い回せることが正義
コンポーネントはどこに配置しても影響を与えない粒度で設計してあげます。影響を与えないためには、
- 幅や高さを持たせない
- 外側に余白を持たせない
- 要素タグに影響されない
主にはこの3つの考え方が重要になってきます。!
コンポーネントはボタンや見出しなど、1つのパーツの単位ということで捉えてください。
幅や高さを持たせない
コンポーネントを作成したページでは、2行だったテキストが、他のページだと3行になるケースも往々にしてあります。その場合に高さや幅が固定されていると、文字がはみ出てしまったり、コンポーネントが崩れてしまうといった可能性が出てきてしまいます。
幅や高さは中の要素によって柔軟に変更できるように設計しておくことで、使われ方によって影響を受けない再利用性の高いコンポーネントにすることができます。https://codepen.io/haniwaman/embed/RwGNRQz?default-tab=css%2Cresult&embed-version=2
外側に余白を持たせない
コンポーネントの外側に余白をもたせてしまうと、他のページで余白なしで使いたいときに打ち消す作業が必要になってきます。基本的にコンポーネントは拡張することはあっても打ち消すことはない粒度で設計するのが好ましいです。
どこに顔を出しても悪影響を及ぼさないコンポーネントにするためにコンポーネント自体の外側には余白を持たせないように設計しましょう。
以下のコードで仮にボタン自体にmargin-top: 32px;としてしまってはサンプルに書いたような16ｐｘでの表現が難しくなってしまいますよね。なのでコンポーネント自体に外側の余白に対する主張は持たせず、利用側で決めるようにしましょう。
[/groups_member]
[groups_logout]
