FLOCSSを使ってCSSファイルを20,000行から9,000行にした話 - Qiita

入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難

[atsss]

僕がこの会社に入って一番最初の仕事です！！

[threeMonths]

リファクタリングのテストの部分知りたい

[libkazz]

インターンが3ヶ月間かけて、FLOCSS を全面導入してくれた話です。外注で制作したサイトが自分たちのサイトになった瞬間です！

[murokaco]

わたしも一緒にがんばりました！！！

[mr_mayama]

テストが大変そうだけど検索すれば済む様なルールならそれも問題にならないのかな？

[efcl]

CSSのリファクタリング手法や方針について。 どのようなフローでリファクタリングを進めていったかや進捗の可視化について

[yoshikidz]

コンポーネントで設計してたら末尾のreactとかは設計しやすそう

[tyru]

プリントアウトして component か project かとか決めてくのいいな。アナログ的な解決方法割と好き。

[musign]

すごい、本当の意味での知見だ！

[H_Yamaguchi]

よむ

[masa8aurum]

CSSをリファクタリングした実例についてざっくり書いてある (`https://reform-market.com` での実例とのこと) / >サイトの全ページをプリントアウトしてコンポーネントごとに分類して壁に貼り付け

[tsuki-rs]

なるほど、悩ましい

[igrep]

お疲れさまでした！

[elim]

偉業だ。励まされる。

[o_ti]

https://reform-market.com/

[wdr_s]

興味深い。

[gambol]

"８月〜１０月の３ヶ月間"

[pirosikick]

すご

[yosuke_furukawa]

flocssだ