テックブログWizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。CSSこんにちは!今年新卒で入社したフロントエンドエンジニアの益田です。研修の中で特に勉強したCSS設計についてお話させていただきます。CSS設計とはまず、CSS設計のポイントとして以下の4つが挙げられます。予測しやすい再利用しやすい保守しやすい拡張しやすいつまり、後々自分や他人が見ても読みやすく改修しやすいCSSを書きましょうと言うことです。CSS設計が必要な理由CSS設計が必要な理由としては、以下の3つが挙げられます。バグを抑えるサイトの寿命を延ばすサイトの改善スピードを速めるHTMLでのマークアップやCSSでのスタイリングは人によって書き方が違い、様々な書き方が出来る為、他人が変更しようとすると難しい部分もあると思います。言った部分を解消して、バグを抑えることや変更しやすいコードを書くことがCSS設計の目的です。4つ次に、主なCSS設計手法を紹介していきます。CSS)オブジェクト指向CSSと言って以下の2つの原則に基づいた設計手法の概念です。・まずは、構造と見た目の分離です。簡単に説明すると位置や文字の大きさなどの構造と、色や見た目に関する部分を分けて書こうと言うことです。以下のコードでは、構造と見た目を分離していない為、ラベルの要素と背景の色が一つのクラス名に書かれています。yellow;}次に、OOCSSを意識したコードの書き方がこちらです。yellow;}ラベルはラベルの要素だけを持ち、背景は別クラスで指定することでラベルが複数ある場合でも追加がしやすく、ブルーのラベルを追加したとしてもCSSの記述は背景色を追加するプロパティを書くだけで完了します。・パーツ(モジュール)の再利用性を高める為の考え方で、ある親要素に依存せず、親要素(コンテナ)から子要素(コンテンツ)を取り出した場合でもきちんと使えるCSSを書こうと言うことです。下のHTMLに対して良いCSSと悪いCSSを書いていきます。</p></div>まずは、ダメな例です。bold;}クラスchildのCSSに余白を付けている為、divからpを取り出した際に余計な余白が付いたままになります。このままではコンテナとコンテンツの分離は出来ていません。次に設計を意識したCSSの書き方がこちらです。bold;}この書き方だと、コンテナとコンテンツの分離ができparentに新しくコンテンツを追加したとしても余白が保たれ変更しやすいコードになっています。分かりにくい方はcodepenでもまとめてましたので見て頂けると良いと思います。CodePen.font-sizeやfont-weghtを持ったまま別コンテナで使用したい場合marginが付く為、その変更が必要になりCSSの記述量が増える。CodePen.font-sizeやfont-weghtを持ったまま別コンテナで使用したい場合marginが付かない為、変更箇所が少なく別コンテナでも使いやすい。以上、ざっくりとOOCSSの考え方について紹介していきました。CSS設計の概念的な部分で、この2つを理解してCSSを書いていくと破綻しにくく変更しやすいコードを書いていけると思います。BEM(MindBEMding)BEMは命名ルールが特徴的な設計手法です。BEMでは、CSSのルールを以下の3種類にカテゴライズする設計手法です。