メインコンテンツまでスキップ

CSS構成案

FLOCSSをベースに、LHの案件に併せて変更を行ったルールを利用していきます。

変更箇所​

本来projectはcomponentを組み合わせた要素に対して用いるモノですが、ページ独自のスタイルを定義するモノに変更します。

また、本来componentはなるべく小さく分割する方が良いのですが、「Webサイト」としては再利用性の頻度は高くないため、**「複数ページにおいて同じレイアウトが使われている要素」**に対して適用するものとします。

SCSSディレクトリ構成​

FLOCSSの基本原則にのっとったディレクトリ構成を用意します。

- scss
  ├ foundation/
  ├ layout/
  └ object/
      ├ component/
      ├ project/
      └ utility/

注意事項​

FLOCSSに加えて幾つか独自に制限しているルールがありますので、下記のリンクを確認してください。

各レイヤーの説明​