Add styled components - Let's talk

[alejandronanez]

Add styled components - PoC

Update

Let's talk about what is "wrong" / "right" about our current implementation for styling, and what styled-components will bring to the table. If we're not going to see any real benefit I think we should hold this off.

Update 2

There's a list here #532 with all the components that need styling, feel free to grab the component you want to work on.

[lex111]

and what styled-components will bring to the table

Honestly, I do not understand how this will help? Can you explain the pros and cons?

[alejandronanez]

@lex111 well this is what this issue is for. We talked about this briefly on Gitter so I wanted to move this here so everybody can share their opinion. To evaluate if it's worth it to add styled-components or not.

[andrewda]

Disclaimer: I've barely used styled-components, and most of what I know is from the documentation.

Current Styling

Pros

1. Concise

All of our styles are already in their respective component file meaning we don't have any extra styling-only files.

2. Explicitly showing styles

The current implementation is easy to follow because we provide every component that needs a style with a style property.

Cons

1. Too concise

Everything is in one file. This can be good (see Pro 1), but can also lead to readability issues. Cutting out the styles into new files might be beneficial.

2. Using StyleSheet.flatten()

We're using StyleSheet.flatten() in several places, which isn't always super nice. It would be good to try to avoid using this, as it can lead to confusing styles, especially when they begin to override each other.

Styled Components

Pros

1. Easy linting

This looks like one of the biggest pros. Keep our styling in a consistent format with their super nice linting tool.

2. Writing actual CSS

CSS in objects can get a little weird, especially when it comes to using dashes. With styled-components, we're writing actual CSS instead of weird object CSS.

3. Syntax highlighting

While not a huge pro, this is still really nice for people who do a lot of CSS work.

4. Enforces consistent styling

If we have a style for a specific type of component, styled-components makes it very easy (and preferred) to reuse that style in as many places as possible. This way, the styling throughout the app can stay very similar without rewriting a bunch of CSS.

Cons

1. Have to rewrite all CSS

While this can be done in increments, it's still a lot of work.

2. Probably won't solve everything

I'm guessing there's still places where we'll need to fallback to regular CSS.

[ericadamski]

This video is a little long (it is actually a workshop) but the talk is given by https://github.com/mxstbr the co-creator of styled-components. Really useful in comparing the different types of styling solutions in react (not focused on react-native but IMO still applies here). The questions at the end are also very good in bring some reasons why CSS styling is good, but how styled-components either has the same features or does it better.

https://www.youtube.com/watch?v=ftSzsghg2io

This video convinced my team to start using styled-components in our application and it has made our development and testing much more declarative (IMO)

[machour]

I don't know if we should be using styled-components or not (I didn't try them yet to see real-life benefits), but I know something for sure: we need to rethink how our global design is laid out.

Currently, every component/screen define its own styles, and it can sometimes leads to inconsistencies (different margins/paddings/sizes). Button were re-designed from scratch every time they were used before rolling up our own <Button /> component and using it everywhere.

Also, with our current implementation, introducing themes (#59) is not doable in a maintainable way.

[alejandronanez]

Thanks for your feedback guys!

I think styled-components will be a good upgrade to our current stack if we think about the future, what @machour mentioned about #59 will be quite complicated to achieve using what we have right now.

Also, I think that by using styled-components we will make our codebase a little more easy to understand to newcomers or people with only css knowledge.
Since migrating everything to styled-components in 1 single PR will be huge, we can start migrating slowly and create good for beginners issues so we attract new people to the repo.

Thoughts?

[andrewda]

@alejandronanez Sounds good! I totally agree with a slow approach on this, not one huge PR.

[machour]

@alejandronanez sounds good to me too.

I'm just wondering if we will be separating styles from components (i.e have a styles/ directory with all styles and requiring the needed ones from components)

[housseindjirdeh]

So I've always for some reason thought that because React Native already uses JS for locally scoped component styles as opposed to React for the web, styled-components wouldn't really be beneficial.

Reading this article and the video you linked @ericadamski - I think I'm sold 👍

@alejandronanez the plan you laid out sounds perfect. Incrementally moving forward updating all of our styles slowly will be nice. Moreover, definitely don't mind including a mention in CONTRIBUTING.md to note future styles should leverage styled-components wherever possible if everybody thinks thats a good idea

[housseindjirdeh]

@machour that's a good point. I'm in favour with keeping it within the same file personally to keep the small-components and locally-styled focus the way it currently is.

[ericadamski]

@housseindjirdeh another solution we employ is to keep small locally-styled components in a file called <main-component>.styled.js to show the relation to the main component but keep the bulk of boilerplate and non-logic code outside the main jsx file. Just a potential solution 😄