スタイリングをどうするか(styled-component, tailwind....)

remon

5年以上前に作られたプロジェクトのデザイン改修を行う。

その際にどうやってスタイリングを行うかを検討する。

既存のものはSassを使っているが、特にルールはなく、いろんな人が継ぎ足した数千行のファイル。

検討しているのは

styled-components
tailwind-css
chakra ui

remon

一番大事にしたいのは保守性。
プロジェクトの寿命が長いので、10年後も使われている可能性が非常に高い。

保守がしんどいと感じるのは・・・

影響範囲がわかりにくい
影響範囲がでかい
Aを実現するのにまずBをどうにかしなきゃならない

スキルレベルが異なる人が作っても、いいかんじになる

影響範囲をわかりやすくする & 狭くする

→ css-in-jsやscoped css でよさそう。

tailwind css が良さそうだが

グローバルなのでローカルスコープにしたい。

classNameは文字列指定なので、せっかくTypeScriptを使うなら型安全にできると嬉しい？

styleを毎回打たないと行けない。エディタの保管を使いたい。
無効なcssが指定されている

くらいのモチベーションならeditor のプラグインとか　linterを使えばよいかも？

remon

styled component & utilty base をやってみる

const Text = styled.span`
  .white { color: white; }
  .bold { font-weight: bold; }
  .sm { font-size:  0.9rem }
`

<Text className="white bold sm"/>

remon

スタイルを当てられるものと、当てられないものの制約をつけれそう？

color は text 関連のみ

marginを指定できるのはcontainerのみとか

styled-componentsのasを使えば？

<Text as="p" className="" />
<Text as="span" className="red" />

const Box = styled.div`
/* border-radius */
/* padding */
`

例えばtagみたいなのがあるとしたら


const Tab = styled.span`
スタイルを書く
`

としてspanとして表現することもできるが、あえて

<Box className="bg-red p-sm raund-sm ">
  <Text className="sm white" >React</Text>
</Box>

としておくとか

それかレイアウトはReactのコンポーネントに任せるというのも手？

<HStack space={1}>
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</HStack>

marginをcontainerだけにするのは厳しいかも・・

zennの今かいてる画面のも多分こうなる


<Flex className="padding-sm">
   <IconButton name="file-upload"/>
  <IconButton name="plus"/>
  <Button className="margin-left-auto">キャンセル </Button>
  <Button className="margin-left-sm"> ボタン</Button/>
</Flex>

remon

フレームワークのドキュメントを見ると、早く作れるというのをコンセプトにしている事が多い。

現在のプロジェクトで早く作れるメリットはほぼない。

なんの課題を解決するために作られたか、誰のために作られたかは少しは気にしたほうがいいですね。

remon

Marginの扱い方をどうするか

A, Space的なコンポーネントを作る

<Button>キャンセル</Button>
<Space width="5px"/>
<Button>OK</Button>

<Spacer/>てきなコンポーネントは見かけることはある。

B, Margin コンポーネントを作る

<Button>キャンセル</Button>
<Margin left="5px">
  <Button>OK<Button>
</Margin>

class baseだとすべてのフロントのフレームワークで使い回せるが、
この作りだとReactから移行する際のコストが少し掛かるかもしれない。

そもそも見た目に関するスタイルと、レイアウトに関するスタイルをうまく分離したい
というのがモチベーション。

可読性や保守性を落としてまで目指すメリットがあるのか？

remon

現状...

見た目に関するスタイルは

styled-component を tailwindを参考にした感じで調整する。

レイアウトに関するものは、レイアウトコンポーネントを作成して指定する
と良さそう？

<Center/>
<Flex/>
<Grid/>
<Margin/>

この辺はいけそうだとして

position: absoluteや、Stickyとか
あとはz-indexとかも

どうしよう・・

remon

Marginコンポーネントを作って使ってみた

<Button></Button>
<Margin.sm/>
<Button></Button>

最初は使いやすくていい感じかもと思ったけど、
記述箇所が多いので、一気に冗長になってしまう。

これはやめよう・・

Stackを積極的に使うことで解決できるかも。

remon

結論。

いちばん大事なのは統一されること。

space ( margin, padding)

color ( color background-color)

font-size

こいつらがきちんと定義されていればいい。

tailwindcss
https://getbootstrap.com/docs/4.0/utilities/spacing/

tailwind-cssはやりすぎ。
componentごとに定義したいときもあるし、
hoverとかあまり向いていない気がする。

多分こうゆうutiltyのほうが必要。

.basic-hover-animation {
  transition: 0.2s;
  &:hover {
    background: ...
     box-shadow: ...
     transform...
   
  }
}


あと、結局npmで管理して、buildしたりしないといけなくなり
複雑になる（かなり軽微な部類だが）






またscoped-cssは必要だと思う。
bemとかいらないし、シンプルに書ける。

それか基本的にこんぽーねんとを作る気がする。


export const Button  = styled.button`

`
export const Input  = styled.button`

`

あとプロジェクト的に、class = React, Vue, Angular どれにも依存しないというメリットが有る。

あとは、どうゆうふうに色を使うだけど

css variableなのかな・

border box-shadow とか多分componentにしかつけない気がする。

つまりtailwindは必要ない。
上記4つがあればよく、
また、UI componentをしっかり定義すれば、基本的に困らない気がする。

あとlayout utilもあるといいけど、こっちはcssでなくても以下も。

<Text  className="sm  bold center"/>

的なのは便利だけど、グローバルに定義するかは微妙。

保管をどこまで使うか。

editorの機能やTypeScriptで型定義をしてあげると、きちんとつけられる気がする。
不要なクラスが指定されることも防げるけど・・・

短いからわかる？
lintで防ぐ？