CSSはなんとなく書いてもそれなりに表示できてしまうため、適切に運用し続けるのが難しい技術です。企業によって様々なルールがあり、正解もなかなか見つかりません。むしろ一定の法則に載ってしまう方が楽と言えます。 今回紹介するRichCSSもそんなスタイルシートフレームワークの一つになります。デザインフレームワークではないので、RichCSSの法則に則って書くことで運用を楽にするというコンセプトです。

RichCSSの使い方

RichCSSはコンセプトに近いものであり、それを補助するCLIツールが出ています。初期化コマンドでCSSまたはSCSSに沿ったベールファイルが生成されます。

$ richcss init scss
      create  box
      create  elements
      create  parts
      create  box/blocks.scss
      create  box/main.scss
      create  box/positioning.scss
      create  elements/button.scss
      create  elements/colors.scss
      create  elements/features.scss
      create  elements/fonts.scss
      create  elements/images.scss
      create  elements/inputs.scss
      create  elements/lists.scss
      create  parts/Partfile

見て分かる通り、ページではなく画面要素に従ってスタイルシートが生成されている印象があります。

RichCSSでは再利用性を重視したスタイルシートの組み方を提唱しています。機能単位でスタイル設定が決まっているのであれば、別な画面にある同じ設定を指定するというのも自然にできるようになるでしょう。

RichCSSはRuby製（CLI）、MIT Licenseのオープンソース・ソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

RichCSS fdp-A4/richcss-cli: Command line tool to manage RichCSS