etaoux/brix

创意中心在引入 Brix Style 后遇到的一些问题以及解决办法

cyjake opened this issue · 10 comments

cyjake commented

先说明一下创意中心，使用 Rails 开发，样式最初是纯 CSS 写，后来 Rails 有了 Asset Pipeline，改用 SCSS ，使用 KISSY CSS 里的 reset.css 做样式重置，没有栅格，简单写了个 1000px 宽的居中。

起初因为担心 normalize.less 与 reset.css 出入太多，没有使用编译好的 brix.css，而是挑了用得到的部分，一点点放进来。后来发现，除了重置方式的差别之外，form.less 打击面太广，也是一个大问题。标签与头像没有用上，按下不表。

问题一：Less 与 SCSS 之分

两周前开始尝试，用了最需要的 grid.less，并改写成 grid.scss。顺便在此详细答 @xthsky 问，为何改写而不直接用，原因如下：

  • Rails 默认支持的是这个
  • 旧代码全部是 SCSS
  • SCSS 的流程控制语法更简洁，mixin 和 include 的用法也更清楚明了

第三点在 grid.scss 中比较明显，代码请看 https://github.com/dotnil/brix-style/blob/master/src/grid.scss ，
对比 Less 版本：https://github.com/etaoux/brix/blob/master/src/style/mixins.less#L184

所以此问题，我的解决办法是用 SCSS 重写。除了流程控制语法差别比较大之外，其他的都比较细微：

不过，新启动的 Rails 项目，不用担心此问题，换 Less 的代价并不大，有现成的 gem 支持，https://github.com/metaskills/less-rails

reset 与 normalize

然后遇到的就是 Brix Style 自身代码的问题了，normalize 与 reset 的出入，我感受到比较多的就两个：

  • ul、ol 没有重置
  • p、h[1-6]、pre 等，有 margin: 1em 0；

前者，我增加了 .reset 来把它们重置掉，在需要重置的 ul、ol 上加 .reset 就好：

ul, ol {
  &.reset {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
      margin: none;
    }
  }
}

后者，我挺喜欢这种方式的。这个差别造成的问题自然不少，不过挨个改一下也没那么难。自带的 reset-patch 我并没有用。

form 太 tnnd 的暴力了

https://github.com/etaoux/brix/blob/master/src/style/forms.less#L73

label、input、legend 有 margin 有 width，让我之前散落各处，并不在 form 中 label、input 全都奇葩了……

所以我直接把它们塞回到 form 里面去 https://github.com/dotnil/brix-style/blob/master/src/form.scss#L42

其他一些与我项目不符的，则在项目样式中重置、补齐。

button 的不足之处

Rails 项目中，有种按钮是通过 <%= button_to %> 生成的，结构类似这样：

<%= button_to '拷贝创意', mitosis_creation_path(:id => creation.id), :class => 'btn', :method => 'post' %>
<form action="/creations/100351/mitosis" class="button_to" method="post">
  <div>
    <input class="btn" type="submit" value="拷贝创意">
    <input name="authenticity_token" type="hidden" value="XLtk0GDl1SEeTXinitnb/9DmaUNHBf7eGoszUlS1NRA=">
  </div>
</form>

为什么一个按钮要搞成这样，说来话长，幸运的是，在我的项目里这种 .btn 都只在 .btn-group 里面使用，所以我可以这么搞：

.btn-group {
  form, .btn {
    float: left;
  }
  form:first-child {
    .btn {
      border-left-width: 1px;
      @include border-top-left-radius(2px);
      @include border-bottom-left-radius(2px);
    }
  }
  form:last-child {
    .btn {
      @include border-top-right-radius(2px);
      @include border-bottom-right-radius(2px);
    }
  }
}

曲线救国吧。

另外，在 button.less 中有一些针对低版本 IE 的 hack，https://github.com/etaoux/brix/blob/master/src/style/buttons.less#L9 ，我在项目中并没能重现这些问题，所以都直接去掉了。或者，注释再详细一点？

还有一些细节问题，我迟些补充吧，光看代码想不起来了……

EOF

Brix Style 中，还有 avatar、tag、scrollbar 等，这些我都没有使用，不发表意见。

xthsky commented

赞逸才的认真，会吸收一些到Brix Style里的。

cyjake commented

button 补充：

需要给各个 btn 设置 :active 和 :hover 的 border-color ，不然默认是蓝色的

zhj3618 commented

网站的一些新项目也开始引入brix，reset问题同样是我们最纠结的！因为头部是通用的，要兼容其它还没有使用brix的页面，所以使用brix的项目就同时会引入kissy的reset和brix的reset。然后头痛的就来了，两者不兼容。。。，然后我们只能自己在reset。

cyjake commented

@zhj3618 抛弃 KISSY 的 reset，改用 reset-patch 的方式就够了吧？这两者的差别没有那么大，很多 reset 也都是用不到的。

@xthsky 或许可以出一个两种方式的 diff，让使用者注意一下？

zhj3618 commented

@dotnil 如果我们已经整站替换到brix当然可以这样做，前面我已经说了，我们头部的kissy reset是全局统一引入的

xthsky commented

@zhj3618 页头现在的已经开始往Brix迁移了？我非常愿意参与 reset 这部分的改造，之前做过一个过渡方案的demo http://xthsky.github.com/test/ ，但没有考虑到这种情况。

现在看，应该是我低估了Brix Style给大家带来的迁移成本，十分抱歉。给我看看一淘页头最新的开发版吧，看看有没有更低代价的替换方案。

miaojing commented

一淘页头最新的开发版依赖最新的视觉规范，这个brix里面已经有一版了，但是页头视觉规范还要调整被暂停了

现在如果是全新的项目,如点评，引入brix style, 因为公共头尾还是依赖kissy reset，kissy reset和brix style的冲突有（ul ol dl dd h1-h6 form feildset lengend select label textarea等 ），现在的解决办法是在项目中用kissy reset覆盖brix style

如果局部使用brix,如分页用，同样存在kissy reset 和 brix style的并存的问题，这种情况也是在项目中用kissy reset覆盖brix style，覆盖不到的在项目中再重置。

这样实际还是使用kissy的reset，建议在没有在组件没有铺开使用之前，将brix style的normalize.css换成kissy的reset,这样做让要让第一期的组件重新回归下，工作量有点大，但是相比每个项目reset成本低

另外form.less（form feildset lengend select label textarea）里面的reset应该用class做选择器，现在这样的对老项目引入brix影响大

miaojing commented

@xthsky 个人期望brix style这样：）

  1. brix.css加入版本管理,方便各自升级而不影响老项目，brix style的全站引入方式可以和之前一样在tms中统一管理。
  2. brix.css尽可能小，以减少对全局的影响，将avatar、tag、scrollbar等控件移到gallery，像gallery一样按需加载
  3. brix style的normalize.css换成kissy的reset,降低老项目迁移成本，原因如楼上
cyjake commented

@miaojing 前两点我都赞同，第三点我不置可否哈

xthsky commented

Brix Style 已拆分，并做了KISSY Reset及向后兼容。