How Should I Style My React Application?

This is a test blog and I'm testing seriously 😂.

Vanilla CSS

Vanilla CSS Code snippet

<h1 class="header">Welcome</h1>

.header {
  font-size: 32px;
}

Sample bullet points with strong tags.

• Reusability. It's easy to create append-only stylesheets that become very complex.
• Global Namespace. Since CSS has a global namespace, you can unintentionally target too many elements.
• Colocation. It's hard to modularize your CSS, which makes it difficult to delete code safely.

Sample Link CSS pre-processors.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

@use 'base';

.header {
  font-size: 32px;
}

Sample Heading

const HomeContainerWrapper = styled.div`
   padding: 8px;
   font-weight: bold;
   color: white;
   background: blue;
`;

<HomeContainerWrapper>
  Hello
</HomeContainerWrapper>

// Forget about naming
<Box
  padding={3}
  fontWeight='bold'
  color='white'
  bg='blue'
>
  Hello
</Box>

Pros and Cons Card Embedded as React Components

Vanilla CSS