一人で完結する仕事が多いときはあまり感じられなかったのですが、
チームで大規模なサイトを制作するときや、お客様に制作サイトを渡して作業してもらうような
多くの人と関わるサイト制作では、コーディングの奥深さをとても感じられるようになります。
自分が設計したものを他の人に渡したときに、わかりにくかったり触りづらかったりしないように、あれこれ考えなければなりません。
そこで先輩から学んだ「設計方法ガイド」を元にcss設計の理解を深め、また現在のトレンドも考慮しつつ自分なりに理想的なcss設計を考察していこうと思います。
■CSS設計におけるルール
css設計する上でこれは守りたい、目指したいというルールです。
css設計の基礎知識であり、css設計はこれらを目的としているといえます。
・予測しやすい
・再利用しやすい
・メンテナンスしやすい
・スケールしやすい
■予測しやすい
チーム開発において、非常に重要な要素でもあるのが、コードが予測しやすこと。
これは、そのままの意味でCSSコードが予測した通りに動いてくれることを意味しています。
複雑なサイトになればなるほど、CSSも複雑化し、思い通りに機能してくれなかったり、コード同士が悪影響を及ぼす場合もあります。
そのようなことを避けるためにも、他者が読んで予測しやすいcss、class名を書く必要があります。
メインヴィジュアルの要素なら.mainvisual、記事要素なら.articleや.cardといった、ある程度具体性のあって予測がしやすいネーミングです。
別記事で書きますがコンポーネント思考を取りえれ、具体的過ぎず抽象的すぎないネーミングがいいと思われます。
抽象的すぎないネーミング、というのは最近はユーティリティファースト(※)というcss設計が注目されていますが、
ユーティリティファーストの設計は全classの共有や把握が大変なのと、htmlコードからどこがどの要素なのか、どういったパーツなのか理解しづらい、コンポーネント化するにはreact.js等が必要な為新人エンジニアや他社と連携・共有しづらい、など、私としては使いづらい印象です。
ある程度具体的で予測しやすいネーミングが理想と私は考えます。
そして後述しますが、コンポーネント設計＋ユーティリティ設計の２つを上手く組み合わせる事が効率性や共有性において理想的であると考えます。
※ユーティリティファースト・・・u-fs16で文字サイズ16px、u-boldで太字、など、各スタイルの機能をclass名とし、それらをhtmlコード上で組み合わせることでページを組み上げるというもの。
■再利用しやすい ～使いまわしやすい～
例えば異なる2ページ同士の中に似たようなパーツがあった場合、似たようなcssコードを書く場面が出てきます。
そういった場合、同じようなコードを各ページのcssに書くのではなく、1つのコードをなるべく使いまわせるように(再利用できるように)設計する。
そうすることで必要以上にコードが増えること、記述の手間が増えることを減らそうというルールです。
c-titleやc-thumbnailといったように、コンポーネント思考が大切になってきます。
■メンテナンスしやすい (拡張しやすい)
サイトを制作していると、追加でデザインの修正依頼があったり、制作後も更新案件があったりします。
そういう時には制作者本人が修正するとは限らず、チームの他のメンバーがメンテナンスを行う場合もあります。
そういった場合に、誰がコードをいじっても修正しやすく、また管理しやすいようになっているべきでしょう。
■スケールしやすい ～スケーラブルなcss～
サイトが大規模になればなるほど、複雑になればなるほど、通常より多くのエンジニアが必要になります。
スケーラブルなcssとは、一人または大規模なエンジニアチームがそういったサイトであっても簡単に管理できることを意味します。
また、膨大な学習を必要とせずに、サイトのcss構造を簡単に理解できることも含まれます。
大規模であったり複雑なサイトであっても、共有しやすいcss設計を目指すことです。
etc..保守しやすい
他にも「保守しやすい」という要素があげられることがあるので参考までに。
Webにおいて、短期的にキャンペーンをうったりして新しい機能やルールが増えることがあります。
そういった場合に、CSSを毎回リファクタリング(※)する必要のないように日頃から設計するべきだという考えです。
(※リファクタリングとは、ソフトウェアの外部的振る舞いを保ちつつ、理解や修正が簡単になるように、内部構造を改善することです。)
コンポーネント設計＋ユーティリティ設計に関しては後日投稿します。
参考サイト
https://philipwalton.com/articles/css-architecture/
↧