Refactoring: Improve CSS and get rid of Bootstrap

[jberkovica]

Per @angle943 request:

Come up with a good CSS strategy

• It looks like you are using vanilla CSS to handle your styling. I would suggest you find a good plan now to handle CSS. Some suggestions:

• Tailwind CSS. This is probably the most “hot” css solution right now. I personally don’t use it, and thought about doing it for my current web dev project, but I didn’t want to waste time learning about it in the short time we have. You might be in a similar state

• SCSS. An always good css solution, but it alone does not handle scoping of CSS very well (by scoping I mean when you don’t want styles from one component to “bleed” into other components). Some people combine SCSS with BEM convention (I will also share my group project with you, in which we did the CSS + BEM approach)

• CSS Modules. This is probably the “easiest” learning curve (virtually none), but it will help you scope your styles to your components. This comes built into next.js

• Why I suggest you figure out a CSS strategy now is that as your app gets bigger, it is very hard to refactor CSS, so its a solution that might be worth figuring out now.

• I think you are using bootstrap for your CSS right now. I would personally stay away from Bootstrap, and in any companies I worked at we always steered clear away from bootstrap, but to be objective I cannot deny that bootstrap is still widely used today. BUT if you want this to be a community owned project later on, as well as a good “showcase” of modern Frontend best practices, it might be worth migrating to a more “popular” (and less “frowned upon”) solutions.

Be more ‘conservative’ with the use of div

• I see a lot of div that are there. This might have to do with using bootstrap, not sure. but for scalability and the ability to make changes quickly in the future without breaking too much things, it is always good to be conservative with the HTML DOM elements and use only what is needed.

[jberkovica]

@angle943 I need your advice on plan of action here. Really don't know how to approach this. Cool thing about Bootstrap is that it is responsive and supports dark mode, so many CSS problems are solved for us. And with predefined UI styles/elements development is very fast (for us with minimal CSS experience).

So what would be correct plan of action?

1. Go component by component, remove Bootstrap classes and implement custom + refactor react components because there are many divs as part of Bootstrap way of writing it.
2. Or write our implementation for all bootstrap classes and remove that dependency?

Anyway, I'm terrified by CSS :)) I really need your help here to refactor.

[angle943]

bootstrap is fine if you are comfortable with it. One thing unfortunate about FE is that there are trends that come and go, and unfortunately bootstrap became one of those tech that is disliked by modern FE devs (some are valid rationales. I also personally don't like bootstrap but won't go into details here). But personal biases aside, a framework is supposed to help you build the product, and if bootstrap is something that you are most comfortrable with, then you should use it.

When this becomes open source and open to the public later, then it might be worth refactoring things just to give people a taste of how latest tech is used (it might also appease some bootstrap haters too :D ). We might end up wanting to expand the product more, which might entail design changes, and that can be a good opportunity to revisit this. And if so, we can go with your action #1 (this is always the better option compared to action #2).

For your personal development though, if you are interested in sticking with FE long term, i would highly encourage you to find a moment of time in the future where CSS becomes no longer terrifying :). Being an actual good HTML/CSS/vanilla JS developer is a really hard thing to find these days, even at Amazon. Just 2-3 days ago I was having lunch with my coworkers at amazon and we were saying how majority of so-called FEE(Front-End Engineeres) at amazon actually have no idea what they are doing when it comes to CSS