ブログ

Shopping for CSS – What’s the best CSS Framework for us?

2020.04.30

shopping for css

Picking a CSS Framework for the Team

After recently finishing a large project, it dawned on me that it might be time for our production team to change our approach to CSS. Namely, I started thinking that it was time to introduce a CSS framework to help get projects running faster and more robustly.

But in the world of web-dev, new frameworks and technologies are constantly coming out. It is quite possibly the most quickly revolving door in all of tech. So how does one decide what to use and what to ignore? I have no idea how ‘one’ person might do it, but here were my thoughts on the process for my own team.

First, do we really need a framework?

If ever there was a time to start learning basic web-code, it would be now. Simple HTML and CSS alone have become so dynamic and powerful that even a lot of interactive features that were once reliant on JavaScript and jQuery can be implemented with a few clever CSS tweaks. Complicated, responsive layouts are now entirely manageable with vanilla CSS features. And now that CSS has been modularized, new functionality will likely be added to the CSS standard at a fast pace.

Given the above, do you even need to have a framework? I’m a big fan of Jen Simmons(https://jensimmons.com/), developer advocate over at the Mozilla Foundation and layout master, and in many of her videos she argues for the use of pure CSS when possible. Of course, she doesn’t say NOT to use frameworks or that they can’t be useful, but rather that we can and should embrace core technology when we can.

So why bother? Well, I’m tired of making buttons. And menus. Oh, and my columns sometimes don’t look as good I’d like, and that contractor didn’t write their code quite the way I wanted and now I’ve gotta spend my day refactoring it. I wanted to stop building then re-building basic parts and focus on the custom portions of a design.

But it’s clear you love vanilla CSS! What framework did you choose?

The go-to frameworks for web development have been Bootstrap and Foundation for some time now. Bootstrap in particular has an honored place in web dev history and will continue to do so for years to come. Sure, it’s often vaguely accused of producing sites that look “like a Bootstrap site,” but it is a poor craftsman that blames their tools, and Bootstrap is not the cause of uninspired web design. It also has a ton of support worldwide, which means that I, an English-speaker, could easily ask my Japanese-speaking team to learn about Bootstrap and expect there to be a multitude of available resources. Foundation does too, but to a lesser extent.

So why didn’t I choose either of these frameworks? Well, I love vanilla CSS. It’s pretty awesome. And in my head there’s still an argument for keeping that vanilla flavor present in my projects. Also, everyone in the team has vastly different experience levels with CSS and JavaScript, and I can’t expect all of them to hit the ground running at the same pace with any given tech. Thus, I chose Bulma (https://bulma.io/).

Why Bulma?

BULMA

First, vaguely means “underwear” in Japanese, and that makes me giggle when I boot up my editor.

On a more practical note, Bulma is a pure CSS framework. Consisting of 39 individual Sass files that can be selectively imported or ignored, Bulma can be pared down to whatever essentials a project requires, allowing you to focus on building out the custom parts of a site after quickly implementing the more basic ones. A quick scan of the documentation (https://bulma.io/documentation/) reveals a large set of elements that can be quickly learned and integrated into all sorts of projects. Hell, I could just import the section that enables columns (https://bulma.io/documentation/columns/) and feel pretty happy about having it installed.

With this high level of modularity, Bulma’s comparatively small user community becomes less of a problem. M my team should have an easier time adapting their knowledge of CSS into the framework. Whenever any of us can’t solve a problem with Bulma, we can simply leverage CSS3’s capabilities and maybe a bit of jQuery without issue.

Where to from here?

I can’t be sure that this will be the right decision for my team. But even if Bulma doesn’t fit our needs, it will not have been a waste to learn it and try it out. The other benefit of introducing a framework is that it inevitably introduces new ideas. Perhaps this process will lead us to improving our CSS and nullifying our need for a framework altogether, or we’ll discover that we needed something else all along. Regardless, there’s value in looking at the new trends and techs that spin through the revolving door. You can never know the good stuff that might get left behind.

So, should you introduce a framework to your projects? I ‘unno. But, I encourage you to ask yourself that first question a lot. Is a framework going to solve your problems better than an improved understanding or core techs, or will it just be another unused tool hanging on the wall? Don’t worry about what the standard is or what other teams are doing, think critically about what your projects need and what works best to solve those problems, then move from there.

集客やサイト改善などWebに関することなら、
何でもお気軽にお問い合わせください

ウェブ集客のご相談、見積り依頼などは、こちらからお問い合わせください

ご相談・お問い合わせ

サービスや実績などをまとめた会社案内は、こちらからダウンロードできます

会社資料ダウンロード

お急ぎの方はお電話でも相談いただけます

0120-439-241