react-styling.md

React and Styling

Basic Concepts

• Styling in React
  https://www.kirupa.com/react/styling_in_react.htm
  An introduction to using React's built-in inline styling abilities

• How To Style React
  http://andrewhfarmer.com/how-to-style-react/
  An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use.

• Understand the React Styling Paradigms
  http://jsramblings.com/2017/09/22/understand-the-react-styling-paradigms.html
  An excellent, very readable summary of the three main ways to deal with styles in React (plain CSS, CSS modules, and CSS-in-JS). Lists some pros and cons for each one, and points to some additional resources for learning about them.

• CSS in JS
  http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html
  Christopher Chedeau's classic talk that inspired the "CSS in JS" revolution

• Components: A Styling Odyssey
  https://speakerdeck.com/alexlande/components-a-styling-odyssey
  Slideshow discussing pros and cons of various approaches to managing styles for components

• A Unified Styling Language
  https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
  A fantastic article that reviews why people might want to write their styles in Javascript, explores possible benefits of doing so, and looks at how the "CSS" and "JS" communites can work together going forward.

• U&I With React
  https://github.com/FarhadG/ui-react
  A free online book that teaches how to modular, extendable, and scalable component-based UIs. Covers best practices, and techniques like CSS preprocessors, CSS modules, inline styles, and more. Chapters available to read for free on Github, and the Leanpub book can be picked up for free as well.

• All You Need To Know About CSS-in-JS
  https://medium.com/@wesharehoodies/all-you-need-to-know-about-css-in-js-984a72d48ebc
  A clear summary of the differences between "inline styles" and "CSS-in-JS", the pros and cons of using CSS-in-JS, and quick examples of using some of the most popular CSS-in-JS libraries.

• The CSS Holy War & How To Think Beyond Dogma / A Brief History of CSS-in-JS: How We Got Here and Where We're Going
  https://medium.com/gitconnected/the-css-holy-war-how-to-think-beyond-dogma-e2c67692d409
  https://medium.com/gitconnected/a-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04
  A pair of articles that look at the history of CSS, discuss the problems it tries to solve, and describe the use of CSS-in-JS as a way to help solve certain use cases in today's apps.

• Four ways to style React components
  https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
  Quick examples of plain CSS, CSS modules, inline styles, and the styled-components library.

• The best "styling in React" tutorial you've ever seen
  https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945
  A comparison of how to style an application using inline styles, the styled-components library, and CSS modules. Has some good explanations of how each approach works.

• CSS-in-JS 101: All you need to know
  https://github.com/stereobooster/css-in-js-101
  An extensive look at different ways to handle CSS in React, with pros and cons, techniques for optimizing CSS, and comparisons of different CSS-in-JS libraries.

• Styling React
  https://survivejs.com/react/advanced-techniques/styling-react/
  An overview of the various approaches for styling React applications and components, and some of the problems each approach tries to solve.

Components and Styling

• Component Based Style Reuse
  https://www.youtube.com/watch?v=_70Yp8KPXH8
  Pete Hunt talks about various approaches to defining styles for components in plain CSS and in React

• Patterns for Style Composition in React
  http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/
  Some great suggestions for defining reusable React components that can have variations in styling

• Functional CSS From A Pure UI Perspective
  https://medium.com/@sharifsbeat/functional-css-from-a-pure-ui-perspective-bd04c8af4fdc
  Thoughts on various ways to compose classes and styles together.

• React JS Style Components
  https://www.youtube.com/watch?v=gNeavlJ7lNY
  A talk describing ways to better compose existing styles in an application, using components.

• Orthogonality and CSS in JS
  https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/
  Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling).

• James Kyle's thoughts on styling and components
  https://twitter.com/i/moments/861549552901468160
  A Twitter thread from James Kyle, discussing how many of the arguments about styling and components are a result of people building different kinds of applications

CSS-Based Approaches

• CSS Modules by Example
  http://andrewhfarmer.com/css-modules-by-example/
  A set of 7 examples demonstrating ways to use CSS modules.

• Elephants, The Three Code Ilities, & Two Months With CSS Modules
  http://chrispearce.co/elephants-the-three-code-ilities-two-months-with-css-modules/
  A look at how Lystable used CSS Modules to scale their codebase.

• Functional CSS - The Good, The Bad, and Some Protips for React.js Users
  https://github.com/chibicode/react-functional-css-protips
  An essay describing the "functional CSS" approach, pros and cons of using it, and tips for using that approach with React.

• How we made our product more personalized with CSS Variables and React
  https://medium.com/geckoboard-under-the-hood/how-we-made-our-product-more-personalized-with-css-variables-and-react-b29298fde608
  A walkthrough of how to build a themeable application using React components that update CSS variables for dynamic styles

• Styling your React app for beginners
  https://medium.com/@dylan.broadbridge/styling-your-react-app-for-beginners-f6b39779019b
  Examples of basic CSS usage in a CRA-based application, including importing CSS files and use of inline styles in components for layout.

JS-Based Approaches

• Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS
  https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6
  A long, in-depth article detailing one dev's progression through various approaches to handling CSS.

• Thoughts on Inline Styles
  https://medium.com/@andrewingram/my-thoughts-on-inline-styles-da94682b5e35
  A look at reasons why people might or might not use inline style approaches, and some opinions and suggestions on when to use different approaches.

• Style as a Function of State
  https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7
  A look at how styles can be managed similar to UI, and an example using the author's new styling library

• Invidual Paint for your React Components
  https://vimeo.com/album/4199344/video/187454103
  A talk discussing various approaches to manage styles and themes for React

• Writing Your Styles in JS != Writing Inline Styles
  http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js
  Max Stoiber describes the key difference between "inline styles" and "CSS-in-JS" approaches: styles applied to elements vs styles added to a style tag.

• CSS-in-JS comparisons
  https://github.com/MicheleBertoli/css-in-js
  A repository that contains implementation comparisons between many different CSS-in-JS libraries

• Comparing CSS in JS Solutions
  http://ludovf.net/blog/comparing-css-in-js-solutions/
  An overview of the various CSS-in-JS libraries and how their implementations differ.

• CSS in React Comparison Examples
  https://github.com/joeshub/css-in-react
  A repo that demonstrates the basics of several different React CSS approaches and libraries.

• Should I use CSS-in-JS with React?
  https://reactarmory.com/answers/should-i-use-css-in-js
  Some opinionated thoughts on the pros and cons of using CSS-in-JS approaches, including concerns about possibly security issues.

• Writing a CSS-in-JS Library from Scratch
  https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4
  The author of the Emotion library shows how to build a simple CSS-in-JS library, to help illustrate how they work.

Style Libraries

• Styling ReactJS Applications
  https://www.youtube.com/watch?v=19gqsBc_Cx0
  Max Stoiber's talk at ReactNL 2016, comparing various options for styling React applications and introducing his new library, Styled-Components.

• Scalable Styles in Production JS
  https://medium.com/front-end-hacking/scalable-styles-in-production-js-cde88016f357
  Some comparisons between various approaches to managing styles (plain CSS, inline styles, CSS-in-JS), and why Aphrodite can help solve some of the issues that come up.

• "Styled Components or Glamor?"
  https://www.reddit.com/r/reactjs/comments/5eq8ew/styled_components_or_glamor/
  Discussion and comparisons between some different CSS-in-JS libraries

• The magic behind styled-components
  http://mxstbr.blog/2016/11/styled-components-magic-explained/
  A look at how the styled-components library uses the new ES6 "tagged template literals" feature to interpolate arguments and build up CSS

• Styled-Components: Enforcing Best Practices
  https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/
  A look at some best practices for writing styles for reusable components, and how the styled-components library can help enforce those principles.

• A 5-Minute Intro to Styled Components
  https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55
  A quick intro to the styled-components library

• CSS in JS: The Argument Refined
  https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955
  The author of the Este.js boilerplate describes his investigation of various React styling libraries, and how he ended up building his own

• Styled-Components in Action
  https://medium.com/@lvarayut/styled-components-in-action-723852f2a93d
  A tutorial that walks through the main goals and concepts of Styled-Components, with examples

• Emotion: The Next Generation of CSS-in-JS
  https://medium.com/@tkh44/emotion-ad1c45c6d28b
  The author of the Emotion library gives an overview of its principles, benchmarks, and uses.

• With styled-components into the future
  https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c
  A talk transcript that discusses the history and future direction of the Styled-Components library, including how it works, improvements in v2, and plans for interoperability between CSS-in-JS libraries.

• The performance of styled React components
  http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/
  Benchmarks comparing size, build speed, and other aspects of different CSS-in-JS libraries.

• Structuring our Styled Components
  https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28
  Discusses applying the Block-Element-Modifier styling structure approach to use of the styled-components library, with examples.

• Styled-Components Nitty-Gritty
  https://blog.elpassion.com/styled-components-nitty-gritty-2d74b8690ef8
  An introduction to how to use the styled-components library, the problems that it solves, and how it works internally

• A Field Guide to CSS-in-JS
  https://medium.com/@wonderboymusic/a-field-guide-to-css-in-js-f7cbd9ed79a7
  Looks at how to use the styled-components and emotion libraries, including syntax, theming, variables, classname generation, and more.

• CSS-in-JS Roundup: Styling React Components
  https://alligator.io/react/css-in-js-roundup-styling-react-components/
  A high-level comparison of 15 different CSS-in-JS libraries

Techniques and Examples

• How to build animated microinteractions in React
  https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8
  Examples of various ways to create small animations to give feedback as the user interacts with components

• Create That Component
  https://medium.com/taitounited/create-that-component-1-7a2267bc2833
  https://medium.com/taitounited/create-that-component-2-f6e6ba2e6b5a
  https://medium.com/taitounited/create-that-component-3-25f1f722cead
  A series of examples that build components for assorted concepts like toggle switches, ripple effects, and toasts, using libraries like styled-components.