Ques核心思想——CSS Namespace

  • 时间:
  • 浏览:0

Ques核心思想——CSS Namespace

2015-04-07 00:500  Justany_WhiteSnow  阅读(...)  评论()  编辑  收藏

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>

这就很好地为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,
        

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

当我们 的方案

当我们 期望用相似Web Component的依据去写Component的样式,但在低端浏览器根本就不支持Shadow DOM,统统,当我们 基于BEM来搭建了本身CSS Namespace的方案。

当我们 的Component由下面十个 文件组成:

  • 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.htmlmain.js中的对应挑选器,在构建中也会自动替换成Component名。

这哪些好处呢?

  1. 基于路径的Namespace,路径如此 冲突,如此 在该项目中Namespace很久会冲突
  2. Component还要能 任意改名,或克隆技术重构,无需产生任何影响,便于Component的重构和扩展
  3. Component相对隔离,无需对内部内部结构产生影响
  4. Component非绝对隔离,内部内部结构还要能 对其产生一定影响
  • 分类 Javascript
  •