What CSS framework should you use?

[Rss Bot 1]

CSS can revolutionise your web layouts, help you create animated menus, responsive layout grids and more – but it can also be a real nightmare. We’ve all seen CSS that has spiralled out of control into a mess of codependent, poorly named spaghetti.

Fortunately, CSS frameworks like Bootstrap and Foundation are here to help. These frameworks give you the base styles you need to get your project off the ground quickly. But what if you need something more custom? What if your project is a beautiful, unique child that doesn’t conform to the rules, man?

Solid foundation

Buzzfeed has built its own CSS framework to make everything consistent – from header sizes and text colours down to social buttons

At BuzzFeed we decided that we needed to create a framework from scratch. This framework, Solid, has changed how we develop our UI. It’s an atomic style guide made up of single-responsibility CSS classes – small classes that each describe a single CSS property (such as .text-1 for our h1 font size or .m1 for our default margin). 

By combining these classes we can cover the vast majority of styles in our ecosystem in a standardised way. With Solid we’ve codified common UX patterns across BuzzFeed’s products and reduced the amount of custom CSS we’re writing.

Buzzfeed's Solid framework even extends to how forms and buttons are styled

Why is this important? We have a big design and engineering team at BuzzFeed and, along with our web application, we also create and maintain many internal tools and dashboards. It is a challenge for us to ensure the design and CSS of our products stays visually and semantically consistent. Having a common UI language helps reduce the amount of design and HTML/CSS overhead, and gives us a common language we can share while building out BuzzFeed’s UI.

But just because building a custom framework works for us doesn’t mean it will suit you and your projects. In true BuzzFeed fashion, we have created a quiz to help you decide whether you should use an existing framework, make your own, or not use a framework at all.

So what approach should you take? Answer the following questions to find out:

 How important is the style of your project?

• A: The style of the product is really an afterthought for us
• B: Fairly, that’s why I’m taking this quiz!
• C: The style is the product

 Are there common/shared patterns in your project?

• A: No, but I would like there to be
• B: Yes, the need for shared patterns like forms and buttons is apparent
• C: Everything is unique and that’s how I like it

Do you need to implement a lot of custom, one-off designs?

• A: No
• B: I’m not sure yet, it’s too early in the process to even know
• C: Yes, this website is going to be flashy and blow minds

How much frontend expertise do you have on the team?

• A: It could be stronger
• B: There is a strong frontend engineering presence on my team
• C: What is frontend expertise?

How would you describe the makeup of your team?

• A: A small team of mostly engineers
• B: A large team of designers and engineers who find the need to collaborate often
• C: It’s just me! Maybe my friend John if he has time

What’s the visual style of the product?

• A: It can work with a generic style, as long as we can customise a few things here and there
• B: Our product is predictable and has repeated but unique needs
• C: Everything we design is a special, idiosyncratic flower. Like John

What’s your timeline?

• A: Two weeks
• B: This is my personal journey, man
• C: Two months

What would you consider the most important priority for this project?

• A: The timeline – we need something, like yesterday
• B: Sustainability – I need to make sure an engineer can work on this next year without hating me
• C: Design – we’re after a lot of flashy design handiwork

What’s stopping you from creating a custom CSS style guide for your web project?

• A: The other priorities on my plate right now leave no time
• B: The stakeholders on the project don’t agree this is a priority
• C: I don’t have a need for it right now

What’s your spirit animal?

• A: A leopard
• B: A wolf
• C: An English bulldog named John, after my lovely friend John. Hi John!

Score time

Tally up your answers, then discover your result based on your highest ranking category.

Mostly As: Use an existing framework

If timelines are tight and a distinct style is not your priority, then an existing framework is the way to go. If you want to get up and running as quickly as possible, try Bootstrap. For a responsive site with a clean, minimal style, try Foundation. If you’re building a more granular UI with some constraints, go for BassCSS. All three are robust and well-documented – you’ll have a UI together in no time.

Mostly B: Build your own framework

Sounds like your project needs its own standardised, documented styles. Congratulations! You’ve now got a real project on your hands. Try looking at existing frameworks and building off their best practices. Think of your framework from an outside perspective. Would your team use it if they didn’t have to? 

Solid works for BuzzFeed because it’s simply easier to develop with than without it (to read more about Solid and how we got started, check out our post on Medium). Building your own tool is not easy. But persevere and some day you’ll be writing cheeky quizzes too.

Mostly C: Don’t use a framework

OK, so there are a lot of problems with CSS. But you know what? Every web dev knows how to write it. If your project is small and stylised, consider sticking to vanilla CSS. Just make sure not to nest your selectors too deep. 

If you want a basic upgrade to CSS, consider reading up on BEM, a CSS naming convention that makes it clear which classes are dependent on each other. For more functional CSS check out Sass, a precompiled CSS extension that gives you variables and mixins.

This article was originally published in issue 287 of net, the magazine for professional web designers and developers – offering the latest new web trends, technologies and techniques. Subscribe to net here.

Related articles:

• Choose a website builder: 16 top tools
• How to make responsive web apps with container queries
• 12 must-have code testing tools

View the full article