Style-It which is React.js’s library.

Hello, I made a example by using Style-It which is React.js’s library recently.

You can see this example pages and GitHub repository.

Style-It docs

example page


What is style-It

Style It is a component for writing plaintext CSS in JavaScript apps. Use the same familiar CSS syntax you already know and love — now inside of your components.

If you’re used to JSX syntax, you don’t care. but If you’re not used to JSX, you had better use this library. This library gives us opportunity to be able to write traditional syntax of CSS.

Traditional syntax of CSS is such as …

and, if you use Style-It ….

It’s really good readability. I’m usually using css-modules but I seem that is’s weird sometimes. Style-It’s approach is good. We can understand at a glance if we look front-end environment which is using style-It.

What is the best approach which implements CSS in React.js?

I think that it depends on a developer. My best approach is css-modules with PostCSS. PostCSS is good idea which implements CSS. I’m usually using PostCSS and surrounding PostCSS library, such as postcss-size, precss, autoprefixer.

I’m used to look JSX syntax. I don’t care of looking this environment which is using css-modules, I’d rather use it. Style-It makes me feel weird but that was good experience for me.

I want to know about best approach.

I really want to know about the best practice of implementing CSS. If you have any idea, feel free to connect me. Anyway, That’s it! How was this article? if you don’t mind, please check my twitter account and click the ♡ button. Thank you! have a good day!