Styled-components Naming Convention Discussion and Update Wiki

[cherylli]

What do we need to build or fix? Discover different naming conventions, pick one and add to the wiki

Technical details There are different ways of naming styled components, we should be consistent in the project.

Approach suggestions Look at a few different suggestions and decide which suits our project best

Deadline Please keep in mind that once you assign this task to yourself, you'll need to complete it in 10 days.

[cherylli]

I like this article https://www.robinwieruch.de/styled-components/

[cherylli]

there are 3 ways to place the css

1. inside the JS file which I prefer if it's small enough
2. place it in the same directory as the component
3. put them all in the styles folder

I think we'll probably not worry about (1) as it's too hard to define what is small/big in a team. I'm leaning towards (2) and use the strategy in the article for shared styles. As I feel everything in styles, like we currently have now can be quite hard to find when there are like 30 styles folders.

We will definitely need global styles (createGlobalStyle)

I also like where they use <Styled.Headline> or <S.Headline> so it's easier to see if it's a styled component tag or other tags

the article also mentioned having a styled tag for every single tag vs having a root tag and use CSS classes. I personally prefer the latter

[mariana-caldas]

Thanks, @cherylli !

I like your thinking and thanks for sharing the article 🙏🏼

My two cents:

1. Let's place the styles inside their own component by creating a styles.js file that will become stytles.ts as soon as we implement TypeScript. That styles file would be like this:

import styled from 'styled-components';

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

// We are passing a default theme for Buttons that aren't wrapped in the ThemeProvider
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

Notice that, first of all, we'd need to create a file where to define the variables and mixins we currently have as our main "theme", as described here

2. Then, on the component index.js page, we would import that style either by importing the exported object

a)

import { Button } from './styles';

or importing everything, which I recommend when we need to import more than one styled-component

b)

import * as S from './styles';

When using the approach described in letter b), the element will be invoked like this:

<S.Button></S.Button>

Please let m know your thoughts! It's also would be great to see some suggestions about the theming approach. Thanks, team!

[cherylli]

https://blog.logrocket.com/theming-in-next-js-with-styled-components-and-usedarkmode/

[mariana-caldas]

We also need to think about the Sass mixins conversion with a CSS helper as mentioned here -> https://maddev.netlify.app/development/styled_components_mixins/

[cherylli]

I think this can be closed as the styled-component conversion is completed