放弃Bootstrap&Foundation，迎接Semantic UI？

文章来自CoderWall，作者是Nicholas Jordon。在这篇文章当中作者讲述了Semantic UI具备哪些功能特性，以及和其它前端界面开发框架的不同之处。可能Semantic UI只是HTML/CSS框架领域上的一个新成员，但是它来势汹汹，势不可挡。引用Semantic UI团队的话说：“Semantic赋予设计师和开发者为UI创建一个共享词汇库的能力。”（以下是编译内容）

我通常情况下不喜欢更改开发框架，即使是HTML/CSS框架。但是有的时候为了最终的产品质量，还是值得一试去改变框架的。

有那么一段时间，我是Zurb's Foundation Framework的超级粉丝，它有许多其它框架没有的功能特性，同时它还有很多预制模板。所以使用Zurb's Foundation Framework来设计的话相对是比较舒适快捷的。但唯一的一点是有些功能得等到Foundation新版本发布出来才能使用。

进入到Semantic UI开发框架，就会看到数量庞大的功能特性，这些功能都很有特点。Semantic UI拥有支持情态动词、手风琴元素、元素调光器、3D转换，甚至是评级等多种功能。更不用说其它的运行程序，因为它们看上去都像是涂抹了黄油一样——运行起来特别流利顺畅。当然所列举的这些只是冰山一角，不过这能让你基本上了解大致情况。可能Semantic UI只是HTML/CSS框架领域上的一个新成员，但是它来势汹汹，势不可挡。

另外，这些功能使用的类别名称比一些随意的字符串更加的接近英语；所以使用Semantic UI设计会让你感觉更自然。因此，学习如何使用Semantic UI，并用Semantic UI进行设计也就方便的多了。

然而，现在的问题是Semantic UI忽略了一些基本功能，例如基本的图片滑块，或者是缩略图类等等。不过后来发现，这些所谓的功能缺失，实际上是和其它功能整合了，在其它方面是完全可以实现的。

Semantic UI的一些优点：

• 在MIT许可协议下出版。

• 有很好的证明文档记录。

• 看上去更容易学习/使用。

• 配备网格布局。

• 使用LESS动态样式语言。

• 有一些非常实用的附加配置，例如inverted类。

• 对于社区贡献来说是比较开放的。

• 有一个非常好的按钮实现，情态动词，和进度条。

• 在许多功能上使用图标字体。

Semantic UI的一些缺点：

• 没有图片滑块。

• 没有缩略图类。

• 缺少可见性类。

• 没有SASS。

• 没有发布1.0以上的版本。

我们再来看看BootStrap有哪些优缺点：

如今的Bootstrap已包括了几十个组件，每个组件都自然地结合了设计与开发，具有完整的实例文档，定义了真正的组件和模板。无论处在何种技术水平的开发者，也无论处在哪个工作流程中，都可以使用Bootstrap快速、方便地构建开发者喜欢的应用。

难能可贵的是，Bootstrap依旧本着“并行开发”、“作为产品的风格指南”和“迎合所有的技能水平”的原则帮助开发者解决实际问题，不断完善自己，吸引更多人选择Bootstrap应用于自己的项目中。

然而古人云“万物相生相克”，有好就有坏，Bootstrap也是一样。对于在国内的开发者来说，最可怕的就是IE兼容问题。目前Bootstrap对 IE6到IE8的支持都不友好。另一个缺点是，采用Bootstrap的模板，网站结构时常会显得臃肿。此外，覆盖一些样式时会造成代码冗余。

其次，再来看看Foundation有哪些优缺点：

Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种 Web上的UI组件，如表单、按钮、Tabs等等。

从兼容性方面来说，Foundation已经放弃了对IE 8的支持，而Bootstrap 2仍能较完美的支持IE 8，甚至通过类似bs-ie的方式来达到大部分component支持IE 6的要求，在国内是选择Foundation还是选择Bootstrap的时候可能还是需要考虑这一重要因素吧。

从Javaｓｃｒｉｐｔ库角度来说，Bootstrap 2/3采用的都是更为常见的jQuery，而Foundation采用的是Zepto，Zepto.js是支持移动WebKit浏览器的Javaｓｃｒｉｐｔ框架，具有与jQuery兼容的语法。

从社区支持度来说，Bootstrap在Github上的人气毋庸置疑，国内也有中文版的文档，各种教程案例以及衍生而来的插件、主题也是层出不穷，一片欣欣向荣之景。而Foundation的社区支持度则相对来说较为薄弱。因为Foundation的开发理念是mobile first，所以Foundation在国内则相对较为小众。

最后结论：

实话实说，很多人还是比较喜欢Semantic UI框架的，不管是在生产站点还是在个人项目中使用Semantic UI，都会让人觉得特别激动。如果Semantic UI框架能发挥它的所有潜力，很有可能会比Bootstrap和Foundation都深受开发者的喜爱。

在HN的讨论中，dfischer特别提到要想获得真正的Semantic功能特性，就不得不将演示彻底的从标记当中分离出来。而且像“评级”类这样的标准模块设置都是必不可少的。在短短的时间内就完成了这个http://betterfrontend.com/，但是没办法把时间放进去。这不是一个Semantic框架，因为类别名有太多的定义，它们只是用于同种功能的相同类别。一个使用类别来装饰的CSS框架永远不会是一个Semantic框架。

bluetidepro：个人觉得这个Semantic UI很有前景，Semantic UI团队在CSS预处理上使用LESS而不是使用SASS，也是非常独特的一点。

然而，并不是所有人都认为Semantic UI将会取代Bootstrap和Foundation的位置。他们觉得Bootstrap和Foundation各有各的好处。

dntrkv：Semantic UI框架所具备的优点，Bootstrap同样具备。例如，Semantic UI框架有很好的证明文档记录，>>>Bootstrap也有很好的证明文档记录；Semantic UI框架没有图片滑块，>>>而Bootstrap框架有图片滑块。

cschmidt：Bootstrap的Apache 2许可协议也是足够慷慨的，MIT许可协议并不是真的具有很多优势。

beat：Bootstrap的根基已经成熟了很多，使用也很广泛，从网络效应当中获得利益。Foundation是Bootstrap的替代品，对使用者同样具有很强的影响力。Semantic UI框架作为后来者，对开发者来说能有多大的吸引力呢？

不管是Bootstrap还是Foundation亦或是Semantic UI，作为开发框架，不同的开发人群对它们的接受程度和理解力当然是不一样的。不知道你怎么看待它们？                           （编译/薛梁  校审/付江）

原文：CoderWall