これはa-blog cms Advent Calendar 2014の13日目の記事です。

私は、いわゆるa-blog cmsの中の人にあたるのですが、中でも最近考えているのが2015年版テーマとacms.cssについてです。特にacms.cssのこれからについてどうしようかなと考えていたりします。

2日目の勝又さんの記事にあるように、ありがたいことに、acms.cssは思っていたよりも多くの方に使っていただいているようで嬉しいです！そんなユーザーさんにもよく使われているacms.cssの現状を共有できたらいいかなと思いました。

現状考えている大きな変更点は以下の2つです。

• Media Queriesの基本の指定の仕方をmin-widthに変更したい
• CSSプリプロセッサー周りの管理の仕方を強化する

Media Queriesの基本の指定の仕方をmin-widthに変更したい

お使いいただいている皆さんにはご存知の通り、acms.cssはmax-width指定です。私自身、案件でmin-widthから指定して、respond.jsを読み込んでMedia Queriesが使えるように対応をしたことがあるのですが、他のプラグインとの相性が悪く少しトラウマになってしまいました。

ですが、やはり、ほかのフレームワークと勝手が違うととっつきにくくなる点、古いブラウザであるIE8対応に重点を置いてしまってモダンブラウザにも影響を及ぼしている点が難点でした。それに加えて、モバイルファーストの考え方で実装するならmax-widthでは使いにくいと感じています。

おそらく、a-blog cmsのCSSやテーマなどのフロント部分が大きく変わるのはこの時期しかないので、2015年1年間使い続けるCSSと思うと、まだ案件でもIE8対応をしていますが、今の段階で基本的にmin-width指定にしたほうがいいという判断です。

CSSプリプロセッサー周りの管理の仕方を強化する

どうせならもう少しカスタマイズしやすいファイルにしていきたいという思いがあります。利用者にわかりやすいということは、開発者にもわかりやすいファイルになるので、双方にお得になるはずなのです。

実は、管理画面用のスタイルなので、あまりカスタマイズすると危険かもしれないと初めは思っていました。そんな私の心配事は的中することなく、リリースしてからそんなトラブルを聞くことも今までなかったので、どちらかといえばよりカスタマイズしやすようにパワーアップしていこうと考えた次第です。

具体的には

• 重要なところ・わかりづらいところであれば、なぜ、この記述したのかしっかりコメントを書く
• 変数を上手に使い回してすぐ変更できるようにしたい

今のacms.cssはCSSに変数やミックスインが少し使ってあるだけの膨大なLESSファイルとなっているので、なんとかしたいところです。

重要なところ・わかりづらいところであれば、なぜ、この記述したのかしっかりコメントを書く

BootstrapやuikitのLESSファイルって、とても読みやすいのです。分析しながら一人で感動してしまいました。中にはコメントでIEハックについて3,4行くらいで丁寧に説明していた箇所もありました。

もう少しコメント回りをしっかり書いて、多少限界はあるとは思いますが、なるべくLESSファイルだけで何してるのかわかるファイルを目指したいと思っています。そうすれば数ヶ月後の私や、後輩もなぜこの記述なのか理解しやすくなってメンテナンスもしやすくなります。

変数を上手に使い回したい

変数の使い方なのですが、Bootstrapやuikitはとてもうまいです。なるほど！と、とても勉強になります。CSSプリプロセッサーはよく「効率よく作業をするために使う」と言われているので作業が早くなる印象があったのですが、私の場合は膨大なCSSを管理しやすくするところがとても魅力的に感じました。

私が管理しやすいと、後輩も管理しやすいし、使っていない人でも管理しやすくなります。それこそ、Bootstrapやuikitの変数だけのファイルをみていると、それだけでだいぶカスタマイズできてしまうんじゃないだろうか、と思えてしまいます。

とくに、acms.cssを使ってくれている方はディレクターポジションの方が多いような気がするので、あんまりコードを書かない方でも編集しやすいようなファイルにしたいです。

これまでのacms.css

もちろん、アップデート時には、今まで使っていた古いacms.cssをテーマフォルダ内に移動すれば問題なく使うことができるのでご安心ください！

これまでのacms.cssを使いたい方も中にはいるかもしれません。今までのグリッドシステムもomakeフォルダか、LESSファイルかはわかりませんが、どこかで入手できるようにしたいと思います。

これからのacms.css

a-blog cmsのユニットの問題点として、flex-boxが挙げられます。以前、「自分のブログのユニットをflex-box対応にしよう！」と企んでいたときがあったのですが、普通に使うだけなら問題ありませんが、ブレイクポイントごとに順番を変えたり、画像を左右に寄せることがむずかしく、flex-boxの機能を十分に使うことができませんでした。それはCSSの問題だけではなく、ユニットというシステムかもしれませんし、現状のユニットのデザインにも問題があるのかもしれません。

だんだん、flex-boxに対応しているCSSフレームワークも増えてきています。flex-boxは私も早く制作で使いたい技術で、注目しているので早く使えるようにacms.cssも対応したいです！