Sassでコーディングを行う際の設計とコンポーネント作成のアイデアについて書きます。
#Sassのディレクトリ構成と役割
以下のような構成を考えてみました。
カテゴライズはSMACSSを参考にしています。
- base（各要素のデフォルトのスタイルを定義）
- layout（ページの大枠を作る）
-
object（ページに存在するコンポーネントすべて）
- component（コンポーネントの実態を定義）
- mixin（コンポーネントの形状と装飾のmixinを定義）
- fixing（使いまわしされない固定されたコンポーネント）
- utility（レイアウト調整用の汎用クラス）
- state（動的にスタイルが変わるもの）
- theme（ページ全体のテーマを変化させるもの）
- variables（変数の管理）
SMACSSでいうところのModuleをObjectとし、さらにその内部をcomponent, mixin, fixingで分けています。
プロジェクトの中で、汎用性のあるコンポーネントをcomponent、一度しか使われなかったり、今後変化しそうになさそうなものをfixingとして分けています。
また、componentとfixingにはプロジェクトに依存したコンポーネントを定義するので、他のプロジェクトでも使えるようにmixinを別の領域としています。
ここから、componentとmixinについて取り上げます。
#コンポーネントの設計アイデア
buttonというコンポーネントを例に
以下のような手順でコンポーネントを作成していきます。
-
object/component/_button.scssとobject/mixin/_button.scssを作成
-
object/mixin/_button.scssにconfiguration（形状）とdecoration（装飾）のmixinを作成
//ボタンの形状
@mixin button_configuration ($padding, $border, $border-radius) {
padding: $padding;
border: $border;
border-radius: $border-radius;
}
//ボタンの装飾
@mixin button_decoration ($border-color, $background-color) {
border-color: $border-color;
background-color: $background-color;
}
3.object/component/_button.scssに形状と装飾のplace-holderを作成
/*
形状
@mixin button_configuration (
padding,
border,
border-radius
)
装飾
@mixin button_decoration (
border-color,
background-color
)
*/
/*
形状のplace-holder
*/
//長方形
%button_configuration-rectangle {
@include button_configuration(5px 10px, solid 1px, 3px);
}
//正方形
%button_configuration-square {
@include button_configuration(10px, solid 2px, 5px):
}
/*
装飾のplace-holder
*/
//ボーダー:白, 背景:灰
%button_decoration-white-gray {
@include button_decoration(#fff, #d3d3d3);
}
//ボーダー:黄, 背景:オレンジ
%button_decoration-yellow-orange {
@include button_decoration(#ffff00, #ffa500);
}
4.作成した形状と装飾のplace-holderを組み合わせてコンポーネントの実態を作成
//フォーム送信ボタン
.button_submit {
extend %button_configuration-rectangle;
extend %button_decoration-yellow-orange;
}
//戻るボタン
.button_back {
extend %button_configuration-square;
extend %button_decoration-white-gray;
}
floatやpositionなどのレイアウトに関わるプロパティについては、実態クラスごとに
直接書くようにします。
#今後の課題
##place-holderの命名が冗長になりがち
形状と装飾のplace-holderを組み合わせて実態を定義したクラスについてはプロジェクト内で使用される用途を明確にするためセマンティックな命名を意識していますが、
place-holderについてはプロジェクトに存在するコンポーネントの形状と装飾の数だけ、量産されていくため、プロパティに応じた具体的な命名をつけています。
しかし、プロパティが多い場合に命名が冗長になってしまうのと、プロパティの値の違いが少ししかない場合の命名をどうするかということにおいて曖昧さがあるのが今後の課題です。
##形状と装飾に振り分けるプロパティの判断基準がない
形状と装飾で使用するプロパティについては、コンポーネントの種類によって分けるようにしていますが、形状と装飾のどちらにプロパティを振り分けるべきか判断に困る場合があります。
#終わりに
OOCSSやSMACSSを参考に設計アイデアを考えましたが、BEMやMCSSなどの他のCSS設計のアイデアも取り入れて、今後も設計に磨きをかけていきたいと思います。