Rails Rails 4 新项目之 CSS 框架的选择:Bourbon

grantbb · 2015年11月01日 · 最后由 meeasyhappy 回复于 2016年03月31日 · 4159 次阅读

我在之前的项目中使用过BootstrapFoundation,确实非常方便使用,把相关的 gem 放到项目中之后,然后再到网站上找到一些 HTML 和 CSS 的例子,基本能够满足需求,但是要说到对这两个框架有多了解,还真是谈不上,这两个都是大而全的东西,在 Rails 中基本上都是一股脑全部引入,然后就只管用,确实省心。

但是时间长了就发现,用这两个框架写出来的页面代码还是非常啰嗦,易读性和可维护性随着项目的变大越来越差。

之前还有一个项目用到了CompassCompass中也是包含了很多内容,我个人一直比较喜欢简单,轻量的东西,所以看到这种庞大的库就有点害怕。

然后我就想有没有其他选择呢?后来,在一个开源项目Hours中就发现了Bourbon,然后又是Neat,还有BittersRefills,一开始一下看到四个东西,感觉摸不清思路,都不知道是干什么的。后来,读了几篇文章后,就清楚了Bourbon整个技术栈的理念。就是把像Bootstrap这种大而全的框架,清楚地拆分成四个小的工具库,然后可以组合在一起使用,也可以根据需要来选择使用。

下面简单介绍一下四个工具:

  • Bourbon: 简单的轻量级的Sass Maxin
  • Neat: 一个轻量级的语义化的页面网格框架
  • Bitters: 脚手架 (scaffold) 样式,变量的定义,方便快速开始 Bourbon 的项目
  • Refills: 基于以上三个的一些实用的组件库

另外看到Bourbonthoughtbot出品的,我相信这些工具一定在实际项目中得到了验证。我一直以来都很喜欢thoughtbot开发一些 gems,非常实用,而且轻量,比如clearance等。

其中下面这两篇文章说服了我:

5 Reasons We Chose Bourbon/Neat Over Foundation or Bootstrap

Why I prefer Bourbon over Bootstrap

最吸引我得就是使用BourbonNeat,可以写出非常易读,易懂的语义化的HTML

特别是当我们使用Haml或者Slim这样的模板语言后,在模板中如果都是一些语义化的CSS class,代码看起来就非常直观。

比如: 用 Bootstrap 会这样写 (如果再加上一些响应式的样式就更加冗长):

.container
  .row
    .col-md-6 /* some content */
    .col-md-6 /* some content */

使用 Borbon 可能会是这样,非常清晰,直观:

.news
  .hot-news
  .latest-news

接下来简单说一下我是如何在新的 Rails 项目中使用的。

1. 基本安装:

这里没有什么特别需要说明的,大家只要按照官方 github 上的文档说明,很容易搞定。

2. 使用 normalize.css

在 Bootstrap 中默认是集成了normalize.css,所以我们不用单独引入,在 Bourbon 栈中默认是没有的,需要我们单独引用。这里使用 normalize-rails 这个 gem 就可以了。

gem "normalize-rails"

3. 使用autoprefixer

Bourbon 中有一大块功能是关于vendor prefixes的。需要开发者自己主动地去使用封装好的一些 Sass 的 mixin,这个对于我一个后端出身的号称全栈的开发者要求有些高了。 同时 autoprefixer 的处理方式就是非常的傻瓜式,开发者自己不要管 vendor prefixes,尽管写标准的 CSS,剩下的 autoprefixer 自动搞定。 Bourbon 的开发者也同意这一点,所以在Bourbon5.0中,关于 vendor prefixes 的部分也将会删除。 所以,我们只需要使用 gem "autoprefixer-rails"就可以了。

gem "autoprefixer-rails"

如果想了解和深入学习 Bourbon 相关的技术,可以到官方网站上查看详细的使用文档。

这里还有一个 youtube 视频系列,可以帮大家系统学习: Awesome CSS with Bourbon, Neat, Bitters & Refills! 国内的朋友记得翻墙哦。

BTW:随着项目的进行,我会逐步写出对于一些架构和工具选择总结的文章。

原文链接:BigBing 技术博客 - Rails4 新项目之 CSS 框架的选择:Bourbon

bourbon 是好东西,不过你那个和 bootstrap 比较的例子其实没什么说服力,本来 bootstrap 就不应该这样用的。那些暴露出来的 class helpers 只适合用于创建 rapid prototype,正儿八经去写的时候也应该用语义化的 HTML+CSS Classnames,然后使用 bs 的 mixins 把那些 helpers 封装起来。所以本质上它们并没有太大的不同,只是 bourbon 没有去考虑做 rapid prototype 的场景,所以它只提供 mixins 而不提供 class helpers,于是就逼迫开发者正儿八经的干每一件事情(这当然是好事)。

这一点很难说是 bs 有意为之,还是忽略了对一般开发者的提点,然而我确实看到文档中有这样的描述:

You can use predefined grid classes or Sass mixins for more semantic markup.

而且很多国外的作品和 themes 也都是这样去实践的,可为什么在国内就只知道你例子中所体现的写法呢?

我只能猜测大家都不看文档的,另外就是 bs 不去强调这一点也分半口锅吧。

#1 楼 @nightire 更加深入的分析,你提到的例子在文档中可能藏得比较深。大部分人估计都是照着一些例子来模仿。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号