Search code examples
javascriptcssreactjsweb-frontend

Styling react components

I'm a big react fan. It's a really awesome tool for building UI but there are some problems which are difficult to get rid of without trouble.

One of them is styling components, the original 'react-way' is using inline styles, but this solution has some negative qualities, ex:

  • It seems not to be a good solution from designer's point of view
  • Is it customizable enough?
  • I cannot use some of the awesome tools like autoprefixer or sass/less, which make my styles more maintainable

But there are some positive ones:

  • Components become very cohesive and reusable, styles are shipped together with it.
  • When inline styles are used in some library, I don't need to require any stylesheets, the style is all in my code

Other "WriteYourStylesInJS" practices have the same weaknesses, and the biggest is the reduced set of styling tools (Yes, I'm too lazy to write prefixes).

As for my actual question, how do you make your react components and css (or scss/sass or less or any other language) styles cohesive?

How do you make styles customizable and maintainable?

Is my prepossesion against inline styles reasonable?

Solution

  • In my project, i have used separated css files for styling, with same name like my components. In production it will be anyway minified and splitted in one js/css file, but you can easily copy/paste your components from project to project.