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

1 min read読了の目安(約1700字

この記事の後編です。

この記事で学べること

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

読んでほしい人

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

参考にした書籍

https://www.amazon.co.jp/gp/product/B07PS1ZJN6/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&psc=1

https://www.amazon.co.jp/Web制作者のためのCSS設計の教科書-モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法-Web制作者のための教科書シリーズ-谷-拓樹-ebook/dp/B00M0ESXUI/ref=sr_1_8?__mk_ja_JP=カタカナ&dchild=1&keywords=css&qid=1617342017&sr=8-8

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

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

  • CSSのゴールは、メンテナンス効率を下げずに、少ない工数で改修ができるようにするか。
  • Googleのエンジニア フィリップ・ウォルトン氏によると、以下の4つが挙げられている。
    • 予測しやすい

      他のルールが影響しないようにする。逆も然り。

    • 再利用しやすい

      機能ごとにルールを分離しておく。

    • 保守しやすい

      追加したルールによって、既存のルールを破壊しないようにする。

    • 拡張しやすい

      サイトの規模が大きくなるにつれて、拡張しやすいものかどうか。

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

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

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

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

それ以外の場合

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

  • 理由

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

CSSフレームワーク

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

https://qiita.com/shierote/items/047dd9ab483b4a7bec6f

https://lab.sonicmoov.com/markup/css/lightweight-css-framework/