Ques核心思想——CSS Namespace

  • 时间:
  • 浏览:0
  • 来源:十分时时彩_十分时时彩平台网址_十分时时彩网投平台

Ques核心思想——CSS Namespace

2015-04-07 00:200  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
  •