leozdgao

@icepy 用 Babel 转 es6 的模块语法的话，就是这个结果吧

@icepy 你应该自己试一下 babel 的repl http://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=function%20Check%20()%20%7B%0A%20%20%0A%20%20%0A%7D%0A%0Aexport%20default%20Check

@icepy 好吧，我应该明白你的意思了，之前是我会错意了。 由于之前遇到过类似的坑，不清楚有没有改变 Babel 编译结果的可能，我目前统一使用 commonjs 的模块导出语法。由于我清楚 `import ... from ...` 的编译结果，所以有的时候为了方便我模块导入语法用的时 ES6 的语法。

@sodatea 感谢分享 :+1:

@riskers @zpbx 感觉重点其实不是放不放在一起，而是在一起之后，如何再作为一个模块引入，之前对这方面也比较纠结，目前还是很依赖 webpack 之类的 bundle 工具。

@SASUKE40 @riskers 看了下[荔枝FM的首页](http://m.lizhi.fm/)，发现它并没有做 viewport 缩放，只是固定了布局视口的大小，和第二种方式的描述似乎不太一样。在 chrome 的模拟器中还出现了 font boosting 的现象。 ``` ``` 我的理解是： - 缩放 viewport 的目的主要是解决1像素问题，淘宝的 lib-flexible 中是直接把安卓设备全部当作 `dpr=1` 来处理（也就是 `initial-scale=1.0`），因为用了根元素字体是根据布局视口大小动态设置的，使用了 rem 作单位的元素总能适配。 - 单独使用第二种方法的话，只用 px 感觉没有用 rem 的方法灵活。...

@riskers 额... 🤔 #15 在我的场景，用 contain 模式还是比较适合的。 另外在模拟器上有 Font Boosting，在真机上打开又是正常的，很奇怪。

@riskers Font Boosting 是在看荔枝FM主页的时候发现的，在模拟器上看有（用 `max-height` 验证的），真机上打开就没有了... 这个先不管了... 从网易压缩了的代码里挖出来了 viewport 的逻辑： ``` var b = window.innerWidth || a, c = window.outerHeight || b, // 这句可能是它们写错了 d = window.screen.width || b, e...

对负 margin 应用在 float 元素上有点不太明白，圣杯布局的 fiddle: https://jsfiddle.net/leozdgao/kudwotoo/ 想不明白为什么 left 元素设置 `margin-left: -100%` 可以浮动到上一行，感觉它应该是偏移出屏幕吧...

我的理解是这样，首先比较赞同利用 Sass 以达到代码复用的目的。另外上面的例子里的 `button.scss` 应属于页面的组件层样式，这边没有问题，但是面临页面逻辑层的需求： > 哪天产品要求第一个按钮要左排第二个要右排的时候 两种方式： - 可以利用 CSS 层叠及选择器权值来设置样式（可能会提高维护成本） - 添加描述表现的类（违背语义） 自己更倾向于面向语义的方式，感觉如果 CSS 分层清晰，命名科学（BEM等）的话，感觉 scoped 方案，比如 CSS Modules 可能不是很有必要，感觉更多是出于组件内聚的考虑，但它生成的 class 并不满足语义。 不过个人开发还好，如果是团队开发的话，可能很难保证面向语义，感觉不是自己能控制的。 恩，随便胡扯了几句 :smiling_imp: ，然后想问下： > OOCSS...