From 82799dfa364f547f7c7a9674ed395fd49eb56ee1 Mon Sep 17 00:00:00 2001 From: harapeko Date: Sat, 15 Feb 2020 02:45:17 +0900 Subject: [PATCH 1/7] translate docs/css-in-js --- docs/docs/css-in-js.md | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index cd99bb9ee..6d1047ee0 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -1,25 +1,27 @@ --- -title: Enhancing Styles with CSS-in-JS +title: CSS-in-JS でのスタイル実装 overview: true --- -CSS-in-JS refers to an approach where styles are written in JavaScript instead of in external CSS files to easily scope styles in components, eliminate dead code, encourage faster performance and dynamic styling, and more. +CSS-in-JS とは外部 CSS ファイルを使わず、JavaScript の中でスタイルを記述するアプローチのことを指します。これはコンポーネント内のスタイルを簡単にスコープしたり、不要コード除去、パフォーマンス高速化、動的スタイリングなどをもたらします。 -CSS-in-JS bridges the gap between CSS and JavaScript: +CSS-in-JS は CSS と JavaScript の架け橋になります： -1. **Components**: you'll style your site with components, which integrates well with React's "everything is a component" philosophy. -2. **Scoped**: this is a side effect of the first. Just like [CSS Modules](/docs/css-modules/), CSS-in-JS is scoped to components by default. -3. **Dynamic**: style your site dynamically based on component state by integrating JavaScript variables. -4. **Bonuses**: many CSS-in-JS libraries generate unique class names which can help with caching, automatic vendor prefixes, timely loading of critical CSS, and implementing many other features, depending on the library you choose. +1. **コンポーネント**: コンポーネントでサイトのスタイルを設定します。これは、React の「すべてがコンポートである」という思想とうまく融合します。 +2. **スコープ**: これは 1 つめの副作用です。 [CSS Modules](/docs/css-modules/) 同様、CSS-in-JS はデフォルトでコンポーネントにスコープされます。 +3. **動的**: JavaScript 変数の活用によりコンポーネントの状態に連動して動的にサイトをスタイリングします。 +4. **おまけ**: CSS-in-JS には豊富なライブラリーがあります。キャッシュを支援する一意なクラス名の生成、ベンダープリフィックスの自動付与、クリティカル CSS の最適化ローディング、その他多くの機能をライブラリー追加できます。 -CSS-in-JS, while not required in Gatsby, is very popular among JavaScript developers for the reasons listed above. For more context, read Max Stoiber's (creator of CSS-in-JS library [styled-components](/docs/styled-components/)) article [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/). However, you should also consider whether CSS-in-JS is necessary, as not relying on it can encourage more inclusive frontend skill-sets. It is also more difficult to port styles from JSX to and from CSS. +CSS-in-JS は Gatsby において必須という訳ではありませんが、上記の理由により多くの JavaScript 開発者に人気があります。詳しく知りたい場合は、 Max Stoiber（CSS-in-JS ライブラリー styled-components の作者の一人）の記事 [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/) をご覧ください。しかしながら、CSS-in-JS が必要か、依存せずに包括的なフロントエンドのスキルセットで推しすすめることが可能どうかも熟慮しなければなりません。また、JSX から CSS への移植はかなりの労力を伴います。 -_Note that this functionality is not a part of React or Gatsby, and requires using any of the many [third-party CSS-in-JS libraries](https://github.com/MicheleBertoli/css-in-js#css-in-js)._ +**これは React や Gatsby の機能の一部ではなく、幾つかの[サードパーティ CSS-in-JS ライブラリー](https://github.com/MicheleBertoli/css-in-js#css-in-js)を使用することでもたらされます。** -> Adding a stable CSS class to your JSX markup along with your CSS-in-JS can make it easier to users to include [User Stylesheets](https://www.viget.com/articles/inline-styles-user-style-sheets-and-accessibility/) for accessibility. See [Styled Components](/docs/styled-components#enabling-user-stylesheets-with-a-stable-class-name) example. +> CSS-in-JS で JSX マークアップに 不変な CSS クラスを追加することは エンドユーザがアクセシビリティのために [User Stylesheets](https://www.viget.com/articles/inline-styles-user-style-sheets-and-accessibility/) を追加することの助けになります。[Styled Components](/docs/styled-components#enabling-user-stylesheets-with-a-stable-class-name) での例をご覧くだい。 -Keep in mind that styles aren't applied until the JavaScript loads hence a plugin to extract the styles is necessary to prevent flash of unstyled content (FOUC). To cater for this, every CSS-in-JS library has a Gatsby plugin which you need to extract styles and insert them into the HTML during builds and this prevents FOUC. +JavaScript が読み込まれるまでスタイルが適用されない事に留意すべきです。したがって、FOUC(Flash Of Unstyled Content) という CSS 適用前が表示されてしまう現象を防ぐためにスタイルを抽出するプラグインが必要になります。 -This section contains guides for styling your site with some of the most popular CSS-in-JS libraries, including how to set up global styles using each library. +この問題を解決するために、すべての CSS-in-JS ライブラリーはスタイルを抽出する為の Gatsby プラグインを持ちます。そして、抽出したスタイルをビルド時に HTML へ挿入し、これにより FOUC を防ぎます。 + +このセクションでは、特に人気の高い CSS-in-JS ライブラリーによるグローバルスタイルの設定方法が収録されています。 From 7d6712988f70a20759f7e84b6a1ec72bc44da374 Mon Sep 17 00:00:00 2001 From: harapeko Date: Mon, 17 Feb 2020 16:11:08 +0900 Subject: [PATCH 2/7] Update docs/docs/css-in-js.md Co-Authored-By: Jesse Katsumata --- docs/docs/css-in-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 6d1047ee0..18f90c639 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -12,7 +12,7 @@ CSS-in-JS は CSS と JavaScript の架け橋になります： 3. **動的**: JavaScript 変数の活用によりコンポーネントの状態に連動して動的にサイトをスタイリングします。 4. **おまけ**: CSS-in-JS には豊富なライブラリーがあります。キャッシュを支援する一意なクラス名の生成、ベンダープリフィックスの自動付与、クリティカル CSS の最適化ローディング、その他多くの機能をライブラリー追加できます。 -CSS-in-JS は Gatsby において必須という訳ではありませんが、上記の理由により多くの JavaScript 開発者に人気があります。詳しく知りたい場合は、 Max Stoiber（CSS-in-JS ライブラリー styled-components の作者の一人）の記事 [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/) をご覧ください。しかしながら、CSS-in-JS が必要か、依存せずに包括的なフロントエンドのスキルセットで推しすすめることが可能どうかも熟慮しなければなりません。また、JSX から CSS への移植はかなりの労力を伴います。 +CSS-in-JS は Gatsby において必須という訳ではありませんが、上記の理由により多くの JavaScript 開発者に人気があります。詳しく知りたい場合は、Max Stoiber（CSS-in-JS ライブラリー styled-components の作者の一人）の記事 [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/) をご覧ください。しかしながら、CSS-in-JS が必要か、依存せずに包括的なフロントエンドのスキルセットで推しすすめることが可能どうかも熟慮しなければなりません。また、JSX から CSS への移植はかなりの労力を伴います。 **これは React や Gatsby の機能の一部ではなく、幾つかの[サードパーティ CSS-in-JS ライブラリー](https://github.com/MicheleBertoli/css-in-js#css-in-js)を使用することでもたらされます。** From e452957783a36a8817b936151266999aa92cac6f Mon Sep 17 00:00:00 2001 From: harapeko Date: Mon, 17 Feb 2020 16:22:32 +0900 Subject: [PATCH 3/7] fixed line breaks as original. why? Easy diff with original. branch docs/css-in-js --- docs/docs/css-in-js.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 18f90c639..12f4282a6 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -18,9 +18,7 @@ CSS-in-JS は Gatsby において必須という訳ではありませんが、 > CSS-in-JS で JSX マークアップに 不変な CSS クラスを追加することは エンドユーザがアクセシビリティのために [User Stylesheets](https://www.viget.com/articles/inline-styles-user-style-sheets-and-accessibility/) を追加することの助けになります。[Styled Components](/docs/styled-components#enabling-user-stylesheets-with-a-stable-class-name) での例をご覧くだい。 -JavaScript が読み込まれるまでスタイルが適用されない事に留意すべきです。したがって、FOUC(Flash Of Unstyled Content) という CSS 適用前が表示されてしまう現象を防ぐためにスタイルを抽出するプラグインが必要になります。 - -この問題を解決するために、すべての CSS-in-JS ライブラリーはスタイルを抽出する為の Gatsby プラグインを持ちます。そして、抽出したスタイルをビルド時に HTML へ挿入し、これにより FOUC を防ぎます。 +JavaScript が読み込まれるまでスタイルが適用されない事に留意すべきです。したがって、FOUC(Flash Of Unstyled Content) という CSS 適用前が表示されてしまう現象を防ぐためにスタイルを抽出するプラグインが必要になります。この問題を解決するために、すべての CSS-in-JS ライブラリーはスタイルを抽出する為の Gatsby プラグインを持ちます。そして、抽出したスタイルをビルド時に HTML へ挿入し、これにより FOUC を防ぎます。 このセクションでは、特に人気の高い CSS-in-JS ライブラリーによるグローバルスタイルの設定方法が収録されています。 From 03151b418ae74e3741398522206ee171c68f493c Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 18 Feb 2020 22:43:08 +0900 Subject: [PATCH 4/7] Update docs/docs/css-in-js.md Co-Authored-By: Hirotaka Mizutani --- docs/docs/css-in-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 12f4282a6..2dcced13d 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -10,7 +10,7 @@ CSS-in-JS は CSS と JavaScript の架け橋になります： 1. **コンポーネント**: コンポーネントでサイトのスタイルを設定します。これは、React の「すべてがコンポートである」という思想とうまく融合します。 2. **スコープ**: これは 1 つめの副作用です。 [CSS Modules](/docs/css-modules/) 同様、CSS-in-JS はデフォルトでコンポーネントにスコープされます。 3. **動的**: JavaScript 変数の活用によりコンポーネントの状態に連動して動的にサイトをスタイリングします。 -4. **おまけ**: CSS-in-JS には豊富なライブラリーがあります。キャッシュを支援する一意なクラス名の生成、ベンダープリフィックスの自動付与、クリティカル CSS の最適化ローディング、その他多くの機能をライブラリー追加できます。 +4. **おまけ**: CSS-in-JS には豊富なライブラリーがあります。キャッシュを支援する一意なクラス名の生成、ベンダープリフィックスの自動付与、クリティカル CSS の最適化ローディング、その他多くの機能をライブラリーにより追加できます。 CSS-in-JS は Gatsby において必須という訳ではありませんが、上記の理由により多くの JavaScript 開発者に人気があります。詳しく知りたい場合は、Max Stoiber（CSS-in-JS ライブラリー styled-components の作者の一人）の記事 [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/) をご覧ください。しかしながら、CSS-in-JS が必要か、依存せずに包括的なフロントエンドのスキルセットで推しすすめることが可能どうかも熟慮しなければなりません。また、JSX から CSS への移植はかなりの労力を伴います。 From cadb4aff5e2b743a4c3026516533164ed40491b2 Mon Sep 17 00:00:00 2001 From: harapeko Date: Tue, 18 Feb 2020 22:49:41 +0900 Subject: [PATCH 5/7] Update docs/docs/css-in-js.md Co-Authored-By: Hirotaka Mizutani --- docs/docs/css-in-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 2dcced13d..59b642477 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -16,7 +16,7 @@ CSS-in-JS は Gatsby において必須という訳ではありませんが、 **これは React や Gatsby の機能の一部ではなく、幾つかの[サードパーティ CSS-in-JS ライブラリー](https://github.com/MicheleBertoli/css-in-js#css-in-js)を使用することでもたらされます。** -> CSS-in-JS で JSX マークアップに 不変な CSS クラスを追加することは エンドユーザがアクセシビリティのために [User Stylesheets](https://www.viget.com/articles/inline-styles-user-style-sheets-and-accessibility/) を追加することの助けになります。[Styled Components](/docs/styled-components#enabling-user-stylesheets-with-a-stable-class-name) での例をご覧くだい。 +> CSS-in-JS で JSX マークアップに不変な CSS クラスを追加することは エンドユーザがアクセシビリティのために [User Stylesheets](https://www.viget.com/articles/inline-styles-user-style-sheets-and-accessibility/) を追加することの助けになります。[Styled Components](/docs/styled-components#enabling-user-stylesheets-with-a-stable-class-name) での例をご覧くだい。 JavaScript が読み込まれるまでスタイルが適用されない事に留意すべきです。したがって、FOUC(Flash Of Unstyled Content) という CSS 適用前が表示されてしまう現象を防ぐためにスタイルを抽出するプラグインが必要になります。この問題を解決するために、すべての CSS-in-JS ライブラリーはスタイルを抽出する為の Gatsby プラグインを持ちます。そして、抽出したスタイルをビルド時に HTML へ挿入し、これにより FOUC を防ぎます。 From a2d25f9335796f9aca09f615410dfab677ade9f8 Mon Sep 17 00:00:00 2001 From: harapeko Date: Wed, 19 Feb 2020 13:59:15 +0900 Subject: [PATCH 6/7] Update docs/docs/css-in-js.md --- docs/docs/css-in-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 59b642477..a6dc99d3f 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -12,7 +12,7 @@ CSS-in-JS は CSS と JavaScript の架け橋になります： 3. **動的**: JavaScript 変数の活用によりコンポーネントの状態に連動して動的にサイトをスタイリングします。 4. **おまけ**: CSS-in-JS には豊富なライブラリーがあります。キャッシュを支援する一意なクラス名の生成、ベンダープリフィックスの自動付与、クリティカル CSS の最適化ローディング、その他多くの機能をライブラリーにより追加できます。 -CSS-in-JS は Gatsby において必須という訳ではありませんが、上記の理由により多くの JavaScript 開発者に人気があります。詳しく知りたい場合は、Max Stoiber（CSS-in-JS ライブラリー styled-components の作者の一人）の記事 [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/) をご覧ください。しかしながら、CSS-in-JS が必要か、依存せずに包括的なフロントエンドのスキルセットで推しすすめることが可能どうかも熟慮しなければなりません。また、JSX から CSS への移植はかなりの労力を伴います。 +CSS-in-JS は Gatsby において必須という訳ではありませんが、上記の理由により多くの JavaScript 開発者に人気があります。詳しく知りたい場合は、Max Stoiber（CSS-in-JS ライブラリー styled-components の作者の一人）の記事 [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/) をご覧ください。しかし、CSS-in-JS が必要かどうかは検討する必要があります。CSS-in-JS に依存しない実装は、より包括的なフロントエンドのスキルセットを促進することができるからです。また、JSX から CSS への移植はかなりの労力を伴います。 **これは React や Gatsby の機能の一部ではなく、幾つかの[サードパーティ CSS-in-JS ライブラリー](https://github.com/MicheleBertoli/css-in-js#css-in-js)を使用することでもたらされます。** From e5ed8209184d48327b47378f90a03515f175b890 Mon Sep 17 00:00:00 2001 From: harapeko Date: Thu, 20 Feb 2020 01:07:09 +0900 Subject: [PATCH 7/7] Update docs/docs/css-in-js.md Co-Authored-By: Yasuaki Uechi --- docs/docs/css-in-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index a6dc99d3f..0ea1295c1 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -12,7 +12,7 @@ CSS-in-JS は CSS と JavaScript の架け橋になります： 3. **動的**: JavaScript 変数の活用によりコンポーネントの状態に連動して動的にサイトをスタイリングします。 4. **おまけ**: CSS-in-JS には豊富なライブラリーがあります。キャッシュを支援する一意なクラス名の生成、ベンダープリフィックスの自動付与、クリティカル CSS の最適化ローディング、その他多くの機能をライブラリーにより追加できます。 -CSS-in-JS は Gatsby において必須という訳ではありませんが、上記の理由により多くの JavaScript 開発者に人気があります。詳しく知りたい場合は、Max Stoiber（CSS-in-JS ライブラリー styled-components の作者の一人）の記事 [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/) をご覧ください。しかし、CSS-in-JS が必要かどうかは検討する必要があります。CSS-in-JS に依存しない実装は、より包括的なフロントエンドのスキルセットを促進することができるからです。また、JSX から CSS への移植はかなりの労力を伴います。 +CSS-in-JS は Gatsby において必須という訳ではありませんが、上記の理由により多くの JavaScript 開発者に人気があります。詳しく知りたい場合は、Max Stoiber（CSS-in-JS ライブラリー styled-components の作者の一人）の記事 [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/) をご覧ください。しかし、CSS-in-JS が必要かどうかは検討する必要があります。CSS-in-JS に依存しない実装は、より包括的なフロントエンドのスキルセットを促進できるからです。また、JSX から CSS への移植はかなりの労力を伴います。 **これは React や Gatsby の機能の一部ではなく、幾つかの[サードパーティ CSS-in-JS ライブラリー](https://github.com/MicheleBertoli/css-in-js#css-in-js)を使用することでもたらされます。**