Options and best practices for styling in ReasonReact

#1

I found that you can add styles like this:

<div style=(ReactDOMRe.Style.make(~color="red", ()))> ...

This is kind of ugly looking. What other options exist?

#2

The above API is inline style. I agree with you that it’s ugly.

Currently, the community is working on a css-in-js solution so I can say that no best practices yet.

You can see all avaiables css-in-js solution here https://redex.github.io/keyword/css

I personally use the good old css classes

#3

I like https://github.com/SentiaAnalytics/bs-css or just plain old-fashioned CSS frameworks that you can drop in your index.html. My favourite is Bulma.

#4

I started with https://github.com/poeschko/bs-glamor, but now I’m more into https://github.com/SentiaAnalytics/bs-css

#5

TBH I’ve tried to use some CSS-in-JS solutions when using ReasonReact, but every option I tried has been fairly underwhelming. I’ve started to just use Sass + classNames and it’s worked out pretty well, but I can’t see it scaling too well forever without something like CSS modules. I’d be interested in collaborating on a library for CSS-in-Reason :grin:

#6

I’m using css-next w/ css modules (untyped). Works for me for now, tho it’d be cool to get them typed.

#7

I’m using css modules typed but it kind of fragile. @ryyppy is working on a more solid solution I believe

#8

I wished I had more time on my hand, but I am basically working on general tooling to have different ways to generate type definitions & external mapping for css module files.

Currently, the working part is a cli tool, which uses post-css (only with the css module transform), to parse a glob of css files inside a path and outputs a single .re file with all css module structures and bindings.

Example:
reason-css-modules src/**/*.scss.module --ext “scss.module” --target “src/styles.re”

There are quite some things which need to be implemented before I feel comfortable to release it:

  • Add a webpack loader plugin which uses the same mechanism, but uses webpack hooks to parse transformed css modules (without post-css dep) - A prototype works, but I am not happy with it
  • Add multiple ways to generate bindings / type definitions separately (to allow deadcode elimination with style require statements)

Maybe I will upload my current progress some time, so ppl can at least use the CLI tool with some githooks (lint-staged etc).

#9

Maybe, reason-css-modules-loader can be a solution. (Link here: https://github.com/sainthkh/reason-css-modules-loader)