代码改变世界

Ques核心思想——CSS Namespace

2015-04-07 00:30  Justany_WhiteSnow  阅读(752)  评论(0)  编辑  收藏  举报

Facebook’s challenges are applicable to any very complex websites with many developers. Or any situation where CSS is bundled into multiple files and loaded asynchronously, and often loaded lazily. ——@vjeux 将Facebook换成Tencent同样适用。

同行们是怎么解决的？

  • Shadow DOM Style

Shadow DOM的样式是完全隔离的，这就意味着即使你在主文档中有一个针对全部 <h3> 标签的样式选择器，这个样式也不会不经你的允许便影响到 shadow DOM 的元素。

举个例子：

举个栗子

<body>  
  <style>
    button {
      font-size: 18px;
      font-family: '华文行楷';
    }
  </style>
  <button>我是一个普通的按钮</button>
  <div></div>

  <script>
    var host = document.querySelector('div');
    var root = host.createShadowRoot();
    root.innerHTML = '<style>button { font-size: 24px; color: blue; } </style>' +
                     '<button>我是一个影子按钮</button>'
  </script>
</body>

Nacespace

这就很好地为Web Component建立了CSS Namespace机制。

  • Facebook: CSS in JS

http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html

比较变态的想法，干脆直接不要用classname，直接用style，然后利用js来写每个元素的style……

例如，如果要写一个类似button:hover的样式，需要写成这样子：

var Button = React.createClass({
  styles: {
    container: {
      fontSize: '13px',
      backgroundColor: 'rgb(233, 234, 237)',
      border: '1px solid #cdced0',
      borderRadius: 2,
      boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)',
      padding: '0 8px',
      margin: 2,
      lineHeight: '23px'
    },
    depressed: {
      backgroundColor: '#4e69a2',
      borderColor: '#1A356E',
      color: '#FFF'
    },
  },
  propTypes: {
    isDepressed: React.PropTypes.bool,
    style: React.PropTypes.object,
  },
  render: function() {
    return (
      <button style={m(
        this.styles.container,
        // 如果压下按钮，mixin压下的style
        this.props.isDepressed && this.styles.depressed,
        this.props.style
      )}>{this.props.children}</button>
    );
  }
});

几乎等同于脱离了css，直接利用javascript来实现样式依赖、继承、混入、变量等问题……当然如果我们去看看React-native和css-layout，就可以发现，如果想通过React打通客户端开发，style几乎成了必选方案。

我们的方案

我们期望用类似Web Component的方式去写Component的样式，但在低端浏览器根本就不支持Shadow DOM，所以，我们基于BEM来搭建了一种CSS Namespace的方案。

我们的Component由下面3个文件组成：

  • main.html 结构
  • main.js 逻辑
  • main.css 样式

可参考：https://github.com/miniflycn/Ques/tree/master/src/components/qtree

可以发现我们的css是这么写的：

.$__title {
    margin: 0 auto;
    font-size: 14px;
    cursor: default;
    padding-left: 10px;
    -webkit-user-select: none;
}
/** 太长忽略 **/

这里面有长得很奇怪的.$__前缀，该前缀是我们的占位符，构建系统会自动将其替换成Component名，例如，该Component为qtree，所以生成结果是：

.qtree__title {
    margin: 0 auto;
    font-size: 14px;
    cursor: default;
    padding-left: 10px;
    -webkit-user-select: none;
}
/** 太长忽略 **/

同样道理，在main.html和main.js中的对应选择器，在构建中也会自动替换成Component名。

这有什么好处呢？

  1. 基于路径的Namespace，路径没有冲突，那么在该项目中Namespace也不会冲突
  2. Component可以任意改名，或复制重构，不会产生任何影响，便于Component的重构和扩展
  3. Component相对隔离，不会对外部产生影响
  4. Component非绝对隔离，外部可以对其产生一定影响