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

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

我在之前的项目中使用过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

共收到 3 条回复

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 更加深入的分析,你提到的例子在文档中可能藏得比较深。大部分人估计都是照着一些例子来模仿。

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