styled-jsxを使うことにした

参考

堅牢なCSSをReactに手軽に実装できるstyled-jsx Static files, styled-jsx and CSS modules in Next.js

考え

StyledComponentのフレームワークMaterial UIを暫らく使ってましたがコーディング中に思考停止を感じていました。 そこで感じたことは「タグ内で閉じられてるから考える必要なく好きに書けて楽」という感覚です。

これの何がいけないのか色々ありますが、恥ずかしいことにみるみるうちに大量のコードが生産されました。 原因の一つにタグで閉じるからコードが増えるということがあります。

色々やってみてしばらく考えた末CSSフレームワークは使わない方快適という自分の考えに至りました。 まずグローバルCSSの考え方としてカスタムクラスネームはグローバルに切り出すものじゃないと思っています。

増えれば増えるほど衝突率が上がるのは必然で、CSSのコードも少ないに越したことはないのは理想です。

そこで考えたのがどういう単位で閉じ込めるのが最適なのかということでした。 細分化して分けると以下になると思います。

• グローバル単位

• コンポーネント単位

• タグ単位

ここで忘れてはいけないのが、 どこに記述を置くべきかが考えることであり、決して書くことを減らせる、楽ができるという魔法は決してあり得ないことです。

そしてどうすれば思考停止しないで気持ちよくCSSが作れるのかを考えました。

• Global SCSS: (初期値のHTML, 例えばpタグやh1~6タグ, fromタグやinputタグなど)

• CSS Modulesかstyled-jsx(スコープがコンポーネント単位で閉じられている)

グローバルに宣言したCSSは設計フレームワーク通りに作られたとしても、命名規則がしっかりしていたとして、少しの改修で簡単に壊れる結局のところグローバルのデブリです。

ここに載せるかも微妙なところではありますが、サンプルとしては以下のような感じです。 もちろん切ってstyles/pages/indexStyles.tsのように管理していいです。 その際 関数名はコンポーネントに対して一意である必要があるのでstylesではなく必ずindexStylesの様にするべきかもしれません。

index.tsx

const Index = (): JSX.Element => {
  const styles = css`
    .test {
      color: orange;
    }
    .Orange_text {
      color: var(--color-icon);
    }
  `;
  return(
    <Framer>
      <OG title="home" description="Index" />
      <main>
        <div className="Orange_text">Home root</div>
      </main>
      <style jsx>{styles}</style>
    </Framer>
    );
};

export default Index;

テンプレートリテラル内に表記されて補完が効かないためstyled-jsx Language Server(補完)とstyled-jsx(ハイライト)を使ってみましたがいい感じです。 もちろんファイルを切り出してフォルダで管理することもできますね。

あとはstylelintさえ効かせれば気軽にページ単位で閉じ込められるのでとても使いやすいですね。

styled-componentsはフレームワークとして使わない場合スタイルするだけのタグコンポーネントができてしまうので個人的には微妙でした。

フレームワーク系も基本的に煩雑になりすぎる傾向があり可読性を重視したいのでこれらも個人的に微妙でした。

これはネタですが「宗教的にCSSフレームワークは個人的には推奨してない」と言い切ることが出来ます。おすし。

とはいえCSSのリファクタリングってそこまで難しくもないので時間あるなら好きに作ればいいんじゃんと言うスタイルですね。

styled-jsxはscss(sass)がswcじゃなくbabelにしないと使えないところがやや難がありました。

最後にCSS Modulesのメンテナンス状況ですがNext13でスタイルが読み込みが遅い不具合が出ているのでcss-loaderかNext.jsの対応待ちでそれまではstyled-jsxが使われていくんじゃないかと予想してます。

スタイルが抜けるところだけstyled-jsxで作りそれ以外はCSS Modulesにするしかないのか。 試行錯誤は続きそうです。