今回はCSSとCSS設計について解説していきたいと思います。

   CSSについて

CSSの基礎知識については下記の記事にて、解説を行っているため

本記事を読む前に一読いただければと思います。

▼webサイトを形作っているもの

https://lediamix.com/journal/cording/web%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e5%bd%a2%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%84%e3%82%8b%e3%82%82%e3%81%ae/

 

CSSを記述すること自体は簡単なのですが、

CSS設計を意識せず、サイトを制作する際には様々な課題に直面します。

• ・各ページに似たようなコンテンツがある場合に流用が出来ない
• ・共通化できるパーツを共通化せずに後々の運用時に大変になる
• ・命名規則の揺れ
• ・将来的な展望がない設計で、管理ができない、煩雑になるなど

 

実際にwebサイトを制作する際に、CSS設計では下記を如何にクリアするかを考えます。

• ・メンテナンス性を如何に向上させるか
• ・大規模なWebサイトでも整ったコードで作れる
• ・複数人でのコーディングが行いやすくする
• ・運用時のコストの低減

 

CSS設計を整えるメリットは上記になります。

次の項ではCSSの設計について解説したいと思います。

 

   CSS設計について

企業やチームによっては色々なCSS設計手法が使われていますが、
体感的によく使われている設計手法は下記の3つです。

• ・BEM
• ・OOCSS
• ・SMACSS
• ・PRECSS

弊社では主に「BEM」を採用し、他には既存サイトの仕様に合わせた手法を取り入れたりします。

 

   CSS設計を学ぶ

CSS設計をこのページに書き連ねてもいいのですが、

独自の思想や弊社のルールが入ってしまうので、書籍を読んでで学ぶのが一番信用性が高く、ルールが整いやすいと思います。

そのため弊社のベースになっている本を紹介します。

 

   現場のプロが本気で教える HTML/CSSデザイン講義

弊社では主に「現場のプロが本気で教える HTML/CSSデザイン講義」を参考に「Sass + BEM」でサイトを構築しております。

初歩的な内容となっているものの、現場でも使える実践集が取り入れられているためおすすめとなっております。

 

https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%AE%E3%83%97%E3%83%AD%E3%81%8C%E6%9C%AC%E6%B0%97%E3%81%A7%E6%95%99%E3%81%88%E3%82%8B-HTML-CSS%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E8%AC%9B%E7%BE%A9-%E6%A3%AE%E6%9C%AC-%E6%81%AD%E5%B9%B3-ebook/dp/B01K3SZGR0

 

   CSS設計完全ガイド

最近出た本で言うと、下記の「CSS設計完全ガイド」をおすすめします。

本書は、CSSの中・上級者向けの内容を詳しく解説した本です。

モジュールベースのコンポーネントやレイアウト、プロジェクトレベルのCSS設計について詳しく解説されています。

著者の半田 惇志さんは「PRECSS」を設計思想を開発した方でもあり、

説明が非常に丁寧でCSSを設計する上で大事な「予測できる、再利用できる、保守できる、拡張できる」部分の解説以外に

class命名の具体性・汎用性・密結合による弊害、疎結合による設計など、

他の書籍で載っていない内容を詳しく説明されていました。

現在読み込んでいる最中ではあるので、しっかり読み込んで現場に反映をしていきたいです。

 

https://www.amazon.co.jp/dp/B0856YMH7L/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

 

サイトの規模によっても様々な手法を取り入れていく必要があり、

今後も様々な設計思想が出てくるかもしれません。

情報は常にアップデートすることを念頭に置いて、弊社WEBチームもスキルを上げていきたいと思います。