est 构想的讨论

[Justineo]

定位

作为一个样式的解决方案，est 需要提供的主要是可以复用的样式以及屏蔽浏览器兼容性的差异。落实到使用上，我考虑到主要有两种方式：

1. 使用预定义的 className 作为接口，用户在书写 HTML 代码时直接通过调用相应的 className 就可以完成样式的设定，例如：

   <!-- Bootstrap -->
   <button class="btn btn-large" type="button">Large button</button>

   这种方式的主要特点是“脏”且快速，首次书写可能会比较爽快（仅写 HTML 就可以完成大部分的工作），适合用于快速搭建站点或原型系统。但是语义正确性较差，HTML 和样式有耦合，容易在同一个元素上写多个和样式相关的 className。Bootstrap 采取的更接近于这种方式。

2. 接口更低层次一些，使用 mixin 作为接口，用户在书写 HTML 代码时根据内容的含义书写语义正确的 className，并在样式中通过调用 mixin 的形式来设定样式，例如：

   HTML:

   <button class="accept-button" type="button">Accept</button>

   LESS:

   
   .large-button() {
      .size(120px, 30px);
      .linear-gradient(top, #FFF, #CCC);
      .border-radius(30px);
   }
   
   .accept-button {
      .large-button();
   }

   这种方式更为清晰、HTML 和样式的耦合很小，但是必须书写一些额外的 LESS 代码来将语义 className 和 est 提供的 mixin 挂钩，定位更偏向一个较底层的类库，方便开发人员书写 LESS 代码，而非直接拿来用的样式集合（定位类似 nib）。

我个人比较倾向于第二种定位。

模块划分

基于上面的定位 2，我初步划分如下，希望大家补充或修订：

• normalize

  样式的归一化，屏蔽浏览器默认样式差异，提供基本的可用性

• layout

  布局相关支持，grid、fluid 等等

• compatibility

  提供用来解决兼容性问题的方法

• typography

  文字排印相关

• effect

  color / background / transform / transition / animation 等相关

• util

  各个模块可以共用的一些工具方法

  代码组织

每个模块一个.less文件，发布时 concat 到一起。使用时通过@import 'est.less'引入。

浏览器支持

待讨论

---

希望大家一起讨论一下，也考虑一下自己感兴趣研究的方向。

[zmmbreeze]

同样比较倾向于第二种定位。不过可以默认提供一个直接可用的版本（文件分离），这样如果项目对命名规范没有特殊要求或者是制作demo展示页的情况下可以用到。可以以est-前缀加mixin名称的命名方式。

觉得有必要加上浏览器分级，例如有些IE6的hack不需要用在锦囊里面，又有些hack或样式不需要用在微购移动版里面，毕竟移动浏览器的网速这么慢，能减少些大小是一点。

[chriswong]

第二种生成的代码，会不会显得太臃肿......除非用stylus

[Justineo]

@chriswong Stylus 用 mixin 的方式生成出来的代码和 LESS 是一样的效果啊。

Stylus:

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

.button
  border-radius 3px

.link
  border-radius 2px

stylus -c以后，得到：

.button{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.link{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}

LESS:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.button {
  .border-radius(3px);
}

.link {
  .border-radius(2px);
}

lessc -x以后，得到：

.button{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.link{-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}

mixin 效果是一样的，区别是在继承的时候，LESS 也是用 mixin 的方式，但我感觉其实 gzip 之后没有什么区别的。

[errorrik]

我也赞同第二种定位

[errorrik]

还有，我觉得，对于我们系统用到的经典布局，html结构和classname还是应该基于定位2,固化下来