Kakera.link

CSSガイドライン(小規模〜中規模・Tailwindと併用)

シャッフルコンテンツを読み込む[シャッフル] サイズについて
[シャッフル] ファイル名について
[シャッフル] id/classのデザインについて

ファイル名について

以下の形に分けたものを、application.scss などでまとめる。
まとめる順番は下の順に合わせる。

パーツ

_elements.buttons
_elements.navs

コンポーネント

パーツを複数組み合わせたもの。
フォームの中に含まれるボタンは汎用的なもの(_elements.buttons に書かれたもの)を使う場合はこの中には書かず、フォーム全体のレイアウトについてを書くイメージ(フォーム特有のボタンを使う場合は、この中にボタンについても書く)
_components.forms
_components.videoplayer

ページ

ページ固有のもの(基本的にRailsのcontroller単位)
_pages.videos
_pages.rooms

ライブラリ

_libraries.load
など

設定系(色・プリント設定など)

_settings.colors
_settings.print

全体で使う共通の関数

_mixins


css
@function rem-calc($size) {
$remSize: $size / 16;
@return #{$remSize}rem;
}

強制上書き(できるだけ使わない)

_trumps.links
など

最終更新: 2022/08/25 17:06