フロントの勉強はじめました!

こんばんは!かーるです。

初めてHTML,CSSに触れたのは、1年と少し前でした。
書籍を1冊読みながらコーディングを進めていくスタイルのもので、
「簡単やな〜」なんて思っていましたが大間違いでしたね!

今勉強しているのはFLOCSSです。

FLOCSSの構成は次の3つのレイヤー。

1. Foundation

2. Layout

3. Object




1. Foundation
reset.cssなど。ベースの中のベースって感じ!
SMACSSのBaseカテゴリと同じ考え方。

2. Layout
ヘッダー、フッターを例に挙げると1番わかりやすい!
あとはサイドバーなど。
プロジェクトに共通するエリア、スタイルを定義する。

3. Object
ObjectはComponenet,Project,Utirityの3つのレイヤーに分けられる。

・Component
プロジェクト中で繰り返し利用されるパーツ。
よく例に挙げられているのが、button。

・Project
あんまり使わないやつ。
componentとProjectの使い分けがわからなかったのですが、
「あんまり」の頻度をチーム内で3回までとか決めたら良いらしいです!
これトップページでしか使わないよね、、、みたいなものはここ。

・Utility
ComponentとProjectで対処できないものと、スタイルの微調整をここに書く。


実例が公式に詳しく書かれています。
https://github.com/hiloki/flocss


今日はここまで〜

Curl

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です