CSS設計について - 新米エンジニアの備忘録

こんにちは。初めての記事です。現在都内のWeb制作会社でフロントエンドエンジニアとしてアルバイトをしている大学生です。

今回、あるWebサービスの新しいページのコーディングのCSS設計について勉強することになったのでアウトプットも兼ねてこの記事を書きたいと思います。

この記事はまだHTMLやCSSを学び始めたばかりという人向けではなく、CSSをしばらく書いてきているけど、クラスの命名規則やモジュール化などそろそろ考えたいなという中級者向けの記事です。ご了承ください。

・予測しやすい

・再利用しやすい

・保守しやすい

・拡張しやすい

この4点について詳しく書いてみると、

ここでの予測しやすいは自分で書いた通り、思った通りに動くかどうか。個人的には、クラス名を見たら大体どこの部分、モジュールなのか分かるとさらに予測しやすいなと思います。

例えば、ページが増えて、他のページと同じようなレイアウトやデザインだったとき、その他のページのレイアウトのCSSが使える＝再利用しやすいということです。

・保守しやすい

新しいページやコンポーネント（部品）を増やすとき、既存のもののルールを変えなくていいようにします。

　-自分以外の開発者がメンテナンス、管理しやすいこと

　-サイトの規模が大きくなるにつれてCSS設計が拡張しやすいこと

　-他の開発者が加わるときもCSS設計の学習コストが低いものであること

つまり、開発したひと以外のひとがプロジェクトに入ってCSSを修正するときに、CSSの修正がしやすかったり、既存にあるものを再利用できたり、けれども既存のものを変更したりしなくてよく、かつ分かりやすい設計であることと捉えることができます。

それでは、次にそのCSS設計について、代表的なCSSの設計手法について見ていきましょう。

-OOCSS
-SMACCS
-BEM
-MCSS
-FLOCSS

有名なところだとこのようなCSS設計手法があります。それぞれにメリットやデメリットがあり、受託サイト制作やWebサービスなど何を作るか、何の目的を持って作るか、運用をするのかという面などいろいろと条件があるなかでは、どれを使うのが一番いいのかという答えはないと思います。

少し長くなりそうなので、各設計手法の詳細については次回書きたいと思います。

こちらの本を参考にさせていただきました！