t-morisawa/idea-factory-xyz

idea-factory-xyzとscamperの統合計画[CSS編]

t-morisawa opened this issue · 4 comments

t-morisawa commented

背景

  • 使っているCSSフレームワークが統一されていない
  • また、それらの組み込み方法もバラバラである
  • そもそも本当にCSSフレームワークが必要なのかどうかという話もある

やること

統合後のCSSをどうするか決める

t-morisawa commented

GatsbyではReact同様、どのようにスタイリングするかについての規定はない。

ただし以下のページでCSS Modulesの使用が勧められてはいる。
https://www.gatsbyjs.org/docs/css-modules/

css in js は外部ライブラリ(styled-componentsなど)の導入が必要。
今必要性を感じてないなら導入しなくて良さそうだと思う。

今の作り

  • gatsby: CSS Module. bootstrapのscssをimportして使っている
  • scamper: semantic-ui-reactで配布されているコンポーネントを利用しており、スタイルは隠蔽されている

（WIP）方針

  • bootstrapを捨てて、生のCSSをCSS Modulesとして開発していく
  • semantic-ui-reactを全ページで使っていく

bootstrapをReactで使う場合の選択肢

react-bootstrap というツールを利用する。
コンポーネントとして読み込むのが基本だが、scssやcssをCSS Moduleとして利用するという方法もあり、今回のケースではこちらを使っている。

ただし面倒なのでやめたい感じ。

Bootstrapではspacing apiが提供されており、idea-factoryではこれを利用している。
しかし、これ使うなら生のCSSでいいと思う

Semantic UIでは、Containerというオブジェクトがいい感じにしてくれる。
多分Bootstrapでも同じようなことができるはず

      <Container style={{ marginTop: '2em' }}>
t-morisawa commented

Bootstrapの実装の見直しをしていくことにした。
#53

t-morisawa commented

Gatsbyの標準的なCSS ModulesでSassやPostcssプラグインを使うことはできる？

t-morisawa commented

GatsbyではReact-Bootstrapは使っておらず、bootstrapパッケージを利用している