With styled-components into the future – 💅 styled-components – Medium

With styled-components into the future  #styledcomponents #react #cssinjs #css #reactjs

  • Those remain the same and intact.While this sounds like no more can be achieved from a library that was mostly about best practices and common patterns in CSS, we are still in a position to drive change in the community.And this is because of the ecosystem that people have created…
  • Even more so with our new docs that we’ve published a few months ago.But the real question is, what makes it the library you know and love?There’s a lot of great content and talks from both Max and Glen, so if you’re new to what the ideas of the library are,…
  • [1]Then we have to transform the CSS to be able to inject it [2], and finally inject your CSS into the stylesheet, at the position that we’ve marked earlier.In v2 and onwards we’ve focused a lot on optimising all of the different steps involved here for performance, but one step…
  • The idea that becomes increasingly important here is, that we can’t build a library that works for some special use cases, but what we can build is a CSS infrastructure that allows you to change the CSS yourself.Let’s see how we could approach this.The interesting thing is that with v1…
  • We can run our transformations during Babel’s transpilation, or during build-time in general.We can build a CSS-in-JS pipeline!This would result in nothing being shipped to the runtime, and as long as we can provide an “opt-in” system, you would still be able to decide whether you’d like to ship the…

styled-components has changed a lot in its past. And we are not even done yet!
Continue reading “With styled-components into the future – 💅 styled-components – Medium”

How to Style React Components with styled-component

  • With components, it has started to make more sense to include styling inline within a component like so:source: www.styled-components.comWhy Inline Styling?You may be thinking to yourself, isn’t inline styling bad practice?
  • In the case of components though, inline styling has many advantages over vanilla CSS styling.
  • Acording to Radium’s website (another tool for inline styling) the benefits of using inline styling with components are:Scoped styles without selectors (styles are on component itself)Avoids specificity conflicts (two style definitions for one element)Source order independence (doesn’t rely on the order files are imported)Dead code elimination (no unused classes as in CSS)Highly expressive (easier to read JSX)Original using styled-components— cool.
  • extend“ syntax.Styling with styled-componentsResulting WebpageFinishing UpInline styling of components is a powerful option to consider when building out user interfaces with React.
  • There is a lot more that styled-components is capable of and I recommend looking through there tutorials and guides to get a better understanding of how awesome inline styling of your components can be!

Traditional styling of websites relies on having an external stylesheet with CSS. This tradition has been challenged with the advent of React and component based UI design. With components, it has…
Continue reading “How to Style React Components with styled-component”

Using CSS variables with styled components – Julien De Luca – Medium

Using CSS variables with styled components:  #ReactJS

  • Using CSS variables with styled components
  • CSS variables are a game changer, they allow easy and cleanly separated JS-CSS communication (among other things !).
  • Never miss a story from Julien De Luca , when you sign up for Medium.
  • If you want to know more about CSS variables, you should watch this great talk by Lea Verou :
  • It’s really easy to use them in combination with styled-components , and opens some great possibilities, like controlling variables using react-motion :

CSS variables are a game changer, they allow easy and cleanly separated JS-CSS communication (among other things !). It’s really easy to use them in combination with styled-components, and opens some…
Continue reading “Using CSS variables with styled components – Julien De Luca – Medium”