MVCSSとか言うCSSフレームワークについて

[追記] 続編記事書きました!
MVCSSを使ってみる 1
MVCSSを使ってみる 2

概要

MVCSSはSassベースのcssフレームワークです。
Twitter Bootstrapなどと異なって、cssを効率よく管理するためフレームワークです。

webシステムに組み込まれたcssが複雑になりすぎるという問題は他にも解決策があり

• oocss
• BEM
• SMACSS

などが有名ですが、フレームワークというよりレギュレーションに近いかもしれません。

MVCSSではCSS必要な構成を6つのファイルに分けて管理しています。
また、CSSに関する6つのファイルと全体構成に関する処理をそれぞれを3つの主要なセクションに分類してCSSに関する部分(実際にメンテナンスされる部分)を分離しています。

基本

Section1 Application

application.sass
MVCSSで利用するコンポーネントを読み込みます。
Section2のCoreファイル、Section3のModulesを読み込みます。 Compassなどのヘルパーを利用する場合はこのセクションで読み込んで下さい。

Section2 Core

基本設定を行うセクションです。
初期段階での開発はこのセクションのファイルを対象に作業することになります。
1.reset.scss
Normalize.cssや独自のリセットcssでスタイルのリセットを行います。
2.settings.sass
色の設定やWEBフォント設定などの設定を行います。
3.helpers.sass
継承されるスタイル(%でプレースホルダセレクタを宣言)や関数などの設定を行います。
4.base.sass
html,body,p,aタグなどセレクターベースの基本設定を行います。
5.content.sass
idやclass設定に関する設定を行います。
6.layout.sass
boxのmarginやpadding、displayなどのレイアウトに関する設定を行います。

Section3 Modules

モジュールに関する設定を行うセクションです。 MVCSSでは下記の4つを想定します。

• Modals
• Buttons
• Tooltips
• Navigation

感想

自由度が高いので共通化されたレギュレーションが無いと逆にスパゲッティになりそうですね。 チームで作業する場合はcssの管理も重要なファクターなので、今後は必要な考え方だと思いました。 実際に書く場合はsassの継承を上手に使わないと冗長的なcssになるので気をつけましょう。

[追記] 続編記事書きました!
MVCSSを使ってみる 1
MVCSSを使ってみる 2