Asides HTML and Javascript, CSS is one of the main building blocks of Frontend web development. CSS (Cascading Style Sheets) allows you to present websites in different styles even if the websites might share the same markup structure.

In the world of React, there are different ways to use CSS to improve the UI of your website. Two popular ways involves using React UI Component Libraries and CSS Utility Classes.

React UI Component Library

This is a collection of reusable, pre-built UI components designed for use in React applications. UI elements such as buttons, inputs, selects e.t.c are styled according to a Design System and encapsulated with its functionality to be reused. Some popular libraries in the React ecosystem include: Chakra UI, Material UI (MUI), AntD, Mantime, NextUI e.t.c.

Pros

• Simple and ready to use components, hence saves time.
• Comes prestyled and less focus on CSS design.

Cons

• Difficult to adapt to any design.
• Increases bundle size of the app.

CSS Utility Class

CSS Utility Classes are predefined CSS classes scoped to a particular CSS property which help you to style UI elements quickly without writing additional CSS styles. The classes can be composed together to build a specific design for your UI elements. Popular utility-first frameworks include Tailwind CSS e.t.c.

Pros

• Flexible, easy to customize and adapt to any design.
• Build size of the project is tiny as only used classes are included in the bundled react app.

Cons

• Classes are static making it difficult for dynamic styling.
• Having too many classes clutter up the HTML markup structure.

Conclusion

Both methods of styling React UIs offer their own benefits and both can be used together in the same React app. When I started my frontend journey, I used React UI Component Libraries for styling as it came with its own design system and I was not good in CSS. Over time, I use TailwindCSS now as it is easy to adapt to any design system.

Bonus: Shadcn UI

Shadcn UI is a game changer as it offers the world of both styling options. It combines the use of unstyled React UI components with the flexibility of Tailwind CSS to build you own reusable component library.

If you are a newbie looking to build React.js projects or need mentorship in your frontend developer journey, join the HNG Internship or you can hire from the HNG Talent Pool for your startup or collaborative projects.