Testing and deciding on styling approach

[stefano-lacorazza]

First we must decide the styling approach: direct styling in component, prop styling or custom theme using chakra.

[Alblupynos]

Could you add a small example for each approach, please I think we have one more variant with class and id styling or maybe some of your approaches means that?

[stefano-lacorazza]

Styling Comparison

All example code can be found in frontend/src/bundles/style-comparison.

Inline Styling

Inline styling involves applying styles directly to the element in the return statement using the style or sx attributes.

Pros:

• Quick and easy to apply styles.
• Styles are scoped to the component, avoiding conflicts.
• Useful for unique styles.

Cons:

• Can lead to repetitive code if the same styles are used in multiple places.
• Harder to maintain and update styles across the application.

Prop Styling

Prop styling involves passing styles as props to the component, allowing dynamic and reusable styling. They can be passed as style or sx properties.

Pros:

• Styles can be dynamically changed based on props.
• Encapsulates styles within the component, promoting reusability.
• Easy to override styles for specific instances.

Cons:

• Can lead to prop drilling if styles need to be passed through multiple layers.
• May become harder to manage as the number of style props increases.

Chakra Theme Styling

Chakra theme styling involves defining styles in a theme object to expand Chakra's default theme and applying them to components using the ChakraProvider and theme props.

Pros:

• Consistent styling across the whole app.
• Easy to maintain and update styles in one place.

Cons:

• Requires initial setup of the theme object.
• Less flexibility for unique styles.
• The theme object can become complex.

CSS Modules Styling

CSS Modules styling involves creating a CSS file with the .module.css extension and importing it into the component. This ensures that styles are scoped locally to the component.

Pros:

• Avoids global namespace pollution.
• Scoped styles prevent conflicts.
• Maintainable and reusable styles.

Cons:

• Requires additional setup for each component.
• Less dynamic compared to inline or prop styling.

[o-nedashkivska]

I guess we can close this ticket because we already decided on styling approach and created a separate ticket for that https://github.com/BinaryStudioAcademy/bsa-2024-outreachvids/issues/164