【CSS設計】メイクアップなマークアップ♡FLOCSSでどんなときでもキレイにきまるコー ディング術!

必死で間に合わせたコーディング。しかし時間の経った修正依頼で、何をどこに書いたのかわからなくなってしまった経験はありませんか?そんな方に、「CSS設計」の概念の一つであるFLOCSS(フロックス)をご紹介します。この設計は、女性が毎日行うメイクのステップにとても似ているんです!

0-0

CSS設計ってなに?

■CSS設計は、どこに何が書いてあるのかを誰でも分かりやすく工夫するルールのこと

近年では、デザイナーがwebのビジュアルデザインをするだけでなく、静的なコーディング業務に加え、「jQuery」などの実装作業を含めた動的なコーディングが増えてきました。「動かない(バグ)」原因を作らないためにも、マークアップはより客観的な視点に立った設計を求められるようになってきています。エンジニアが様々な経験をもとに考案されてきたCSS設計は、開発環境の規模や好みによって提案されたルールをもとに、カスタマイズして使われる事が多いのです。

■FLOCSSとはCSS設計の手法のひとつ

CSS設計には有名な「OOCSS」・「SMACSS」・「BEM」・「SuitCSS」などがありますが、FLOCSSはそれらのルールを 一部抜粋して、組み合わせた設計手法となります。

1-1

– 名前の由来
F oundation(ファンデーション)、 L ayout(レイアウト)、 O bject(オブジェクト)、 CSS = FLOCSS
レイヤーという概念を取り入れて、大きく3つに分類したCSSと考えると良いでしょう。 これは、一つのCSSで埋もれがちな設計をカテゴリ分けをし、それぞれファイル化して紐付けていく考え方になります。

1-2

– レイヤー化とは
「レイヤー化する」という考えは、Photoshopやillustratorを使っている人には親しみやすいと思います。 製作中に「オブジェクト」を選択しづらくなると、レイヤーごとに分ける作業と同様、コーディングも レイヤー化して修正をしやすくしているのです。

そしてFLOCSSは、CSSを拡張してより使いやすくしたメタ言語 「Sass(SCSS)」 と呼ばれるコーディング手法を組み合わせることで、レイヤー分けが出来るようになります。
※参考:【お前じゃなきゃダメだ】Sassを使おうとして疲労コンパイルしそうになった人が、やっぱり便利じゃんって惚れ直した話

FLOCSSのメリット

– FLOCSS×レイヤー化したSass(SCSS)ファイルで効力を発揮する

2-1

普段CSSでスタイルをあてていると、修正のときにソースが埋もれがちになります。これは普段の業務に例えると、書類が山積みになっている状態とにています。代理修正などは特に、わずかな修正でも設計が崩れてしまうと怯えながら対応することでしょう。

しかし、これを「仕切り」をつかい「付箋」などを貼ることにより、管理がしやすくなります。 この考えをCSS設計でも応用することにより、 誰がみてもどこに何があるのか分かる設計になるのです。

2-2

つまり、仕切りや付箋などの道具(手段)=Sass(SCSS) 、 ルール(構成・命名規則)=FLOCSSをつかうことで、いろんなスタイルを注文されても、スマートにコーディングができるようになります。

次のページ:
FLOCSSの基本構成と命名規則

 

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。