Ques核心思想——CSS Namespace

  • 时间:
  • 浏览:0
  • 来源:大发时时彩官网_哪里可以玩大发时时彩_大发时时彩在哪里玩

Ques核心思想——CSS Namespace

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