CSSの設計は非常に重要な考え方です。
コードの数が増えていくと、被ってしまったり、混乱してしまったりします。
結果的に、役割の判別が難しく、メンテナンスしずらくなるでしょう。
では、どうすればメンテナンスしやすいコードになるか。
前回はFLOCSSを学びましたが「BEM」や「OOCSS」など、他にも色々あります。
そのいくつかある方法の中で「SMACSS」もよく使われる設計思想の1つです。
FLOCSSよりは多少シンプルですね。
ぜひSMACSSを覚えて、メンテナンス性の高いCSSを書けるようになりましょう。
SMACSSとはなにか
SMACSSでCSSを書く場合、まず下記5つのカテゴリーにわけられます。
- ベース – bodyやpなど、要素に直接当てる、基本スタイル
- レイアウト – エリアごとに分けたスタイル
- モジュール – 再利用できる、個々のパーツ
- ステート(状態) – レイアウトやモジュールが変化した時のスタイル
- テーマ – サイトの見た目やデザインを制御する
これら5つの設計に基づいて書くCSSがSMACSSです。
ファイル構成は下記のようになります。
- base.css
- layout.css
- module.css
- state.css
- theme.css
丁度FLOCSSでフォルダ別に分けた内容を、ファイル別にしたような形ですね。
なおSMACSSとFLOCSSの使い分けですが下記を意識すると良いでしょう。
- FLOCSS – よりしっかりした設計を作りたい場合
- SMACSS – ざっくり設計で良い場合
見たほうが早いので、実際に設計を見ていきましょう。
ベースについて
reset.cssはベースに入ります。
normalize.cssやsanitize.cssもベースに入ってきますね。
pやul、hやdlなど、基本的なタグに関して当てられているスタイルです。
要素に対して、デフォルトで反映させておくCSSを書きましょう。
レイアウトについて
サイドバー、ヘッダー、フッター、メインなど、大まかなレイアウトです。
ざっくりとした全体の枠組みを指定する時に使います。
セクション別の大まかレイアウトもここに所属します。
命名規則は下記を参考にしてみてください。
.l-header{
width:100%;
}
.l-footer{
width:100%;
}
.l-sidebar{
width:30%;
}
.l-main{
width:70%;
}
class名の前にl-とつけることで、レイアウトだと認識できます。
頭文字に各役割のアルファベットをつけることで、役割が一目瞭然になります。
なお、こうした頭文字をプレフィックスと言います。
モジュール
ボタンや画像、文字やタイトルなど、各パーツのデザインを担当します。
横並びにしたり、隙間を空けたりするのはレイアウトでの担当です。
モジュールではパーツのデザインだけで、一切レイアウトは担当しません。
下記の例を確認してみてください。
.c-buttonType_a{
background:#000;
border-radius:5px;
text-align:center;
padding:10px;
min-width:150px;
}
このように、ボタンであればボタンのデザインだけを作ります。
ボタンの位置やレイアウトなどは、レイアウトのレイヤーで指定しましょう。
モジュールはあくまで再利用可能なパーツです。
それ意外の影響範囲は他の項目にまかせてください。
FLOCSSで言えばコンポーネントと似た役割を果たします。
ステート(状態)について
JavaScriptなどで、変化を加えたり、マウスオーバーで色を変えたり。
何かアクションを起こすことでclassを取り替えるケースがあります。
JavaScriptなどでclassを取り替えることで、状態を変更します。
下記の例を確認してみてください。
.is-over{
background:#000;
}
.is-hidden{
display:none;
}
例えばボタンをクリックした時、背景を黒くするとします。
そんな時は、上記のis-overを加えれば黒くなりますよね。
また、is-hiddenを使えば要素が消えます。
このように状態を変化させるクラスをステートにまとめます。
なお、プレフィックスとしてはisが使われます。
テーマ
デザインの雰囲気を司るclassです。
例えば、デザインを赤から青に変えたいとしましょう。
そんな時はテーマのCSSを変更するだけで変わるようにします。
.theme-font{
color:#000;
}
.theme-background{
background:#afafaf;
}
このように、テーマの基本的な色合いやデザインを決めていきます。
もし色合いを変更したいとなったら、classの色を変更すれば一気に変更できるでしょう。
さらにSassを使うのであれば、色合いも「変数」にすることで、よりメンテナンス性が向上します。
なおテーマのプレフィックスはthemeを使います。
このようにそれぞれCSSに役割分担をすることで、メンテナンス性を獲得できます。
ぜひ、前回のFLOCSSと一緒に考えて使ってみてください。
なお、STARTOUTではSMACSSとFLOCSSを合わせると良いかなと考えています。
フォルダ構成や基本的な考え方はFLOCSSを軸にして考えましょう。
大雑把に言えば、より細かく汎用性が高い形で作れるのがFLOCSSです。
その中でSMACSSの「状態」の概念や「プレフィックス」を取り入れていきます。
FLOCSSでは使っていない考え方ですが、取り入れると便利です。
よりメンテナンス性を向上させた設計をすることが出来ます。
もちろん、どちらか1つの設計を採用することもできます。
ご自身が設計しやすいと思う方法で、ぜひ、挑戦してみてください。
今回のミッション
今回のミッションは、参考サイトの模写です。
ただし、SMACSSとFLOCSSを併用したような形でCSSが書かれています。
フォルダ構成や基本的な考え方はFLOCSSをベースに考えています。
また、メイン画像をクリックすると、赤い枠がつくようにしました。
状態の変化クラスを試すためです。
クリックしてどのように変化しているのか確認してみましょう。
どのようにSMACSSと取り入れるべきか考えながら制作してみましょう。
答えは1つではないので、サンプルを参考に自分なりに作ってみてください。
■ MISSION 2
https://startout.work/mission/css/2/
今回の注意点も、次の項目でご説明させて頂きます。
そちらを参考にしながら進めてみましょう。
■ 一例ファイルのダウンロード
https://startout.work/mission/css/2/mission2.zip
SMACSSの基本的な使い方はすでに説明しました。
それぞれ、意味を考えながら、使ってみましょう。
補足的な注意点
SMACSSを使うにあたり、いくつか注意点があります。
前回のFLOCSSとかぶる部分もありますが、意識してみてください。
idを使わない
基本的にCSSにはidとclassがありますが、idは不要です。
基本的にページ内で1度しか使えないことで、コンポーネント思考が崩れます。
idは基本的にアンカーリンクやJavaScriptとの連携意外使わないようにしましょう。
独立して動かす
他のレイヤーにあるclassと親子構造で動くようにしてはいけません。
必ず独立していて、それ単体で動くように作りましょう。
SMACSSの良いところは、それぞれの機能が独立しているからこそ汎用性が高いことです。
他のCSSから、それぞれ影響を受けないように作りましょう。
ひとまず注意点としては、この２つを守って作ってみてください。
FLOCSSと組み合わせることで、より保守性の高いコーディングができるはずです。