汎用CSS

先日、ダイアリーをリニューアルしたのですが、今回これまでとは違って、はてなの汎用スタイルシートを作り、それを導入して作っています。簡単に説明すると、これまでは、サービス毎に1つCSSを作っていましたが、今後、はてな内でサービスのデザインに統一感を持たせる意味などで、全サービスのベースに、同じCSSを導入してデザインを作っていこうという感じです。

構成

ソースを見ていただければ分かりますが、汎用CSSはglobal.cssというCSSから、syntax.css、support.css、common.cssという3つのCSSをimportして構成されており役割は以下の感じです。

common.css

タグの基本スタイルの定義と、ページ内の各要素をパーツ化して、それを部品毎にclassにしているデザインの枠組みになるCSSです。例えばtableであれば「一覧用（.table-list）」「管理画面用（.table-config）」「カレンダー整形用（.table-calender）」ボックスであれば「角丸帯付き」「角丸枠ライン」「付加情報の一覧」などそれぞれ機能や目的毎にパーツを作っています。

support.css

カラムを作ったり、リストを横並びにしたり、floatをclearしたり、indentを作ったり、画像とテキストの位置を揃えたり、といったように、はてな内というよりももっと汎用的なデザインをサポートする為のCSSでcommon.cssをサポートする為のCSSです。

syntax.css

記法で記述された部分を整形してます。keywordページなど、はてな内で記法で書かれた部分を統一したフォーマットで見せる為の物です。

といった感じです。これに加えて、これだけでは補えきれない、デザインカスタム用をdiary.cssというサービス専用のCSSに書いています。
まだ、今回取り入れたばかりで、ダイアリーをリニューアルしながらも試行錯誤を繰り返していますが、今後、このサービス固有のCSS（diary.css）の記述をなるべく減らせるよう、運用方法なども含めてクオリティを高めていくつもりです。

命名規則

classの命名規則は「機能名＞見た目＞記号」といったような重み付けを今はしています。例えばパンくず、ページャーといったような利用シーンが明確な物は「breadcrumbs」「pager」。赤ラインの角丸ボックスは、利用シーンは定かじゃないので、.box-curve-rdといった形で見た目を現します。さらに赤ラインでも色味の違う角丸ボックスは.box-curve-rd2と番号を振っていますが、今のところ、うまく言ってる感じです。今後も管理しやすい方法を検討しようと思っています。

便利な事

メリットとしては、基礎的な部分をこのCSSで構成するので全体の統一感が増すのもそうですが、社内では、このCSSを使ったデザインサンプル集htmlを用意しており、デザインに添えられてるtextarea内のソースをコピーするだけでサンプルを作れるようになっています。これでデザイナーじゃなくても、モック作成や新規サービスなどが容易にできるようになります。

そんな感じで、まだ、導入したてなのでしばらく色々と修正が続きそうですが、サービスのクオリティを高めていけるよう試行錯誤していく予定です。