• Frontend
  • Style

Style

Layouts

If you're just getting started on CSS, I would recommend React Bootstrap and Material UI as they are very popular and universal, they are easy to get started as they doesn't assume you have knowledge on advanced CSS concepts such as flexbox and grid.

But if you want to get more control over layouts, here's a useful guide on flexbox.

My previous favorite framework writing css is styled-components, as it allows you to write css and js in the same file like Vue. I used to like to create a wrapper component using styled, and wrap the content component to create custom layout.

However, my personal favorite right now is tailwindcss, as it allows you to craft the layout in utility class names without implementing your own class, but it assumes you to have knowledge on flexbox and grid.

Reusable Component

Here are some of the libraries that provides reusable component like buttons, form and pop-ups:

React Bootstrap is looking pretty typical and pretty hard to customize.

MUI could be very complex to master, and I don't like the look of the component if I don't customize it.

And my favorite among them will be Chakra, as its default component doesn't look that typical and provide some useful hooks and even advanced feature like Toast and Portal (although I think MUI has it as well) so I think this is the reason why Chakra is so popular among startups.

Last updated on November 15, 2022