Lately I’ve been using Khan Academy’s Aphrodite in a lot of my projects. React and Aphrodite work very well together! (although React is not a requirement) and makes managing CSS a lot easier!

Using React and Aphrodite together makes each component look something like this:

What I love about these two together is that your styles are colocated with your JavaScript components. In practice, this means that it’s often trivial to find and fix style issues as once you’ve found the component, you’re already in the right file!

Coming from a Sass / LESS background one of the things I missed most was being able to easily share styles via creating and importing specific files like Buttons.less and then including them wherever they are needed!

Aphrodite allows you to pass styles as props, something like this:

So therefore Marker gets its styling from App. The only issue here is that you’ll have to pass your shared styles all the way down through your app if a lower component needs something from its parent.

In order to work around that I had an idea for creating individual .js files that export themselves as an Aphrodite StyleSheet object. That way you can create something like:

and then later in your app:

It seems to work nicely so far. I’d love to hear your thoughts!

Check out this demo project if you’d like to see an example!