astamuse Lab

astamuse Labとは、アスタミューゼのエンジニアとデザイナーのブログです。アスタミューゼの事業・サービスを支えている知識と舞台裏の今を発信しています。

astamuse.comのcssが崩壊した日(2017/07/14改訂)

2017/07/14更新

主に「抽象的な」と言っている箇所の削除・修正を行いました。

前々回くらいに「cssアーキテクチャのtips」とか偉そうなブログ書いた者ですが、 今回自分のcssを崩壊させてしまいました。まったく笑えない、由々しき事態です。

失敗事例をこういうとこで書くべきなのか悩みましたが、反省と自責の意味を込めて書かせていただきます。

astamuse.comのcssアーキテクチャ

2013年に大幅リニューアルしたastamuse.comのcssアーキテクチャは6つの層で成り立っています。

f:id:astamuse:20170704201421p:plain

※この「widgets」という層ですが、atomicデザインでいう「modules」のようなもので、オレオレ概念です。こいつが後々首絞めます。

例としてデザインを見ていきます。

f:id:astamuse:20170704200020p:plain

このデザインをastamuse.comのcssアーキテクチャで分解していくと、下記のようになります。

f:id:astamuse:20170704200023p:plain

componentsのラベル・ボタン・widgetsの見出し・リストらを、modulesで実装してます。

何ら違和感はないように思えますよね。

少なくとも、このcssアーキテクチャで2013年~2017年まで維持できたという点では「間違いではなかった」はずです。

何が起こったか

本年度より、徐々にastamuse.comのモバイル対応を行っております。

【注釈】astamuse.comの「モバイル対応」方針について

astamuse.comはAsta4Dを使っており、特定のUIをモバイル用UIでオーバーライドすることも容易にできますので、モバイル用cssで「モバイル対応」に取り組んでいます。

.wdg-list-vline は横並びli間に「|」を装飾するwidgets。 f:id:astamuse:20170704200023p:plain

だがしかし!

f:id:astamuse:20170704200025p:plain

モバイルだと上記のようなデザインになり、「vline」という単語が意味不明になってしまいました。utilitiesも同じような事態(.line-bottom, .al-center, etc.. )に・・・。

最悪です。抽象的な概念を取り入れすぎた結果がこれです。

[改訂]「構造と見た目の分離」というcssの基本を軽視した結果がこれです。

反省と今後に向けて

今回反省すべきは

  • astamuse.comプロジェクト(サイトデザイン・制作メンバー含め)に適したアーキテクチャではなく、自分が好きなアーキテクチャを選択してしまったこと
  • 抽象的なclass名をhtmlに書きすぎたこと
  • [改訂] 「構造と見た目の分離」を軽視したこと

の2点です。

このアーキテクチャは、widjets,modulesによって新規・追加コンテンツを作るスピードは確かに上がるのですが、

[改訂]この方法は直感的にwidjets,modulesを組み合わせていくことができるので、新規・追加コンテンツを作るスピードは確かに上がるのですが、

中長期で見たときのスピード(削除・リデザイン)を考えると、本プロジェクトには向いてませんでした。


今後に向けてですが、下図のようなアーキテクチャでリデザインしていこうと思います。 各pageの独立性を持たせており、今度のコンテンツ拡充・削除・変更にも耐えていける設計になるはずです。 (Enduring CSSに近しい思想があるかもしれません。)

f:id:astamuse:20170704213009p:plain

完了時期がいつになるかまだスケジュールをたててませんが、近いうちにまたここで発表できればなと思います。

最後になりますが、astamuse.comの大規模リファクタリングを一緒にやっていただける方や、私のcssうんちく話を聞いてくれる方を切に、切にお待ちしております。

Copyright © astamuse company, ltd. all rights reserved.