みなさんスタイルシートはどのように管理していますか？
今日は私が辿ったCSSの管理についてお伝えできればと思います。
5000行のCSSを1つのスタイルシートに書いていた
一番最初にWebサイトを作ったときは全部のページのCSSを一つのスタイルシートに読み込んでいました。
今思えば、無駄なコードも多くて保守管理などもってのほかです。
SassとGulpを導入して、ページごとにスタイルシートを作成
数回の案件を乗り越えて、SassとGulpを導入しました。
ここで、ページごとに初めてスタイルシートを分けることを覚えたので、比較的保守管理しやすくなり、事故が減りました。
ベンダープレフィックスも自動で付与をしてくれるので、Sassとgulpはなんて便利なんだと感動したのを覚えています。
命名規則にBEMを採用
命名規則に特にルールがなかったので、いくらSassでスタイルシートを分けたところで最終的には、ひとつのCSSファイルが読み込まれるので、予期せぬスタイルの崩れが起きることがありました。
なので、命名規則にBEMを設けることで、更に事故率が減りました。
CSS設計のFLOCSSを導入
ここまでディレクトリ管理などはなにも考えてなかったんですが、CSS設計を導入し、更に保守管理しやすくしようと思い、命名規則にMindBEMdingを採用されていて、コンポーネント思考なFLOCSSを導入しました。
どのディレクトリにどの関連のスタイルがあるかも一目瞭然になりました。そして、コンポーネントを作成し、スタイルの使い回しが多くなったことで、無駄なコードを大幅に減らすことができました。
最後に
まだCSS設計や命名規則、gulpの導入などしていない人は、是非導入を検討してみてください！