SCSS設計 関連ファイル作成コマンド【Rails】

FLOCSS設計

FLOCSS設計を採用した場合。

構成

├──foundation/
├──layout/
└──object/
    ├──component/
    ├──project/
    └──utility/

作成コマンド。

#ディレクトリ作成
mkdir app/assets/stylesheets/foundation
mkdir app/assets/stylesheets/layout
mkdir -p  app/assets/stylesheets/object/component
mkdir app/assets/stylesheets/object/project
mkdir app/assets/stylesheets/object/utility

#ファイル作成
#foundation等
touch app/assets/stylesheets/_common-imports.scss
touch app/assets/stylesheets/foundation/_base.css
touch app/assets/stylesheets/foundation/_reset.css

#layout
touch app/assets/stylesheets/layout/_header.scss
touch app/assets/stylesheets/layout/_footer.scss
touch app/assets/stylesheets/layout/_main.scss
touch app/assets/stylesheets/layout/_sidebar.scss

#object
touch app/assets/stylesheets/object/component/_heading.scss
touch app/assets/stylesheets/object/component/_link.scss
touch app/assets/stylesheets/object/component/_button.scss
touch app/assets/stylesheets/object/component/_table.scss
touch app/assets/stylesheets/object/component/_form.scss
touch app/assets/stylesheets/object/component/_variables.scss

_common-imports.scss

@import "foundation/*";
@import "layout/*";
@import "object/*";

application.scss

@import "common-imports";

参考

• hiloki/flocss: CSS organization methodology.
• 破綻しにくい CSS 設計手法と命名規則 | murashun.jp
• より良いCSSを書くための様々なCSS設計まとめ | UX MILK

FLOCCSではないが実際のプロジェクトのCSS設計を見るのも勉強になる。

github.com