CSS-in-JS

CSS-in-JSは、 JavaScriptを使用してコンポーネントのスタイルを設定するスタイル設定手法です。このJavaScriptが解析されると、CSSが（通常は要素として）生成され、 DOM<style>に添付されます。これにより、JavaScriptを使用して宣言的かつ保守しやすい方法でスタイルを記述することで、CSSをコンポーネントレベル自体に抽象化できます。この概念は、次のようなライブラリの形で複数の実装があります

• 感情^[1]
• スタイル付きコンポーネント^[2]
• JSS ^[3]
• Tailwind CSS

これらのライブラリを使用すると、タグ付きテンプレートリテラルを使用してスタイル付きコンポーネントを作成できます。たとえば、Reactプロジェクトでスタイル付きコンポーネントを使用するのは次のようになります

import styled from 'styled-components' ; // 青いテキストで <p> 要素をレンダリングするコンポーネントを作成します。const BlueText = styled . p ` color   : blue; ` ;   

   



< BlueText >私の青いテキスト< /BlueText>  

CSS-in-JS によって実現できる成果の中には、従来のCSS技術では得られないものもあります。いくつかの条件文を記述するだけで、スタイルを動的に変更できます。また、プログラマーはよりモジュール化されたコードを記述することもできます。CSS をプログラマーの JavaScript と同じブロックにカプセル化し、そのモジュールのみに適用することも可能です。

業界での使用

CSS-in-JSは、Reddit、Patreon、Target、Atlassian、Vogue、GitHub、Coinbaseで使用されています。^[4]

参考文献

1. 「感情 - 入門」emotion.sh。2019年7月3日閲覧
2. styled-components. "styled-components". styled-components . 2019年7月3日閲覧。
3. "JSS". cssinjs.org . 2019年7月3日閲覧。
4. 「CSS-in-JSの詳細な説明」。Alibaba Cloudコミュニティ。2023年7月5日閲覧。