Use BEM for scalable and maintainable CSS

Thanks! Yes, I love BEM ever since I first learned about it. It brings some organization to an otherwise chaotic system. There's so much room to make a mess in CSS and BEM helps make CSS logical.

As for Bootstrap, I only like the SCSS version as it allows me to pick and choose the components I like, and even then I'll pretty much only use their grid, even though I have qualms with how it clears floats, using overflow: hidden which causes their overflowing components (like dropdowns) to get cut off... though I think since moving to flexbox this problem is now gone.

The opinionated global styles Bootstrap enforces for elements like tables, form inputs, etc. are too opinionated and the concerns are poorly separated—when working with designers I find working with Bootstrap counter-productive and it requires overriding CSS with extreme levels of specificity as I briefly touch on in the blog post. I also like to keep my box model properties separate from my theme properties, and Bootstrap isn't very good at that as it imposes whitespace values along with theme styles. In my opinion, Bootstrap poorly separates those concerns.

I haven't yet had a chance to try Tailwind but it looks great! The ramp up looks like quite the commitment, though. I am currently writing a simply, utility-based CSS framework, so I can definitely appreciate the approach Tailwind is taking. I definitely prefer the ability to compose only the utilities that I need, e.g. specific colours, whitespace, etc. all from individual styles (as opposed to Bootstrap's component approach where it's all or nothing).