16
27 Comments

⚛️ React Devs: What CSS framework do you use?

I'd love to learn what CSS framework you all use and your strategy around front-end styling. Do you use Bootstrap and roll your own components? Do you use react-bootstrap? Something else like Material UI, Tailwind, Ant Design, etc?

on November 16, 2019
  1. 6

    It depends.
    For projects that need to look like google products, like my wiki solution https://www.fulcrum.wiki, I use material ui.
    For app projects that are used on a desktop I use bluprintjs.
    For the "normal" websites I use semantic ui or tailwind. It depends how original the design is.

  2. 5

    I just add tailwind classes in my components https://tailwindcss.com/

    1. 2

      I use Tailwind also.

  3. 5

    I use styled-components and roll my own everything. I love having complete control over my components/styles and honestly just love writing CSS.

    I have used Material UI and Bulma in the past, both are good frameworks. Tailwind looks really cool too.

    1. 3

      Any big reason you switched from MUI to writing all your own CSS with styled components? Just easier to make it look exactly how you want?

      1. 3

        Just easier to make it look exactly how you want?
        Yeah, that's pretty much it. Also sometimes I'd feel like I was fighting the framework to get it to behave how I wanted. Styled-components also has a much better DX than JSS (MUI's JS in CSS solution) does too. MUI is great tho, I just personally prefer to roll my own stuff, even if it's less practical haha. Just checked at it looks like MUI has a styled-component-esque solution for writing CSS now, so that's cool!

        1. 1

          Gotcha, that makes sense! Yeah it looks like they intend to make it possible to use any css-in-js solution (basically anything that passes a className down).

  4. 4

    Regular scss. Flexbox makes everything easy

  5. 4

    Big fan of https://blueprintjs.com/ just seems to be the most solid.

    1. 1

      Haven't heard this. The docs look pretty promising!

      1. 1

        From what I understand the company behind it creates 100s of projects based on data analytics for other companies and governments around the world.

    2. 1

      Thanks, will check it out.

  6. 3

    I agree with @StephenBB in using styled compents/emotion to build my own stuff out (along with styled-system for instant side wide theme changes). However, I also use rebass as a starter for it as it has a lot of good initial building blocks (<Flex /> , <Box />) . They all work really well together - also being able to do responsive stuff by just passing an array of values for different breakpoints is super handy e.g. <Box width={[1, 0.75, 0.5]} /> which says on mobiles its 100% width, 75% at the next break point and then anything above that is 50% width

  7. 3

    We use https://material-ui.com/ and honestly, I'm a big fan of it now. Used it for my personal site and plan to continue to use it for future side projects 👍🏾

    1. 1

      Yeah Material UI looks great. Been planning on diving into soon for a new project.

  8. 2

    I have used most CSS frameworks at one point or another, from Bootstrap, to Tailwind, to a more "full service" solution like Material UI and although they all have their advantages, I've actually switched to rolling my own styles completely lately. The main reason for it is freedom as far as styles go and also because I found myself editing styles in those frameworks so much, it almost defeated the purpose. Something like Bootstrap or Material UI is awesome as it'll allow you to get up and running quickly, however for myself, I just found that it was always really easy to spot a site built on Bootstrap or Material UI and I wouldn't some more freedom with my designs.

  9. 2

    I am using ant design in my current project. Also, considering Material UI

  10. 2

    For the do it from scratch approach - nobody mentioned fela.js which is another css in js framework which is lightweight and generates a very compact & optimized css

  11. 2

    Material UI is good because it gives you a framework for colors, fonts (primary, secondary, etc.)

    That is if you’re willing to do the CSS in JS thing

  12. 2

    Most of the time React-bootstrap and for a new project I started using fomantic-ui(semantic-ui).

    And trying bulma for a side project.

  13. 2

    I'm a huge fan of MUI, its a very well thought out and established design kit (Google have unified pretty much their entire product range to use Material UI, and of course Android uses the same design language too). In addition to the UI components, it also gives you a framework to set up your site's theme e.g. colors, font sizes etc, which you can use independently from the UI components.

    Also, you get really rich micro interactions out of the box which makes your UI feel really responsive. I think users have come to expect that level of UI detail in apps now. My personal opinion is that MUI is the React of UI libraries. It's also great for an MVP, because you can reach a really polished level of UI with minimal effort.

    Although, there is a bit of a learning curve with MUI, especially when it comes to customizing components, it's very well documented. If you are just starting out and want to learn about CSS, and that is your primary goal, I probably wouldn't use it because it does abstract a lot of details away from the developer.

  14. 2

    Don't use any frameworks. I suggest using your own styled-components. Using frameworks restricts custom functionality. You can still try utility frameworks like Tailwind. I've tried ant design it was okayish.

  15. 2

    Normally just rolled my own components and styling. Whenever projects I've been on have tried to use existing frameworks you spend so much time battling the original styling with a bunch of overrides to get it to behave how you want that it just becomes messy.

  16. 2

    I'm trying out https://chakra-ui.com/ and so far it's easy to work with + slick design.

    1. 2

      It reminds me to tailwind. Nice.

  17. 1

    Use material ui at work and the latest version is decent (customizing older versions was a pain but better now it's easier to use with styled components). Personally prefer AntD though. Very easy to use

  18. 2

    This comment was deleted 4 years ago