RUrushi
@RUrushi (漆 柳太)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

scssの_typography.scssについて

Discussion

Closed

解決したいこと

Laravel11+React18+scssでプロジェクトを作成しています。scssのディレクトリ構成を以下のように作成しています。

project-root/
├── resources/
│   ├── sass/
│   │   ├── abstracts/
│   │   │   ├── _variables.scss
│   │   │   ├── _mixins.scss
│   │   │   └── _functions.scss
│   │   ├── base/
│   │   │   ├── _reset.scss
│   │   │   ├── _typography.scss
│   │   │   └── _base.scss
│   │   ├── components/
│   │   │   ├── _buttons.scss
│   │   │   └── _cards.scss
│   │   ├── layout/
│   │   │   ├── _header.scss
│   │   │   ├── _footer.scss
│   │   │   ├── _sidebar.scss
│   │   │   └── _grid.scss
│   │   ├── pages/
│   │   │   ├── _home.scss
│   │   │   ├── _about.scss
│   │   │   └── _contact.scss
│   │   ├── themes/
│   │   │   ├── _theme.scss
│   │   └── vendors/

上記の_typography.scssに何を書いていいか迷っています。現在は以下の内容を入れるように心がけています。

font-family
font-size
font-weight
font-style
font-variant
font
line-height
letter-spacin
word-spacing
text-align
text-decorati
text-transfor
text-indent
text-shadow
white-space
word-break
overflow-wrap
direction
unicode-bidi
color

みなさんのご意見を聞きたいです

0

意図がはっきり掴めかねますが,どういうプロパティが含まれるかというよりは,処理段階として文字通り「何を書きたいか」を重視して,ディレクトリ構造と一致させるべきように思います.
リポジトリを見る側からすればbaseと銘打ったディレクトリの中にある_typography.scssということなので,HTMLで標準的に用いる文法要素の見栄えを調整するのに使う,というイメージをします.(個人の感覚なので何ともですが,UtilityFirstなCSSならrebootの延長線上にある気はします)
参考までにBootstrapのTypographyのページを置いておきます.

少なくともカスタムコンポーネントを用意するようなCSSプロジェクトにおいて,コンポーネント別の処理をbaseなんぞに書かないほうが良いというのは確かです.現在のSCSSは@useで使う関係上,依存関係がややこしいとえらい目に遭います.

2Like

Your answer might help someone💌