Best way to use classes and styles in a react website

Question

I am starting with react, and I noticed the following coding styles in many projects:

Method 1:

const Date = styled.h3`
  margin: 0 1rem 0.5rem 1rem;
  color: gray;
`

const ReadingTime = styled.h4`
  margin: 0 1rem 1.5rem 1rem;
  color: gray;
`

const Excerpt = styled.p`
  margin: 0 1rem 1rem 1rem;
  line-height: 1.6;
`

<Post>
      <Link to={`/${slug}/`}>
        <Date>{publishDate}</Date>
        <ReadingTime>{timeToRead} min read</ReadingTime>
        <Excerpt
          dangerouslySetInnerHTML={{
            __html: body.childMarkdownRemark.excerpt,
          }}
        />
      </Link>
    </Post>

Method 2:

Now what if I just use:

<Post>
          <Link to={`/${slug}/`}>
            <div className={'date'}>{publishDate}</div>
            <div className={'time'}>{timeToRead} min read</div>
            <div className={'excerpt'}
              dangerouslySetInnerHTML={{
                __html: body.childMarkdownRemark.excerpt,
              }}
            />
          </Link>
        </Post>

and style everything in a css file.

Which method is best practice when creating react website? why?

score 0 · Answer 1 · answered Jul 09 '19 at 16:40

0

First of all, you don't need to wrap the className name with brackets only if you are using dynamic content when fetching data from an API.

You can simply do the following:

<Link to={slug}>
 <div className="date">{publishDate</div> 
 <div className="time">{timeToRead} min read</div>
</Link>

The first approach is used to style each React component separately. React Styled components ;).

answered Jul 09 '19 at 16:40

Galanthus

1,958
3
14
35

Thanks but which approach is better? I noticed using method #1, you dont have to create a css file which means no connection to the file, but isn't method #2 hard to maintain? – user9384787 Jul 09 '19 at 16:44
There is no better approach, to be honest. If you are using SASS or normal CSS just use regular names like from my example. The second is cleaner and better readable in the long term! – Galanthus Jul 09 '19 at 16:46

Hemant Parashar · Answer 2 · 2019-07-09T17:44:07.227

This is not a matter of best practice, rather a matter of personal preference, a team decision or based on a requirement. Both are doing the same thing i.e styling the elements but the approach is completely different.

If you want something component based, encapsulated in a component (scope wise), dynamic ( components that rely on JavaScript for their style ), then use styled components. On the other hand if you want something traditional, manageable at one place, go with scss/css.

You can even use both which is the case more often than not.

People have written articles about these. Read these for more info and clarification.

Hope this helps !

Thanks for the post, I am also doing some readings. Wouldn't method #2 cause performance impact? because based on my understanding, if you use styles components, then that style is loaded when the component is needed. So not loading the entire "css" file. Am I correct? — user9384787, Jul 09 '19 at 16:53

score 0 · Answer 3 · answered Jul 09 '19 at 18:22

0

I'd rather myself go with the initial approach.

For two reasons in particular:

Clean Code
Component segregation, ultimately facilitating Code Reusability and DRY principle.

answered Jul 09 '19 at 18:22

bijayshrestha

149
1
14

Best way to use classes and styles in a react website

Method 1:

Method 2:

3 Answers3