🎨

フロントエンド初心者に知ってほしい、CSS運用における3つの考え方(2/2)

2021/06/11に公開

この記事の後編です。

破綻しやすいCSSは、どういうものか？
https://zenn.dev/taizo_pro/articles/750022c6f27424

この記事で学べること

いかに少ない工数でメンテナンス効率を下げずに改修ができるか？
CSSフレームワークを導入するべきか？

読んでほしい人

今までバックエンドメインで、フロントエンドはほぼ触ったことがない人
style = '*' と、スタイルをインラインで書いている人

参考にした書籍

この2つの書籍を元にまとめました。（ほぼ要約に近い）
とてもわかり易く、まとめられているので、おすすめです。

いかに少ない工数でメンテナンス効率を下げずに改修ができるか？

CSSのゴールは、メンテナンス効率を下げずに、少ない工数で改修ができるようにするか。
Googleのエンジニアフィリップ・ウォルトン氏によると、以下の4つが挙げられている。
- 予測しやすい
  
  他のルールが影響しないようにする。逆も然り。
- 再利用しやすい
  
  機能ごとにルールを分離しておく。
- 保守しやすい
  
  追加したルールによって、既存のルールを破壊しないようにする。
- 拡張しやすい
  
  サイトの規模が大きくなるにつれて、拡張しやすいものかどうか。

これらをクリアしていれば、「良い設計のCSS」となる。

CSSフレームワークを導入するべきか？

こだわったUIにしたい、社内にデザイナーがいる場合

→フレームワークに依存しない手法を検討するべき。

それ以外の場合

→無難にフレームワークを取り入れるべき。

理由
- とにかく楽で早い
- デザインを考えずにそれなりにかっこいいサイトになる。
- しっかり設計されているため、メンテナンスがしやすい。

CSSフレームワーク

以下の記事にて、多数取り上げられているので、割愛します。

Discussion