これまでcssのクラスをどのように付けるか、迷われたことはありませんか？
私は普段は、webデザインからコーディング、ワードプレス化など幅広くお仕事しています。

担当は、基本的にはフロントエンドです。

元々はwebとは関係のない仕事に就いていましたが、スクールに半年ほど通いweb制作の方へ転職しました。

私が、これまでお手伝いした案件を通して、コーディングに際して自分なりに考えた設計ルールを書いておきます。

今回は以下の簡単なデザインカンプを例にして解説していきます。
ちなみにデザイン時の使用ソフトはadobe XDです。

ファーストビューにヘッダーとメインビジュアルがあり、最初にそのwebサイトやサービスについて説明をするセクション、最後にお問いわせへの誘導を設置しています。webサイトとしては必要な部分はかなり省略していますが一般的なレイアウトではないでしょうか。

デザイン時に気をつけている事

現在はデザインとコーディングの両方を担当する案件が多いため、自分ならどうコーディングをするかを事前に考えながらデザインに入るようにしています。

Wordpress案件ではbootstrapを使用することを考え、グリッドシステムを意識してデザインを作成します。
一般企業さんのサイトは、デザインの自由度が高く時間のかかるPCの方から着手するようにしていますが、並行してなるべくレスポンシブ時に複雑な作業が生まれないか、なども考えながら作成します。

見出し、色、テキストの集まりなどは統一感を持たせるようにしています。これは視覚的にまとまりを持たせる他に、コーディングでもパーツとして使いまわしやすいようにする為です。詳細は後述します。

コーディング

予め、どのようにセクションが別れているか、パーツをどの単位で分割するかなどを考えながら、以下のような図を作成します。

下図はXDでデザインカンプにメモを記入していますが、実際は紙に書いて整理しています。

今回はwebサイトやサービスについて説明をする「webサイトの導入部分(固定的な内容でよくあるaboutやconceptなど)」を例にします。

コードはこのような感じです。

個人的には大まかな配置の場合、bootstrapのクラスを利用しディティールについては併せて固有のclass名を付与しスタイルをつけます。

bootstrapをあまり知らない方に簡単に説明すると、bootstrapでは「.container」というインナー幅の役目があるdivの中に、「.row」というflexboxのラッパーの役目があるdivを入れ、その中にさらに「.col-〇〇」という名前のdivを入れる事で、簡単にレスポンシブ対応ができるようになります。

「.row」の中は12分割されており、その中の「col-〇〇」の〇〇の数字部分を変更する事で細かくカラム数を調整する事ができます。

あらかじめbootstrapで指定されているclass名にスタイルがつけられているので、html側でclassをつけるだけで簡単なレイアウトならすぐ組めるようになります。学習コストは比較的高いと思いますがグリッドシステムだけでも覚えたら取り入れやすいのでは無いでしょうか。

命名規則

bootstrapと被らないよう配慮しつつユニークなクラス名を考えるのは時間がかかるため、BEMに似た要領でクラス名を決めていきます。

例えば上のコードですと「.about_info」となっているclassはBEMに則れば「.about__info」となるかと思いますが、案件ではsassを使わない為自分なりにコーディングしやすい名前をつけています。

基本的には「section名(about)_sectuonの中での役割(info)-差分など」を基準に名前をつけています。

CSS設計について

先ほどの図では、テキスト群が入っている左側の「.col-md-6」のdivの中に、更に「textBox」というclass名のdivを入れています。(薄いブルーで覆われている部分です)

この見出し・キャッチコピーを含めたテキスト群のデザインが、このabout内だけであれば「about__textBox」というclass名をつけていたのですが、このようなテキストの集合体は、ほかのセクションでも同じスタイル（font-size、font-family、letter-spacingなど）を使い回す事があると思います。

そのため、そのコンテンツ自体を表わす言葉をclass名としてブロック部分につける事で、section名のような大きな要素に依存せずに色々な場所で使い回ししやすいようにしました。

また、他の人との共同作業が発生したり、後からスタイルを細かく変えたい時の為に些細なpタグやspanタグなどにもclass名を付与しています。

例えば「.textBox」の中にはh2が1つとpが2つありますが、pはそれぞれスタイルが異なります。
そのためキャッチコピー部分に該当するpには「-catch」、文章部分に該当するpには「-text」というclassをつけ、それぞれスタイルをつけました。

これで下のcontactのセクションでも「infoBox」というdivの中身をそのまま使いまわすことができます。contactセクションではキャッチコピーはなく文章しかないので、「-text」のクラスがついてるpだけを「.infoBox」の中に入れています。

終わりに

今回はセクションが2つしかないため簡素な説明となりましたが、基本的には上記のようにパーツ作りなどを最初にし、下層ページではほとんどclassを使いまわせるように考えながらデザイン・コーディングを行っています。
勿論デザインによっては無理矢理使いまわそうとすると逆にコーディングが複雑になる場合もあるので、あまり効率にとらわれず状況に応じてパーツを使い分けることも必要だと思います。

CSS設計については毎回「こうしておけばもっとよかったな」という反省点が出てくるので、そういう気づきを次回の案件で生かせる事ができるように気をつけています。