Use CSS Variables instead of React Context

Turns out you can use several different libraries to pass color information around components. Or, you could use custom properties, built right into CSS, have no decline in your own developer experience, and deliver a faster experience to your users. …


The post Use CSS Variables instead of React Context appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

Turns out you can use several different libraries to pass color information around components. Or, you could use custom properties, built right into CSS, have no decline in your own developer experience, and deliver a faster experience to your users. Kent proves it here, with demos.

For the record, you could go a step further than Kent has here and not use CSS-in-JS at all, but still be updating CSS custom properties from button clicks in React and managing the state there and such. I’m telling ya, one of the main jobs of a UI component library like React is managing state, and CSS might as well know about that state so you can use it to do any styling you need to do.

Wait, not use CSS-in-JS? Kent:

I’ve never been so productive working with CSS than when I added a real programming language to it.

Extreme side eye, Kent.

We should be calling it CSS-in-React, also, since React is the only major framework that doesn’t have a blessed solution for styling.

Direct Link to ArticlePermalink


The post Use CSS Variables instead of React Context appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-02-19T16:05:52+00:00) Use CSS Variables instead of React Context. Retrieved from https://www.scien.cx/2021/02/19/use-css-variables-instead-of-react-context/

MLA
" » Use CSS Variables instead of React Context." Chris Coyier | Sciencx - Friday February 19, 2021, https://www.scien.cx/2021/02/19/use-css-variables-instead-of-react-context/
HARVARD
Chris Coyier | Sciencx Friday February 19, 2021 » Use CSS Variables instead of React Context., viewed ,<https://www.scien.cx/2021/02/19/use-css-variables-instead-of-react-context/>
VANCOUVER
Chris Coyier | Sciencx - » Use CSS Variables instead of React Context. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/19/use-css-variables-instead-of-react-context/
CHICAGO
" » Use CSS Variables instead of React Context." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/02/19/use-css-variables-instead-of-react-context/
IEEE
" » Use CSS Variables instead of React Context." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/02/19/use-css-variables-instead-of-react-context/. [Accessed: ]
rf:citation
» Use CSS Variables instead of React Context | Chris Coyier | Sciencx | https://www.scien.cx/2021/02/19/use-css-variables-instead-of-react-context/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.