跳到主要内容

测验:你应该使用什么CSS框架?

+$CSS has many positive attributes but it can also be a real nightmare. We’ve all seen CSS that has spiralled out of control into a mess of co-dependent, poorly named spaghetti.

+$CSS frameworks like Bootstrap and Foundation 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?

+$At BuzzFeed, we've created固体+$, a framework that codifies common UX patterns across our products and reduces the amount of custom CSS we’re writing.

+$This is important to us because we have a big, busy design team. Solid gives us a common UI language which helps to reduce our design overheads and keeps us visually and semantically consistent.

+$In true BuzzFeed fashion, we have created a quiz to help you consider what is important to you and to decide whether to use an existing framework, make your own, or not use a framework at all.

那你应该采取什么方法?回答以下问题以了解:

你的项目风格有多重要?

  • 一个+$: The style of the product is an afterthought for us
  • +$: Fairly important, that’s why I’m taking this quiz!
  • C:风格是产品

您的项目中是否有共同/共享模式?

  • 一个:不,但我希望有
  • B:是的,对表单和按钮等共享模式的需求是显而易见的
  • C:一切都是独一无二的,这就是我喜欢它的方式

您是否需要实施大量定制的一次性设计?

  • 一个:不
  • +$: I’m not sure yet, it’s too early in the process to know
  • C:是的,这个网站将是华而不实的想法

+$How much front end expertise do you have on the team?

  • 一个:它可能更强大
  • +$: There is a strong front end engineering presence on my team
  • C+$: What is front end expertise?

+$How would you describe the make-up of your team?

  • 一个:一个主要是工程师的小团队
  • :一个由设计师和工程师组成的庞大团队,他们发现需要经常进行协作
  • C: 只有我!也许我的朋友约翰,如果他有时间

什么是产品的视觉风格?

  • 一个:它可以使用通用样式,只要我们可以在这里和那里定制一些东西
  • :我们的产品是可预测的,并且具有重复但独特的需求
  • C:我们设计的所有东西都是一种特殊的,特殊的花朵。像约翰一样

你的时间表是什么时候?

  • 一个:两个星期
  • :这是我个人的旅程,伙计
  • C:两个月

您认为这个项目最重要的优先事项是什么?

  • 一个+$: The timeline – we need something, like, yesterday
  • :可持续发展 - 我需要确保工程师能够在明年工作,而不会恨我
  • C:设计 - 我们经历了很多华丽的设计手工

什么阻止您为Web项目创建自定义CSS样式指南?

  • 一个+$: My other priorities leave no time
  • :项目的利益相关者不同意这是一个优先事项
  • C:我现在不需要它

你的精神动物是什么?

  • 一个:一只豹子
  • : 一只狼
  • C:在我可爱的朋友约翰之后,一只名叫约翰的英国斗牛犬。你好,约翰!

分数时间

记下您的答案,然后根据您的最高排名类别发现您的结果。

+$Mostly A: Use an existing framework

如果时间紧迫且不同的风格不是您的首选,那么现有的框架就是您的选择。如果您想尽快启动并运行,请尝试引导+$. 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.

主要是B:构建自己的框架

+$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 from 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 simply because it’s easier to develop with it than without it. Building your own tool is not easy. But persevere and some day you’ll be writing cheeky quizzes too.

主要是C:不要使用框架

+$Okay, 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.

如果您想要对CSS进行基本升级,请考虑阅读BEM,这是一种CSS命名约定,可以明确哪些类相互依赖。有关更多功能的CSS签出萨斯,一个预编译的CSS扩展,为您提供变量和mixins。

本文最初发表于,专业网页设计师和开发人员的杂志。在这里订阅网

相关文章:



翻译字数超限