今回から、CSSの考え方に「メンテナンス性」という概念を付け加えます。
制作を続けていると、アップデートや追加など、様々な作業が発生します。
常にWEBサイトは仮説検証し改善されていくものですので、改善まで見据えて開発する必要があります。
では、一体どうすれば、メンテナンスしやすい仕組みなるのでしょうか。
そこにはすでにフレームワークが存在しており、FLOCSSもその中の1つです。
FLOCSSは簡単に言うと、役割ごとにフォルダやファイルを作り、CSSのファイルを整理して分けましょうというニュアンスです。
では、どんな役割で分けられるかと言いますと、まずディレクトリ構成は
- foundation — 基本となるCSSを入れます ( reset.cssなど )。
- layout — レイアウト用CSSをいれます ( header、sidebar、footerなど )。
- object / component — 小さなコンポーネントCSSをいれます ( 再利用できるボタンなどのパーツ )。
- object / project –大きな枠組みのコンポーネントCSSをいれます ( セクションごとの単位)。
- object / utility — ユーティリティクラスのCSSをいれます( paddingやmarginなどの単位 )。
となっています。
このように役割を決めることで、よりわかりやすくCSSを管理することができます。
また、CSSを書く際のポイントで一番大きい考え方は「独立して動く」ということ。
例えば、親と子の関係でCSSを反映させることはやめましょうという意味です。
よく下記のようなCSSを見かけるはずです。
.parents .child{
color:#000;
}
これだと「.parents」が存在する場所にしか「.child」のcolorが指定されません。
.childが独立して動けないということです。
上記のような親子構造になると、自分以外の開発者側が混乱します。
もし.parentsと関連している構造に気づかなければ「.child」単体では色が変わりません。
「どうやって#000のカラーにしているんだ？」と一瞬探すことになるでしょう。
今は、単純な構造なので、この程度で迷うコーダーはいないでしょうが、複雑になれば混乱する可能性が高まります。
だからこそ、他のクラスと強い依存関係のある書き方はしてはいけません。
このように、CSSの書き方を含めて整理整頓しルールを決めてみましょう。
よりメンテナンス性が高まるはずです。
今回のミッション
今回のミッションは、参考サイトの模写です。
ただし、FLOCSSでCSSが書かれています。
どのようにFLOCSSで作るべきか考えながら、参考サイトを模写してみましょう。
ちなみに、答えは1つではないので、サンプルを参考に自分なりに作ってみてください。
■ MISSION 2-1
https://startout.work/mission/css/1/
今回の注意点は、次の項目でご説明させて頂きます。
そちらを参考にしながら進めてみましょう。
もしイメージがつかなければ、ソースをダウンロードして中身を確認しましょう。
MISSION2-1を制作したら次に進んでみてください。
■ 一例ファイルのダウンロード
https://startout.work/mission/css/1/mission.zip
上記で気をつけるべき注意点は下記の通りです。
それぞれ、意味を考えながら、使ってみましょう。
気をつけるべき注意点
FLOCSSを使う時には、以下の6つのポイントに気をつけて進めてください。
記憶しようと、ひたすら読んだところで全く意味はありません。
実際に手を動かしながら進めましょう。
これまで習得してきた人であれば、把握しているのではないでしょうか。
インプットだけでは意味がありませんので、実践しながら試していきましょう。
Utilityクラスはあまり使わない
まず、Utilityクラスは、本当に使う必要がある時だけ使っていきましょう。
なぜなら、例えば.pd-30pxというpadding-bottom:30px;を作ったとします。
これを多用すると、結局CSSを細かく指定しなければなりません。
基本的に必要なのは、コンポーネント化です。
テンプレートのように、当てはめたらレイアウトが再現される状況がベストです。
ところがUtilityの使いすぎは、そうしたコンポーネント的手法を崩壊させます。
出来るだけ、そのclassを当てはめたら独立して瞬時にデザインを再現できることが重要なのです。
なので、Utilityはなるべく使わないようにしましょう。
すべて独立して動くようにする
FLOCSSで設計する際は、基本的に各機能がそれ単体で動くようにしましょう。
別のclassと併用しないと、ある1つの機能が再現されない設計はNGです。
例えば、記事を横並びにしたとします。
その際、横並びになった記事の合間にmarginを入れるとしましょう。
もし、横並びにするcssはUtilityを併用しないとmarginを追加できないとすると。
それはちょっと不便ですよね。
横並びにするクラスだけで対応して欲しいところです。
なので、出来るだけlayoutやcomponent、projectだけで対応してください。
その意識を持つだけで、一気にメンテナンスしやすいCSS設計になります。
Sassの場合コンパイルしないファイルには_をつける
Sassで@importを使う場合、importされる側のファイルはコンパイル不要です。
コンパイルすれば無駄にファイル数が増えてしまいます。
無駄にファイル数を増やして煩雑にするのを避けましょう。
コンパイルをせずにCSSをimportする時は、ファイル名の頭に_をつけてください。
_button.sass
このようなイメージです。
_をつけることにより、コンパイルされなくなります。
あとは、親のファイルにimportして使えばOKです。
@importはstyle.cssにまとめる
FLOCSSでCSSを設計するとCSSファイルが増えます。
それを、headで読み込むと、ソースコードが煩雑になっていしまいます。
そんな時はindex.htmlと同じ階層にstyle.cssを用意しましょう。
style.cssでcssファイルをimportしてください。
すると、style.cssをheadで読み込むだけですっきりとcssが読み込まれます。
ファイルをモジュール化する
各ファイルに、明確に役割が決まっているようにしましょう。
例えば、下記のようなイメージです。
@import “object/component/title.css”;
@import “object/component/button.css”;
というように、タイトルとボタンのCSSファイルになっています。
どのパーツがどのCSSで表現されているか、一目瞭然ですね。
モジュール化とは、パーツごとにCSSをまとめることです。
ボタンはbuttonファイルにまとめ、タイトルはtitleファイルにまとめる。
こうすることで、何を編集すれば良いか一目瞭然になります。
クラス名に接頭辞をつける
こちらは命名規則に関わってくる内容になります。
CSSがどのレイヤーのものなのか一瞬で把握できるように、接続辞をつけましょう。
クラスの頭に、下記のような文字を加えてみてください。
- .l- Layoutレイヤー
- .c- Componentレイヤー
- .p- Projectレイヤー
- .u- Utilityレイヤー
- .t- Themeレイアー
- .s- Scopeレイヤー
- .qa- .te- QA/Testレイヤー
- .is- クリックして何かしらの動きがあるなどのイベント
- .js- JavaScriptを書いた時、活用される部分
このように、それぞれのクラスに文字を加えたら、一目瞭然ですね。
修正やメンテナンスにおいて、可読性を向上させることも可能です。
importの順番はFLOCSSの文字通りに
Sassを使うとき、@importで他のファイルを読み込むことがあるかとおもいます。
そんな時は、必ず下記の順番どおりに読み込むようにしましょう。
@import “foundation/**”;
@import “layout/**”;
@import “object/component/**”;
@import “object/project/**”;
@import “object/utility/**”;
なぜならCSSは読み込む順番によって、上書きされることも多々あります。
FLOCSSは上書きされる前提の設計まで考えられているので、順番が大事です。
こうして文字の並び順通りに読み込むことで、CSSが壊れにくくなります。
さらに9種類のフォルダを使える(詳細度によって振り分け)
実はFLOCSSのフォルダ(レイヤー)は、さらに9種類あります。
この9種類を適材適所で使うことで、より整理しやすくします。
- foundation/variable – グローバル変数を格納
- foundation/function – グローバルな関数を格納
- foundation/mixin – グローバルなmixinを格納
- foundation/vendor – 外部のライブラリとフレームワークを格納
- foundation/vendor-extension – vendorレイヤーの上書き用
- object/theme – テーマによる色の切り替えなど ( SMACSSのthemeモジュール )
- object/scope – ブログの投稿に使うスタイルなどのスコープを格納
- object/qA/Test – テストのため一次的に使うスタイル
このように、9種類のレイヤーを合わせて使いこなしましょう。
複雑に思えるかもしれませんが、特に大規模サイトなどでCSSのメンテナンス性を向上させます。
最初にしっかりと設計することで、メンテナンスをしやすくします。
以上の項目に気をつけながら、ぜひ、ミッションに挑戦してみてください。
編集したデータは、基本テンプレートとして保存しておきましょう。