[Discussion] Option to turn off inline styles and use classNames instead

[alex35mil]

Discussion issue.

When I use inline styles inside components, they make a lot of noise. CSS-modules much nicer on my taste.

So it would be nice to have an option to turn off inline styles completely and use classNames instead. Something like this:

<Select useClassNames={true} wrapperClassName={css.selectWrapper}>
  {/* no inline styles is used here */}
</Select>

[jpuri]

Hey @alexfedoseev ,

Can you plz specify some examples. It could be the case that the way we implemented inline styles, I mean which particular styling parameters like 'display', 'position', etc is creating trouble for you.

~Jyoti

[alex35mil]

Hey @jpuri, sorry for the long answer.

I have common use-case: for example I'm using SASS (Stylus, PostCSS, whatever) to manage my styles. In these envs I have variables, mixins & base classes, which I'm using to extend my local styles across the app. So in this case I must duplicate all these things to include them as inline styles. If it were possible to use classNames instead, I'd just extend new class inside css module and apply it to belle component.

And actually I like the idea of managing styles in stylesheets using css-modules, outside of markup and jsx, where long styles become pretty noisy.

[nikgraf]

@alexfedoseev sorry for my late reply. We are thinking a lot about moving from inline-styles to a class based system. This then could be used with JSS, css-modules or any other solution. Since this will be quite a big change we will do a few prototypes first and if it works release it with Belle 3.0.0. Are you interested to contribute as well?

btw what do you think about https://github.com/markdalgleish/react-themeable

[alex35mil]

@nikgraf My turn to apologize for late reply. It's really awesome news about class based system!

According to contribution: due to my current workload on current company's and oss projects I'm veeeery slow (+ I started messing around with ClojureScript also), so I can help with some not too big improvements, which are not blockers for something.

And about react-themeable: I haven't tried it and, after a quick look, I have no opinion on it really :)