“2015 is the year everyone will move away from frameworks.”
“ 2015年是每个人都将脱离框架的一年。”
I don’t really know about that. I just wanted to link bait all of you. Jokes aside, have you noticed the subtle movement in the front-end scene where everyone is moving away from frameworks? For example, Susy, the Sass grid framework moved away from Compass dependency, and developers have been encouraged to always ask whether you need jQuery.
我真的不知道。 我只想链接所有人。 撇开笑话，您是否注意到前端场景中每个人都远离框架的微妙变化？ 例如，Sass网格框架Susy摆脱了Compass依赖关系，并且鼓励开发人员始终询问您是否需要jQuery 。
Web Components are all the rage today. As we move forward into a world where components are first-class citizens of a web application, we are in dire need of frameworks that are capable of handling this new development.
Web组件如今风靡一时。 随着我们进入一个组件是Web应用程序的一等公民的世界，我们迫切需要能够处理这一新开发的框架。
If you are a front-end developer, there’s a good chance you know either Bootstrap or Foundation inside-out. Popular CSS frameworks like those may be limiting us while developing with web components. Not that they are bad or anything. They just come with too many built-in styles. Given the power of shadow DOM, that’s probably not what you want. These frameworks have the reputation of trying to be everything for everyone. On the other hand, component-driven CSS frameworks act as starting points for design and provide a framework for developing web components. They don’t aim to be anything more than that.
如果您是前端开发人员，则很有可能完全了解Bootstrap或Foundation 。 诸如此类的流行CSS框架可能在使用Web组件进行开发时限制了我们。 并不是说它们不好或什么。 它们只是带有太多内置样式。 鉴于影子DOM的强大功能，这可能不是您想要的。 这些框架的声誉是尝试成为所有人的一切。 另一方面，组件驱动CSS框架充当设计的起点，并提供了开发Web组件的框架。 他们的目标不只是这些。
Bootstrap to some degree has revolutionized the way we write front-end code. It gives us great UI components along with a structure for scalable and maintainable stylesheets. It is great for working with large teams on an accepted format for CSS. The problem is, it comes with a lot of code. It’s perfect if you don’t want to build anything from scratch. Customizing it, however, is not as effective. Can you customize it? Sure. Is it easy? Questionable.
Bootstrap在某种程度上彻底改变了我们编写前端代码的方式。 它为我们提供了出色的UI组件以及可伸缩和可维护样式表的结构。 与大型团队一起使用可接受CSS格式非常有用。 问题是，它附带了很多代码。 如果您不想从头开始构建任何东西，这是完美的。 但是，对其进行自定义并不那么有效。 可以自定义吗？ 当然。 这简单吗？ 可疑的。
“You are now working in spite of – rather than because of – a CSS framework.”– Harry Roberts
“尽管(而不是因为)CSS框架，您现在仍在工作。” –哈里·罗伯茨(Harry Roberts)
Foundation battled this problem efficiently. It was built to be customizable from scratch. In fact, the team was hell-bent on making the default theme very basic, ensuring that all websites built with it do not end up looking the same. But some of foundation’s components are closely coupled with markup, which limits the markup you can use, thus going beyond being just a CSS framework. They are actively working to improve on this front.
基金会有效地解决了这个问题。 它旨在从头开始进行定制。 实际上，团队竭力使默认主题变得非常基础，以确保使用该主题构建的所有网站最终看起来都不相同。 但是，基础的某些组件与标记紧密结合在一起，这限制了您可以使用的标记，因此不仅限于CSS框架。 他们正在积极努力改善这一方面 。
Harry Roberts presented a talk earlier this year (see slides) discussing the fine line between UI kits and CSS frameworks. In this talk, he says, a CSS framework gets out of your way. It comes with no styles included. It comes with no restriction on markup, HTML structure, or classes.
哈里·罗伯茨(Harry Roberts) 在今年早些时候发表了一次演讲 ( 请参阅幻灯片 )，讨论了UI套件和CSS框架之间的界限。 他说，在这次演讲中，CSS框架让您望而却步。 它不包含任何样式。 它对标记，HTML结构或类没有限制。
A UI kit, on the other hand, is a complete product that provides the whole package right out of the box: Design, structure, standards, patterns, and JavaScript plugins in one neatly packaged box. These are tools for rapid prototyping and getting off the ground quickly. More often than not, you will end up overwriting rules and circumvent the framework’s definitions if you want them to look any different than how they were built.
另一方面，UI工具包是一个完整的产品，可以立即提供完整的包装：设计，结构，标准，模式和JavaScript插件都包装在一个整齐的包装盒中。 这些是用于快速制作原型并快速入门的工具。 如果您希望规则看起来与构建规则有所不同，通常会覆盖规则并绕开框架的定义。
To put that in perspective, as Addy Osmani recently discussed, a single page from a sample project built using Bootstrap can have as much as 91% unused CSS.
准确地说 ， 正如Addy Osmani最近讨论的那样 ，使用Bootstrap构建的示例项目中的单个页面可能有多达91％的未使用CSS。
So the question is: Which frameworks will get out of your way and let you write your code, instead of writing it for you?
因此，问题是：哪些框架会让您不知所措，让您编写代码，而不是为您编写代码？
Pattern Lab, by Brad Frost and Dave Olsen, is built with the atomic design concept. It is a nimble approach to designing websites starting from the ground and working your way up. It is not so much a framework as a methodology for architecting websites and applications.
布拉德·弗罗斯特(Brad Frost)和戴夫·奥尔森(Dave Olsen)共同设计的 Pattern Lab是采用原子设计概念建造的。 从头开始并逐步发展网站是一种灵活的方法。 它不是框架，而是架构网站和应用程序的方法。
Pattern Lab encourages designing websites with a focus on components. Start with basic markup and work your way up to more complex components. This framework comes with no assumptions on styles. It gets out of your way and allows you to work on your CSS.
Pattern Lab鼓励设计注重组件的网站。 从基本标记开始，然后逐步开发更复杂的组件。 该框架不附带样式假设。 它摆脱了障碍，使您可以使用CSS。
It come with guidelines for how to structure your CSS-authoring as well as a set of tools that help in the entire authoring process. For example, a tool that randomly resizes the screen to see how your design works on different screen sizes and an annotation tool for quick collaboration.
它附带了有关如何组织CSS创作的指南，以及一系列有助于整个创作过程的工具。 例如，一个用于随机调整屏幕大小以查看您的设计如何在不同屏幕尺寸上工作的工具，以及一个用于快速协作的注释工具。
But the best part is, it is preprocessor-agnostic. Unlike many solutions out there, it has no say in what preprocessor you use; use whatever you like, just follow the principles. It also comes with zero styling and lets you build a styleguide instead of imposing one on you.
但是最好的部分是，它与预处理器无关。 与现有的许多解决方案不同，它没有说明要使用哪种预处理器。 随便使用，只要遵循原则即可。 它还带有零样式，可让您构建样式指南，而不是将样式样式强加于您。
SUIT CSS by Nicolas Gallagher, by definition, is a methodology for component-based UI development. It provides a set of guidelines that allow for the implementation and composition of loosely coupled, independent units.
根据定义，Nicolas Gallagher的SUIT CSS是一种基于组件的UI开发的方法。 它提供了一组准则，允许实施和组成松散耦合的独立单元。
Components are the crux of this framework. It aims to develop front-end systems where components are composable and configurable. It provides guidelines for building components that are well encapsulated and can be altered via an interface.
组件是此框架的关键。 它旨在开发组件可组合和可配置的前端系统。 它为构建封装良好且可以通过界面更改的组件提供了指导。
SUIT CSS is a mature framework that is built on top of solid principles. The documentation is a great place to learn more about it along with learning more about front-end principles in general.
SUIT CSS是基于可靠原则构建的成熟框架。 该文档是学习更多内容以及全面了解前端原理的好地方。
It also comes with a set of packages that you can add to the workflow. It plays well with npm (node package manager) and includes autoprefixing capability, encapsulation testing, and a customizable and extensible preprocessor. Give it a spin or sit back and read some of the principles it is based on, which give you great insight even if you don’t decide to use it.
它还带有一组可以添加到工作流程中的软件包。 它与npm(节点程序包管理器)配合使用，并具有自动前缀功能，封装测试以及可自定义和可扩展的预处理器。 尝试一下或坐下来，阅读它所基于的一些原理，即使您不决定使用它，也可以为您提供深刻的见解。
inuit CSS is not a UI kit. It does not impose any design and it does not come with thousands of components or lines of CSS code. It is a framework that is built with scalability in mind and comes as a small package that you can scale as you require.
因纽特人CSS不是用户界面工具包。 它不强加任何设计，并且不包含数千个CSS代码的组件或行。 它是一个考虑到可伸缩性而构建的框架，它是一个小型软件包，可以根据需要进行扩展。
“inuitcss provides a solid architectural foundation upon which you can build any size or style of website or app.”
“ inuitcss提供了坚实的架构基础，您可以在此基础上构建任何大小或样式的网站或应用程序。”
Once again, the most important aspect of inuitcss is the fact that it gets out of your way quickly. It is designed to be style-agnostic and forms a nice base on which you can build your CSS.
再一次，inuitcss的最重要方面是它会很快摆脱您的干扰。 它被设计为与样式无关，并为您构建CSS奠定了良好的基础。
For instance, pagination in inuitcss comes with just margins and padding instead of a fully designed component. It lets you define your own styles without having to customize the framework, or worse, override it.
例如，inuitcss中的分页仅带有边距和填充，而不是完全设计的组件。 它使您可以定义自己的样式，而不必自定义框架，或者更糟的是覆盖它。
inuitcss is currently undergoing a revamp and a set of pre-alpha modules from the next version are available.
inuitcss当前正在进行改造，并且可以提供下一版本的一组pre-alpha模块。
Another aspect I like about inuitcss is that it allows you to namespace components conveniently. It’s easy to drop the framework into an existing project and start re-factoring the hell out of your existing code.
我喜欢inuitcss的另一个方面是它允许您方便地命名组件的名称空间。 将框架放到现有项目中并开始从现有代码中重构地狱很容易。
This is a huge win against any framework out there. By contrast, open up Bootstrap or Foundation and most probably the first line is a piece of code that affects everything (I’m looking at you, box-sizing!). These frameworks can’t live in tandem with an existing style, or, it can be a pain to drop one of them into a project and expect things to remain the same. inuitcss does this too, but its optional and easy to disable.
与任何现有框架相比，这都是巨大的胜利。 相比之下，打开Bootstrap或Foundation，很可能第一行是一段会影响所有内容的代码(我正在看着你，调整大小！)。 这些框架不能与现有样式并存，或者，将其中一个放入项目并期望保持不变是很痛苦的。 inuitcss也可以这样做，但是它是可选的并且很容易禁用。
Pure CSS, in my opinion falls somewhere in between a UI toolkit and a framework. It provides a base set of styles but allows you to take it over from there. By design, it is intended to stay out of your way and allow you to craft your CSS without the need to override existing rules.
在我看来，纯CSS介于UI工具包和框架之间。 它提供了一组基本样式，但允许您从那里继承。 通过设计，它意在不影响您的工作，并允许您制作CSS而不需要覆盖现有规则。
“Pure has minimal styles and encourages you to write your application styles on top of it. It’s designed to get out of your way and makes it easy to override styles.”
“ Pure具有最小的样式，鼓励您在其之上编写应用程序样式。 它旨在摆脱您的束缚，并轻松覆盖样式。”
Web components are revolutionizing the front-end scene. Our current favorite tools may not be the best when working with these newer capabilities. It may be time for you to look beyond your favorite framework and try something new. I hope this article has given you enough options to consider.
Web组件正在革新前端场景。 使用这些更新的功能时，我们当前最喜欢的工具可能不是最好的。 您可能需要超越自己喜欢的框架，尝试一些新的东西。 我希望本文为您提供了足够的选择来考虑。
It takes a good amount of clarity to use the right tool for any given problem. Choose wisely. As always, don’t shy away from rolling your own.
对于任何给定的问题，使用正确的工具都需要大量的清晰度。 做出明智的选择。 与往常一样，不要回避自己的想法。
翻译自: https://www.sitepoint.com/component-driven-css-frameworks/
