総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog

こんにちは！フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less （CSS プリプロセッサー）でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。

[ze-ki]

ここ読まずにコメントしてる人いてワロタ「Sass は Ruby のエコシステムで提供されていますが、Less は Node.js のエコシステムで提供されています。 そして、Node.js の方が、Perl と同居させるのに都合がよかったのです。」

[Falky]

FirefoxはドメインによってCSSの解釈を変える…？はーほんと害悪。理由がなんであれ害悪。滅んでほしい〜

[chocodoughnut]

テスターの人には頭がさがるな。今育ててるcssが闇を抱えないうちにメンテしておかないとなー

[YUKI14]

読んでるだけで吐きそう

[hageatama-]

文字通りに”闇祓い”だ……

[izumin5210]

読んでるだけで胃もたれするほどの闇だ… これを祓ったとは尊敬しか無い / さらっと書かれてるcss-semdiffめっちゃ欲しかったやつでは…？！

[gowithyou]

なぜSassにしなかった？

[yoshiko_pg]

改修とOSS開発両方完遂してて素晴らしい… css-semdiffめちゃ求めてた。 あと確かにz-indexはレイヤ定めて変数管理したい…

[shoh8]

すごい

[ANNotunzdY]

Autoprefixer

[kns_1234]

Firefoxって、ドメインによってCSSの挙動変わるの…

[nanto_vi]

「本番環境とステージング環境での CSS 解釈に差が出てしまう」なんてことが。開発者・ブラウザベンダ双方に不利益だし、ブラウザベンダがベンダ接頭辞を使わなくなったのも道理。

[shiromatakumi]

面白かった。

[japanitnt]

総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi Engineers' Blog: 2015 - 12 - 20 総行数57,000の巨大CSS群をLessに書き換えた軌跡 CSS CSSプリプロセッサ…

[designwao]

総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi Engineers' Blog: 2015 - 12 - 20 総行数57,000の巨大CSS群をLessに書き換えた軌跡 CSS CSSプリプロセッサ…

[UDONCHAN]

大変だ

[armadillo75]

そうだった、mixiはperlで動いているのでした。“Less を採用した決め手は、それぞれの提供されているエコシステムにあります。 （中略）そして、Node.js の方が、Perl と同居させるのに都合がよかったのです”

[efcl]

-webkit- prefixから標準への書き換えを行った話。 CSS:fixmeで標準記法へ直し、Autporefixerでプリフィック対応し、Lessで構造的に管理しやすくしていく

[matsubobo]

mixiレガシー

[kk6]

PostCSSはまだ本番に使うには…って感じでLESSになったのかな。

[bm0329]

[CSS:fixme]

[kinushu]

つらい

[ene0kcal]

4人と3ヶ月くらいかな？ということは12人月だから、まぁ1000万円ってことか。その価値があったかではなく、今後同じ轍を踏まいないための知見を得ないとまた似たような闇の代償を払うことになる。

[love0hate]

もう負債には立ち向かうのは勘弁でござる...

[eriotto]

なんでこのタイミングLessなの？（読んでない）

[side_tana]

かっこいい!!!!

[s99e209]

Autporefixerは使ったことないけど、導入したら運用が楽になりそうですな。

[digitalglm]

総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi Engineers' Blog: 2015 - 12 - 20 総行数57,000の巨大CSS群をLessに書き換えた軌跡 CSS CSSプリプロセッサ…

[naosuke2dx]

kuniwakさんの記事だ!

[yasu-log]

【B!】総行数57,000の巨大CSS群をLessに書き換えた軌跡 - Mixi Engineers Blog