核心要点

• Web Components日益流行，对能够处理这种开发类型的CSS框架的需求也日益增长。传统的CSS框架（如Bootstrap或Foundation）由于其广泛的内置样式和代码，可能会限制开发人员使用Web Components。
• 组件驱动型CSS框架（如Pattern Lab、SUIT CSS、inuitcss和Pure CSS）旨在作为设计的起点，并提供一个开发Web Components的框架，而不会强加限制或不必要的样式。它们允许开发人员专注于自己的样式和代码，从而提高可重用性、一致性和协作性。
• 虽然组件驱动型CSS框架提供了许多好处，但它们可能会增加项目的复杂性，并且需要很好地理解框架的语法和约定。它们主要设计用于基于JavaScript的技术，但可以应用于任何支持模块化编程的编程语言。

“2015年，每个人都会放弃框架。”

我不太确定。我只是想吸引你们的眼球。说笑归说笑，你们有没有注意到前端领域的一个微妙变化，那就是每个人都在逐渐放弃框架？例如，Sass网格框架Susy放弃了对Compass的依赖，开发人员也一直被鼓励去思考是否需要jQuery。

如今，Web Components非常流行。随着我们进入一个组件成为Web应用程序一等公民的世界，我们迫切需要能够处理这种新型开发的框架。

Bootstrap和Foundation的局限性

如果您是前端开发人员，您很可能对Bootstrap或Foundation了如指掌。像这样的流行CSS框架在使用Web Components进行开发时可能会限制我们。并不是说它们不好。它们只是带有太多的内置样式。鉴于shadow DOM的功能，这可能不是您想要的。这些框架以试图满足所有人的需求而闻名。另一方面，组件驱动型CSS框架充当设计的起点，并提供一个开发Web Components的框架。它们的目标仅此而已。

Bootstrap在某种程度上彻底改变了我们编写前端代码的方式。它为我们提供了优秀的UI组件以及用于可扩展和可维护样式表的结构。它非常适合大型团队使用已接受的CSS格式进行协作。问题是，它包含大量代码。如果您不想从头开始构建任何内容，它就非常完美。但是，自定义它并不那么有效。您可以自定义它吗？当然可以。容易吗？值得怀疑。

“你现在是在框架的阻碍下工作，而不是因为框架而工作。” – Harry Roberts

Foundation有效地解决了这个问题。它旨在从头开始进行自定义。事实上，该团队一心想要使默认主题非常基础，以确保使用它构建的所有网站最终看起来都不一样。但是Foundation的一些组件与标记紧密耦合，这限制了您可以使用的标记，因此不仅仅是一个CSS框架。他们正在积极努力改进这方面。

UI工具包与框架

Harry Roberts在今年早些时候做了一个演讲（参见幻灯片），讨论了UI工具包和CSS框架之间的细微差别。在这个演讲中，他说，CSS框架不会妨碍你。它不包含任何样式。它对标记、HTML结构或类没有任何限制。

另一方面，UI工具包是一个完整的产品，它提供了开箱即用的完整包：设计、结构、标准、模式和JavaScript插件都包含在一个整齐的包装盒中。这些工具用于快速原型设计和快速启动。大多数情况下，如果您想让它们看起来与构建方式有所不同，您最终会覆盖规则并规避框架的定义。

从这个角度来看，正如Addy Osmani最近讨论的那样，使用Bootstrap构建的示例项目中的单个页面可能有多达91%的未使用CSS。

所以问题是：哪些框架会避开你的路，让你编写你的代码，而不是为你编写代码？

1. Pattern Lab

   Pattern Lab由Brad Frost和Dave Olsen创建，基于原子设计理念。这是一种灵活的方法，从基础开始设计网站，然后逐步向上构建。与其说它是一个框架，不如说它是一种构建网站和应用程序的方法。

   Pattern Lab鼓励专注于组件的设计网站。从基本的标记开始，逐步构建更复杂的组件。此框架对样式没有任何假设。它不会妨碍你，并允许你处理你的CSS。

   它还提供CSS创作结构指南以及一套有助于整个创作过程的工具。例如，一个随机调整屏幕大小以查看你的设计在不同屏幕尺寸上的工作方式的工具，以及一个用于快速协作的注释工具。

   但最好的部分是，它是预处理器无关的。与许多其他解决方案不同，它对使用什么预处理器没有发言权；使用你喜欢的任何预处理器，只需遵循原则即可。它还带有零样式，并允许你构建样式指南，而不是强加一个样式指南给你。

2. SUIT CSS

   Nicolas Gallagher的SUIT CSS，根据定义，是一种基于组件的UI开发方法。它提供了一套指南，允许实现和组合松散耦合的独立单元。

   组件是此框架的核心。它旨在开发前端系统，其中组件是可组合和可配置的。它提供构建良好封装的组件的指南，并且可以通过界面进行更改。

   SUIT CSS是一个成熟的框架，建立在坚实的基础之上。文档是学习更多关于它的好地方，同时也学习更多关于前端原则的知识。

   它还带有一套可以添加到工作流程中的包。它与npm（节点包管理器）配合良好，并包括自动前缀功能、封装测试以及可自定义和可扩展的预处理器。试一试，或者坐下来阅读它所基于的一些原则，即使你决定不使用它，这些原则也能给你带来很好的见解。

3. inuitcss

   inuit CSS不是UI工具包。它不强加任何设计，也不包含数千个组件或CSS代码行。它是一个考虑到可扩展性的框架，作为一个小型包提供，你可以根据需要进行扩展。

   “inuitcss提供了一个坚实的基础架构，你可以在其上构建任何大小或风格的网站或应用程序。”

   再次强调，inuitcss最重要的方面是它可以快速避开你的路。它旨在与样式无关，并构成一个很好的基础，你可以在其上构建你的CSS。

   例如，inuitcss中的分页只包含边距和填充，而不是完全设计的组件。它允许你定义自己的样式，而无需自定义框架，或者更糟糕的是覆盖它。

   inuitcss目前正在进行大修，下一版本的预Alpha模块可用。

   我喜欢inuitcss的另一个方面是它允许你方便地命名空间组件。很容易将框架放入现有项目中，并开始重构你的现有代码。

   这对于任何现有的框架来说都是一个巨大的胜利。相比之下，打开Bootstrap或Foundation，最有可能的第一行代码会影响所有内容（我在看你，box-sizing！）。这些框架无法与现有样式一起使用，或者，将其中一个框架放入项目中并期望一切保持不变可能是一件痛苦的事情。inuitcss也这样做，但它是可选的，并且易于禁用。

4. Pure CSS

   在我看来，Pure CSS介于UI工具包和框架之间。它提供了一组基本样式，但允许你从那里接管。根据设计，它旨在避开你的路，并允许你创建CSS，而无需覆盖现有规则。

   “Pure具有最少的样式，并鼓励你在其之上编写应用程序样式。它旨在避开你的路，并使覆盖样式变得容易。”

结论

Web Components正在彻底改变前端领域。当使用这些较新的功能时，我们当前最喜欢的工具可能不是最好的。也许是时候超越你最喜欢的框架，尝试一些新的东西了。我希望这篇文章已经给了你足够的选项来考虑。

需要有足够的清晰度才能为任何给定的问题选择正确的工具。明智地选择。与往常一样，不要回避自己动手。

关于组件驱动型CSS框架的常见问题解答（FAQ）

使用组件驱动型CSS框架的主要好处是什么？

组件驱动型CSS框架提供了许多好处。首先，它们提高了可重用性。组件可以在项目的不同部分重复使用，从而减少编写的代码量，并使代码库更易于管理。其次，它们增强了一致性。通过在整个项目中使用相同的组件，用户界面保持一致，从而提供更好的用户体验。第三，它们促进了协作。不同的团队成员可以同时处理不同的组件，从而加快开发过程。最后，它们使维护更容易。由于组件是独立的，对一个组件的更改不会影响其他组件，从而使错误修复和更新变得不那么复杂。

组件驱动型开发与传统的开发方法有何不同？

传统的开发方法通常采用自上而下的方法，其中整体设计被分解成更小的部分。相比之下，组件驱动型开发采用自下而上的方法，其中各个组件独立开发，然后组合成完整的设计。这种方法允许更大的灵活性和可扩展性，因为可以添加、删除或修改组件，而不会影响整个系统。

组件驱动型CSS框架可以与任何编程语言一起使用吗？

组件驱动型CSS框架主要设计用于基于JavaScript的技术，例如React、Vue和Angular。但是，组件驱动型开发的原则可以应用于任何支持模块化编程的编程语言。需要注意的是，具体的实现细节可能因使用的语言和框架而异。

一些流行的组件驱动型CSS框架是什么？

一些流行的组件驱动型CSS框架包括Bootstrap、Foundation、Bulma和Semantic UI。这些框架提供了预先设计好的组件，可以根据项目的具体需求进行自定义。它们还提供了大量的文档和社区支持，使它们成为初学者和经验丰富的开发人员的理想选择。

如何开始组件驱动型开发？

要开始组件驱动型开发，首先需要了解模块化编程和基于组件的体系结构的基本原则。接下来，选择一个适合项目需求的组件驱动型CSS框架。熟悉框架的文档，并开始尝试创建和使用组件。在线教程和课程也可以帮助你学习这些知识。

使用组件驱动型CSS框架有什么缺点吗？

虽然组件驱动型CSS框架提供了许多好处，但它们也有一些潜在的缺点。例如，它们可能会增加项目的复杂性，特别是对于初学者而言。它们还需要很好地理解框架的语法和约定。此外，过度依赖预先设计的组件可能会限制创造力，并导致设计看起来很普通。

组件驱动型开发如何改进团队协作？

组件驱动型开发通过允许不同的团队成员同时处理不同的组件来改进团队协作。这种并行开发过程可以显著加快开发时间表。此外，由于组件是独立的，一个开发人员所做的更改不会影响其他开发人员的工作，从而降低了冲突和错误的风险。

组件驱动型CSS框架可以用于移动应用程序开发吗？

是的，组件驱动型CSS框架可以用于移动应用程序开发。许多框架，例如React Native和Ionic，提供了专门为移动界面设计的组件。这些组件可以用来创建响应式设计，这些设计可以在各种屏幕尺寸和设备上良好运行。

组件驱动型开发如何支持测试和调试？

组件驱动型开发通过允许独立测试和调试每个组件来支持测试和调试。这种模块化方法使隔离和修复错误以及为各个组件编写单元测试变得更容易。它还促进了回归测试，因为对一个组件的更改不会影响其他组件。

如何确保组件的可访问性？

确保组件的可访问性包括遵循无障碍网页设计的最佳实践。这包括使用语义HTML进行结构化，为图像提供替代文本，确保足够的颜色对比度，并使所有功能都可通过键盘访问。许多组件驱动型CSS框架开箱即用地提供了可访问性功能，但仍然需要使用各种辅助技术测试你的组件，以确保它们确实是可访问的。