RichCSS - 再利用性の高いスタイルシートを作成
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