LESSやSCSSなど、CSSプリプロセッサ言語（メタ言語？この辺の呼び名がわかってない...）を使って長くなってきたので、その中で身につけてきた構成＆記載ルールをメモメモ。

※ファイル名は、SCSSで記載していきます～。

ファイル構成について

ファイルの分割と、その整頓はこんなカンジ。

style.scss
base
- _reset.scss
- _base.scss
- _function.scss
- _form.scss
theme
- _color.scss
- _font.scss
- _size.scss
- _animation.scss　※
template
- _header.scss
- _footer.scss
- _layout.scss　※
- 他

（※：必要な時にだけ登場するもの）

これに追加で、作成物に応じて「pageフォルダ」や、「partsフォルダ」とかを作成し、中身を追加していく。

お決まりのファイルは何をするものぞ？

style.scss

全部import
TEST用・temporaryにちょこっとなにかしときたいもの ex.)ヴァーティカルリズムの背景をつける/どうするか決まってないけど、とりあえず、文章のヘッダーだけなんかわかるようにしたい。

base（フォルダ）

ベーシックなものを設定していきます～

_reset.scss

そのまま。俗にいうreset.cssなものを、そのまま拡張子変更。
個人的に、hxに[font-weight:normal;]を追加してる。

_base.scss

resetとは違うけど、こうしときたいんだよ～、なものを記載。
htmlやbodyの設定、
imgに[max-width]つけたり、aの扱いどうするかとかに使ってる。

_function.scss

いくつかのCSSプロパティをまとめておきたいものとかを記載。
最近は clearfix についてだけになってきたかも...

_form.scss

フォームのベーシック設定。（サイズ感とか、ベースのデザインとか。）
デザインのリセットがこっちに入れるか、「reset.scss」にいれるかまだフワフワしてる。

theme（フォルダ）

_color.scss

色の変数の設定。

_font.scss

フォントについての設定。
pxとremで展開できるmixinや、フォントファミリーの設定、アイコンフォントのincludeとかなんかこちらで。
※個人的にはアイコンフォントは、好きに:before :afterどっちにもつけたいから、
ここで、必要なものを設定しなおしたりしてます。

_size.scss

サイズ感や、breakpointの設定。
ベースサイズやコラム、ヘッダーフッターのサイズを変数に置いときたいときとか、こちらに記載。

_animation.scss

必要がある時だけ登場するファイル。
animationの設定をここにひとまとめして、各ファイルから呼び出し（って言う？）。

template（フォルダ）

全体の構成を作るファイルを設置するに利用

_header.scss

ヘッダーについて。

_footer.scss

フッターについて。

_layout.scss

コラムの設定など、ページの全体構成のレイアウト設定を記載。

その他

ひたすら縦に積む構成ときに、
「_vertical.scss」
などのファイルを登場させて、各パーツのmaginとpaddingだけ設定していったりしてる。

その他、お決まりじゃないファイル構成

その時々で

page
parts

などのフォルダを登場させます。

page

layoutと似てるけど、もっと細い設定を書く。
HTMLファイルなり、なんなり構成上区切ったページのタイトルと、scssファイル名を一致させる。
ファイル全体を、idなど、そのページのアイデンティフィで囲む。

↓

HTML

<main data-page="top">
  ...
</main>

SCSS

[data-page="top"]{
  ...
}

ページの構成と、ページの中の要素を別々に記載する。

↓