サイトリニューアルにおけるCSS設計ーメモ

CSS設計のリニューアルについては、以下の点を意識すると良い。

  • 既存のCSS設計との互換性を保つ
  • 新しいCSS設計は予測がしやすく、拡張性があり、保守性が高いものを選ぶ
  • CSSファイルは機能や役割ごとに分割して管理する
  • CSS設計のルールや命名規則を統一してドキュメント化する

具体的なCSS設計の手法としては、ITCSSPRECSSなどが参考になるかもしれない。
ITCSSはレイヤーごとにCSSファイルを分けて管理する方法で、ZOZOTOWNでも採用されている。
PRECSSはBEMとSMACSSを組み合わせた方法で、コードが書きやすくなり、コーディングスピードが上がるというメリットがあある。

リニューアル案件におけるCSS設計の進め方や注意点については、こちらの記事も参考にする。

【参考サイト】

フロントエンドエンジニア暦3年目がCSS設計を1年実践してみて変わったこと – Qiita 
ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 – ZOZO Technologies TECH BLOG 
失敗しない!Webサイト(ホームページ)リニューアルの進め方 | Webマネジメントアカデミー

この記事を書いた人