CODEWITHSUNDEEP
javascriptcssreactjsweb-frontend
Alexey Sidash
Alexey Sidash

Reputation: 441

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:

But there are some positive ones:

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?

Upvotes: 3

Views: 571

Answers (2)

Ayoze Barrera
Ayoze Barrera

Reputation: 126

I'm using inline styles and I had some problems at the beginning but you know what? I love it know...

  • I don't have conflicts of style. In all of my previous non-react projects I had them... easy to fix but I don't need to worry about it now
  • If I need to edit the style of a component. I just go to the component and edit it. Before... I had to check the classes of the element and then go to the css file to edit it.. and maybe I'm breaking the style of another element with the same class!
  • I love style with js objects. Js everywhere! Thanks to that we don't need to use preprocessors as SCSS to have variables (just an example)

But you're right and you can have headaches with pseudo selectors like :hover... or vendor prexing, even media queries.

So.. if you need all of that, maybe you should check Radium

stay foolish!

Upvotes: 2

steppefox
steppefox

Reputation: 1844

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.

Upvotes: 1

Related Questions