{"id":14990539,"url":"https://github.com/stereobooster/css-in-js-101","last_synced_at":"2025-04-13T08:39:51.160Z","repository":{"id":66225524,"uuid":"112879379","full_name":"stereobooster/css-in-js-101","owner":"stereobooster","description":"💈 CSS-in-JS 101: All you need to know","archived":false,"fork":false,"pushed_at":"2022-11-14T10:31:54.000Z","size":8307,"stargazers_count":250,"open_issues_count":2,"forks_count":9,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-27T00:13:17.653Z","etag":null,"topics":["css-in-js","css-modules","react","ssr"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stereobooster.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-02T21:48:22.000Z","updated_at":"2023-07-03T00:49:11.000Z","dependencies_parsed_at":"2023-03-21T20:17:52.388Z","dependency_job_id":null,"html_url":"https://github.com/stereobooster/css-in-js-101","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":"0.052631578947368474","last_synced_commit":"e7e50cf29488edaeb4577840d3104cf702428aae"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stereobooster%2Fcss-in-js-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stereobooster%2Fcss-in-js-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stereobooster%2Fcss-in-js-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stereobooster%2Fcss-in-js-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stereobooster","download_url":"https://codeload.github.com/stereobooster/css-in-js-101/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248685392,"owners_count":21145276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-in-js","css-modules","react","ssr"],"created_at":"2024-09-24T14:20:19.266Z","updated_at":"2025-04-13T08:39:51.135Z","avatar_url":"https://github.com/stereobooster.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine)\n\n# CSS-in-JS 101 [![Twitter Follow](https://img.shields.io/twitter/url/http/shields.io.svg?style=social\u0026label=Follow)](https://twitter.com/stereobooster)\n\n![CSS-in-JS 101](images/css-in-js.png)\n\n\u003c!-- toc --\u003e\n\n- [What is CSS-in-JS?](#what-is-css-in-js)\n- [Inline styles](#inline-styles)\n  * [Pros](#pros)\n  * [Cons](#cons)\n  * [Inline styles vs CSS-in-JS](#inline-styles-vs-css-in-js)\n- [Style tag](#style-tag)\n  * [Pros](#pros-1)\n  * [Cons](#cons-1)\n- [CSS Modules](#css-modules)\n  * [Pros](#pros-2)\n  * [Cons](#cons-2)\n  * [Dead Code Elimination, Critical CSS](#dead-code-elimination-critical-css)\n- [Global Name Space, Globally Unique Identifier](#global-name-space-globally-unique-identifier)\n- [Dependencies](#dependencies)\n- [Minification](#minification)\n  * [Traditional CSS minification](#traditional-css-minification)\n  * [Minification of class name](#minification-of-class-name)\n  * [Dead Code Elimination](#dead-code-elimination)\n  * [Critical CSS](#critical-css)\n  * [Automatic Atomic CSS](#automatic-atomic-css)\n- [Sharing Constants, variables in CSS](#sharing-constants-variables-in-css)\n  * [Sharing variables inside CSS](#sharing-variables-inside-css)\n  * [Sharing variables in CSS and exposing it to JS](#sharing-variables-in-css-and-exposing-it-to-js)\n  * [Passing variable from JS to CSS](#passing-variable-from-js-to-css)\n- [Non-deterministic Resolution](#non-deterministic-resolution)\n- [Isolation](#isolation)\n- [Theming](#theming)\n  * [Overriding styles](#overriding-styles)\n  * [Overriding theme variables](#overriding-theme-variables)\n- [SSR, Server-Side Rendering](#ssr-server-side-rendering)\n  * [HTML SSR](#html-ssr)\n  * [CSS SSR](#css-ssr)\n- [Zero runtime dependency](#zero-runtime-dependency)\n- [CSS-in-JS implementation specific features](#css-in-js-implementation-specific-features)\n  * [Non-DOM targets](#non-dom-targets)\n  * [CSS as object (object literal)](#css-as-object-object-literal)\n  * [CSS as template literal](#css-as-template-literal)\n  * [Framework agnostic](#framework-agnostic)\n  * [Build step](#build-step)\n  * [Dynamic](#dynamic)\n  * [Generate components based on CSS](#generate-components-based-on-css)\n  * [Developer tools integration](#developer-tools-integration)\n- [Progressive enhancement, graceful degradation](#progressive-enhancement-graceful-degradation)\n- [Uncovered subjects](#uncovered-subjects)\n  * [Security](#security)\n  * [Async components](#async-components)\n  * [CSS-in-JS and Async components](#css-in-js-and-async-components)\n  * [Atomic CSS](#atomic-css)\n  * [Animations](#animations)\n\n\u003c!-- tocstop --\u003e\n\n## What is CSS-in-JS?\n\nCSS-in-JS is an umbrella term for technologies which help you define styles in JS in more component-approach-way. The idea was introduced by `@vjeux` in 2014. Initially, it was described as inline styles, but since then battlefield changed a lot. There are about 50 different solutions in this area.\n\n#### References\n\n- [@vjeux, 2014][@vjeux, 2014]\n- [Big list of CSS-in-JS solutions](http://michelebertoli.github.io/css-in-js/)\n- [Comparison of CSS-in-JS by styled-components](https://github.com/styled-components/comparison/pull/44)\n- [Yet another comparison](http://seifi.org/css/sxsw-slides-css-in-react-the-good-the-bad-and-the-ugly.html)\n\n## Inline styles\n\nThis is built in feature of React. You can pass styles as an object to the component and it will be converted to the string and attached as style attribute to the element.\n\n### Pros\n\n- No `global namespace`\n- `Full isolation`\n- No `non-deterministic resolution`\n- Clear `dependencies`\n- `Dead code elimination`\n- `Variables, Passing variable from JS to CSS`\n\n### Cons\n\n- Code duplication in case of SSR.\n- Additional costs in JS payload. Remember that styles which are embedded in JS are not for free. It is not only about download time, it is also about parsing and compiling. See [this detailed explanation by Addy Osmani, why JS is expensive](https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e)\n- No media queries (`@media`)\n- No CSS animations (`@keyframes`)\n- No pseudo classes (`:hover`)\n- No web fonts (`@font`)\n- No autoprefixer (well there is [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer))\n\n#### Example\n\n**TODO**: verify\n\nJSX:\n\n```jsx\nhundred_length_array\n  .map(x =\u003e \u003cdiv key={x} style={{color: \"#000\"}}\u003e\u003c/div\u003e)\n```\n\nGenerated HTML:\n\n```html\n\u003cdiv style=\"color:#000\"\u003e\u003c/div\u003e\n...(98 times)\n\u003cdiv style=\"color:#000\"\u003e\u003c/div\u003e\n```\n\n### Inline styles vs CSS-in-JS\n\n`@mxstbr` differentiate `Inline styles` and `CSS-in-JS`. By `Inline styles` he means React built-in support for style attribute and by `CSS-in-JS` he means a solution which generates CSS and injects it via style tag.\n\nOn the other hand, `CSS-in-JS` is the term coined by `@vjeux` in 2014 and he meant `Inline styles`. `Inline styles` is not React-only feature. There is, for example, Radium which also uses `inline styles`.\n\nSo I would suggest to use `CSS-in-JS` as an umbrella term and specify implementation:\n- inline styles\n- style tag. Also can be referred as \"style element\" or \"real CSS\"\n- mixed (like Radium)\n\n#### References\n\n- [@mxstbr, 2016][@mxstbr, 2016]\n\n## Style tag\n\nThis approach is alternative to `Inline styles`. Instead of attaching styles as property to the element you are inserting real CSS in style tag and append style tag to the document.\n\nPros and cons can vary from implementation to implementation. But basically, it looks like this:\n\n### Pros\n\n- (Almost) No `global namespace`\n- (Almost) `Full isolation`\n- (Almost) No `non-deterministic resolution`\n- Clear `dependencies`\n- `Dead code elimination`\n- `Variables` (depends on implementation)\n- No code duplication in case of SSR\n- Additional costs in JS payload (depends on implementation)\n- Media queries (`@media`)\n- CSS animations (`@keyframes`)\n- Pseudo-classes (`:hover`)\n- Web fonts (`@font`)\n\n### Cons\n\nCons depend on implementation.\n\n#### Example\n\n[from this blog post](https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974):\n\n```js\nconst MyStyledComponent = props =\u003e\n  \u003cdiv className=\"styled\"\u003e\n    Hover for red\n    \u003cstyle dangerouslySetInnerHTML={{__html: `\n      .styled { color: blue }\n    `}} /\u003e\n  \u003c/div\u003e\n```\n\nGenerated HTML:\n\n```html\n\u003cdiv class=\"styled\"\u003e\n  Hover for red\n  \u003cstyle\u003e      .styled { color: blue }    \u003c/style\u003e\n\u003c/div\u003e\n```\n\n## CSS Modules\n\nA CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (url(...)) and @imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules).\n\n### Pros\n\n- (Almost) No `global namespace`\n- (Almost) `Full isolation`\n- (Almost) No `non-deterministic resolution`\n- Clear `dependencies`\n- (Almost) `Dead code elimination`\n- `Variables, Sharing variables in CSS and exposing it to JS`\n- No Code duplication in case of SSR\n- No Additional costs in JS payload.\n- Media queries (`@media`)\n- CSS animations (`@keyframes`)\n- Pseudo-classes (`:hover`)\n- Web fonts (`@font`)\n- Autoprefixer\n\n### Cons\n\nSee all points with \"(Almost)\"\n\n### Dead Code Elimination, Critical CSS\n\nStrictly speaking, there are no official solutions to those problems in `CSS Modules`, but there is some work in this direction. Correct me if I'm wrong if there is one, why isn't it promoted?\n\n- [Comment by @sokra on critical CSS](https://github.com/webpack-contrib/style-loader/pull/159#issuecomment-286729044)\n- [isomorphic-style-loader](https://github.com/kriasoft/isomorphic-style-loader)\n- [Support Tree shaking of CSS ](https://github.com/webpack-contrib/css-loader/issues/506)\n- [Atomic CSS a la styletron](https://github.com/deamme/styletron-loader)\n- [CSSO scopes](https://github.com/css/csso#scopes)\n\n#### References\n\n- [css-modules](https://github.com/css-modules/css-modules)\n- [@markdalgleish, 2015][@markdalgleish, 2015]\n\n## Global Name Space, Globally Unique Identifier\n\nAll declarations in CSS are global, which is bad because you never know what part of application change in global scope will affect.\n\n#### Possible solutions\n\n- Attach styles to each element (`Inline styles`)\n- Use Globally Unique Identifiers for classes (`CSS modules`)\n- Use naming conventions (BEM and others)\n\n#### References\n\n- [@vjeux, 2014][@vjeux, 2014]\n\n## Dependencies\n\nAbility to programmatically resolve dependency between component (JS and HTML) and styles, to decrease error of forgetting to provide appropriate styles, to decrease fear of renaming CSS classes or moving them between files.\n\n#### Possible solutions\n\n- bundle styles with-in component (CSS-in-JS)\n- `import styles from \"styles.css\"` (CSS modules)\n\n#### Related\n- `Dead Code Elimination`\n\n## Minification\n\nThere is more than one aspect of minification. Let's explore:\n\n### Traditional CSS minification\n\nThis is the simplest approach - remove whitespace, minify color name, remove unnecessary quotes, collapse CSS rules etc. See big list of minifiers [here](https://goalsmashers.github.io/css-minification-benchmark/)\n\n### Minification of class name\n\nIn CSS modules and CSS-in-JS you do not use class names directly, instead, you use JS variables, so class names can be easily mangled.\n\nNote: This type of minification is not possible for traditional CSS.\n\n#### Example\n\n```js\nimport styles from \"styles.css\";\n\n\u003cdiv className={styles.example} /\u003e\n```\n\n`styles` compiles to `{ example: \"hASh\"}`\n\n### Dead Code Elimination\n\nBecause there is no connection between JS/HTML and CSS, you cannot be sure if it is safe to remove some parts of CSS or not. If it is stale or not? If it is used somewhere or not?\n\n`CSS-in-JS` solves this problem because of a link between JS/HTML and CSS is known, so it is easy to track if this CSS rule required or not.\n\n#### Related\n- `Dependencies`\n- `Critical CSS`\n\n##### References\n\n- [@vjeux, 2014][@vjeux, 2014]\n\n### Critical CSS\n\nThe ability of a system to extract and inline styles in head required for current page viewed by the user not more nor less.\n\nNote: this is slightly different from the definition by `@addyosmani`, [which defines critical as above-the-fold](https://github.com/addyosmani/critical).\n\n##### Example\n\n[aphrodite](https://github.com/Khan/aphrodite):\n\n```js\nimport { StyleSheet, css } from 'aphrodite'\n\nconst styles = StyleSheet.create({\n  heading: { color: 'blue' }\n})\n\nconst Heading = ({ children }) =\u003e (\n  \u003ch1 className={css(styles.heading)}\u003e\n    { children }\n  \u003c/h1\u003e\n)\n```\n\n```js\nimport { StyleSheetServer } from 'aphrodite'\n\nconst { html, css } = StyleSheetServer.renderStatic(\n  () =\u003e ReactDOMServer.renderToString(\u003cApp /\u003e)\n)\n```\n\n#### Related\n\n- `Dependencies`\n- `Dead Code Elimination`\n- `SSR`\n\n##### References\n\n- [@markdalgleish, 2017][@markdalgleish, 2017]\n\n### Automatic Atomic CSS\n\nIn CSS modules and CSS-in-JS you do not use class names directly, instead, you use JS variables, so class names can be easily mangled. The same as in \"Minification of class name\". But we can go further - generate smaller classes and reuse them to achieve smaller CSS\n\nNote: This type of minification is not possible for traditional CSS.\n\n#### Example\n\n[styletron](https://github.com/rtsao/styletron)\n\n```js\nimport {injectStyle} from 'styletron-utils';\ninjectStyle(styletron, {\n  color: 'red',\n  display: 'inline-block'\n});\n// → 'a d'\ninjectStyle(styletron, {\n  color: 'red',\n  fontSize: '1.6em'\n});\n// → 'a e'\n```\n\n#### Related\n\n- [Atomic CSS](#atomic-css)\n\n##### References\n\n- [@markdalgleish, 2017][@markdalgleish, 2017]\n\n## Sharing Constants, variables in CSS\n\nThere are different approaches.\n\n### Sharing variables inside CSS\n\n- [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)\n- [Can I use css variables](https://caniuse.com/#feat=css-variables)\n- CSS variables in preprocessors, like PostCSS, SASS etc.\n\n### Sharing variables in CSS and exposing it to JS\n\nThis is mainly a feature of `CSS modules` with variables.\n\n#### Example\n\n[postcss-icss-values](https://github.com/css-modules/postcss-icss-values)\n\n```css\n/* colors.css */\n@value primary: #BF4040;\n```\n\nSharing variables in CSS:\n```css\n@value primary from './colors.css';\n\n.panel {\n  background: primary;\n}\n```\n\nExposing it to JS:\n\n```js\nimport { primary } from './colors.css';\n// will have similar effect\nconsole.log(primary); // -\u003e #BF4040\n```\n\n### Passing variable from JS to CSS\n\nThis is only possible with `CSS-in-JS`. This approach gives maximum flexibility and dynamics.\n\n#### Example\n\n[styling](https://github.com/andreypopp/styling)\n\n```js\nimport styling from 'styling'\nimport {baseColor} from './theme'\n\nexport let button = styling({\n  backgroundColor: baseColor\n})\n```\n\n#### Related\n\n- `Overriding theme variables`\n\n## Non-deterministic Resolution\n\nResolution depends on the order of declarations in stylesheets (if declarations have the same specificity).\n\n##### References\n\n- [@vjeux, 2014][@vjeux, 2014]\n\n## Isolation\n\nBecause of CSS cascading nature and Global Name Space, there is no way to isolate things. Any other part code can use more specificity or use `!important` to override your \"local\" styles and it is hard to prevent this situation\n\nStrictly speaking, only inline styles gives full isolation. Every other solution gives just a bit more isolation over pure CSS, because of solving Global Name Space problem.\n\n##### References\n\n- [@vjeux, 2014][@vjeux, 2014]\n\n\u003cblockquote class=\"twitter-tweet\" data-lang=\"en\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003eTwo CSS properties walk into a bar.\u003cbr\u003e\u003cbr\u003eA barstool in a completely different bar falls over.\u003c/p\u003e\u0026mdash; Thomas \u0026quot;Kick Nazis out, @jack\u0026quot; Fuchs (@thomasfuchs) \u003ca href=\"https://twitter.com/thomasfuchs/status/493790680397803521?ref_src=twsrc%5Etfw\"\u003eJuly 28, 2014\u003c/a\u003e\u003c/blockquote\u003e\n\n## Theming\n\nThe idea is to be able to change the look of existing components without the need to change actual code.\n\n### Overriding styles\n\nThis way you can override styles based on \"class names\" (keys of objects in case of inline styles).\n\n#### Example\n\n[react-themeable](https://github.com/markdalgleish/react-themeable)\n\nWith `CSS modules`:\n\n```js\nimport theme from './MyComponentTheme.css';\n\u003cMyComponent theme={theme} /\u003e\n```\n\nSame with inline styles:\n\n```js\nconst theme = {\n  foo: {\n    'color': 'red'\n  },\n  bar: {\n    'color': 'blue'\n  }\n};\n\u003cMyComponent theme={theme} /\u003e\n```\n\n### Overriding theme variables\n\nThis way you can override styles based on variables passed to the theme. The theme basically works like a function - accepts variables as input and produce styles as a result.\n\n#### Related\n- `Variables, Passing variable from JS to CSS`\n\n## SSR, Server-Side Rendering\n\n### HTML SSR\nMake sure that `CSS-in-JS` solution doesn't brake default React isomorphism e.g. you are able to generate HTML on the server, but not necessary CSS.\n\n### CSS SSR\nBe able to prerender CSS on the server the same way as HTML can be prerendered for React.\n\n#### Example\n\n[aphrodite](https://github.com/Khan/aphrodite):\n\n```js\nimport { StyleSheet, css } from 'aphrodite'\n\nconst styles = StyleSheet.create({\n  heading: { color: 'blue' }\n})\n\nconst Heading = ({ children }) =\u003e (\n  \u003ch1 className={css(styles.heading)}\u003e\n    { children }\n  \u003c/h1\u003e\n)\n```\n\n```js\nimport { StyleSheetServer } from 'aphrodite'\n\nconst { html, css } = StyleSheetServer.renderStatic(\n  () =\u003e ReactDOMServer.renderToString(\u003cApp /\u003e)\n)\n```\n\n**TODO**: add example with `Inline Styles`\n\n#### Related\n- `Critical CSS`\n\n## Zero runtime dependency\n\nAlmost all `CSS-in-JS` solutions have runtime dependency e.g. library required to generate styles at runtime and CSS encoded as JS.\n\nSome solutions do not have this issue, they basically vanished after build step. Examples: `CSS modules`, linaria.\n\n#### Example\n\n[linaria](https://github.com/callstack/linaria)\n\n```js\nimport React from 'react';\nimport { css, styles } from 'linaria';\n\nconst title = css`\n  text-transform: uppercase;\n`;\n\nexport function App() {\n  return \u003cHeader {...styles(title)} /\u003e;\n}\n```\n\nTranspiled to:\n\n```css\n.title__jt5ry4 {\n  text-transform: uppercase;\n}\n```\n\n```js\nimport React from 'react';\nimport { styles } from 'linaria/build/index.runtime';\n\nconst title = 'title__jt5ry4';\n\nexport function App() {\n  return \u003cHeader {...styles(title)} /\u003e;\n}\n```\n\n## CSS-in-JS implementation specific features\n\n### Non-DOM targets\n\nReact can target different platforms, not just DOM. It would be nice to have `CSS-in-JS` solution which supports different platforms too. For example: [React Native](https://facebook.github.io/react-native/), [Sketch](https://github.com/airbnb/react-sketchapp).\n\n### CSS as object (object literal)\n\n```js\nconst color = \"red\"\nconst style = {\n  color: 'red',\n}\n```\n\n### CSS as template literal\n\n```js\nconst color = \"red\"\nconst style = `\n  color: ${color};\n`\n```\n\n### Framework agnostic\n\nDoes it depend on React or not?\n\n### Build step\n\nIf build step required or not?\n\n#### Related\n\n- `SSR`\n- `Progressive enhancement`\n- `Dynamic`\n\n### Dynamic\n\nIf you can pass values to CSS at runtime.\n\nNote: it is not the same as `Variables, Passing variable from JS to CSS`, for example in [linaria](https://github.com/callstack/linaria) you can pass variables from JS to CSS, but only at build time.\n\nNote 2: cannot stop myself from drawing analogy between static and dynamic type systems.\n\n#### Related\n\n- `Build step`\n- `Variables, Passing variable from JS to CSS`\n\n### Generate components based on CSS\n\nIf your component has pretty simple structure and you care more about how it looks instead of markup (which most likely will be `div` anyway). You can go straight to write CSS and library will generate components for you.\n\n#### Examples\n\n[decss](https://github.com/kossnocorp/decss)\n\n```js\nimport React from 'react'\nimport { Button } from './style.css'\n\n\u003cButton\u003e\n  Panic\n\u003c/Button\u003e\n```\n\n[styled-components](https://github.com/styled-components/styled-components)\n\n```js\nimport React from 'react'\nimport styled from 'styled'\n\nconst Button = styled.button`\n  background-color: red;\n`;\n\n\u003cButton\u003e\n  Panic\n\u003c/Button\u003e\n```\n\n### Developer tools integration\n\nIf there are special perks for developer tools?\n\n#### Example\n\n[emotion](https://emotion.sh/) supports source maps for styles authored in javascript\n\n[GIF of source maps in action](images/emotion-source-maps.gif)\n\n## Progressive enhancement, graceful degradation\n\nIf you do not know what is it read this [article](https://www.shopify.com/partners/blog/what-is-progressive-enhancement-and-why-should-you-care).\n\nIn the context of `CSS-in-JS` it boils down to one question - will your website be styled with disabled JS.\n\nThe first requirement would be to have some HTML rendered on the server (SSR or [snapshoting](https://github.com/stereobooster/react-snap)). After this you have two options:\n\n- prebuild CSS e.g. `Build step` required\n- rendered CSS e.g. `CSS SSR` required\n\n#### Related\n\n- `SSR`\n- `Build step`\n\n## Uncovered subjects\n\n### Security\n\nSee [this post](https://reactarmory.com/answers/how-can-i-use-css-in-js-securely)\n\n### Async components\n\nAlso known as `code splitting`, `dynamic import`\n\nAsync component is a technique (typically implemented as a higher order component) for loading components with `dynamic import`. There are a lot of solutions in this field here are some examples:\n\n- [`loadable-components`](https://github.com/smooth-code/loadable-components)\n- [`react-loadable`](https://github.com/thejameskyle/react-loadable)\n- [`react-async-component`](https://github.com/ctrlplusb/react-async-component)\n- [`react-code-splitting`](https://github.com/didierfranc/react-code-splitting)\n\n#### References\n\n- [Dynamic import](https://github.com/tc39/proposal-dynamic-import) is the TC39 proposal.\n\n\u003e Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.\n\u003e\n\u003e — [Code splitting](https://webpack.github.io/docs/code-splitting.html)\n\n### CSS-in-JS and Async components\n\nThis works for most `CSS-in-JS` solutions because CSS is bundled inside JS. This is a more complicated task for CSS modules. See: [Guide To JavaScript Async Components](https://github.com/stereobooster/guide-to-async-components).\n\n### Atomic CSS\n\nAlso known as `immutable`, `functional`, `utility-class`.\n\nIdea boils down to use one property per class, so you create required look by composing more than one class. Because each class contains only one property, you do not override those properties and this can be interpreted as immutability.\n\nDo not confuse with [Atomic CSS](https://acss.io/) framework.\n\n#### References\n\n- [Functional CSS - The Good, The Bad, and Some Protips for React.js Users](https://github.com/chibicode/react-functional-css-protips#sunglasses-act-i-what-is-functional-css-and-why-would-i-want-to-use-it-sunglasses)\n- [immutable-css](https://github.com/johnotander/immutable-css)\n\n### Animations\n\n#### Sequential\n\nBasically CSS3 animations. Pros: can be GPU accelerated.\n\n#### Interruptible\n\nAlso known as `interactive`.\n\nBasically JS animations. Pros: can be interrupted.\n\n#### References\n\n- [Building Interruptible and Responsive Interactions](https://developer.apple.com/videos/play/wwdc2014/236/)\n\n---\n\n[@vjeux, 2014]: http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html\n[@markdalgleish, 2015]: https://www.youtube.com/watch?v=zR1lOuyQEt8\n[@mxstbr, 2016]: https://www.youtube.com/watch?v=19gqsBc_Cx0\n[@markdalgleish, 2017]: https://www.youtube.com/watch?v=X_uTCnaRe94\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstereobooster%2Fcss-in-js-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstereobooster%2Fcss-in-js-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstereobooster%2Fcss-in-js-101/lists"}