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,
// 如果压下按钮,mixin压下的style
this.props.isDepressed && this.styles.depressed,
this.props.style
)}>{this.props.children}</button>
);
}
});

几乎等同于脱离了css,直接利用javascript来实现样式依赖、继承、混入、变量等问题……当然如果我们去看看React-nativecss-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.htmlmain.js中的对应选择器,在构建中也会自动替换成Component名。

这有什么好处呢?

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

Ques核心思想——CSS Namespace的更多相关文章

  1. hadoop的核心思想

    hadoop的核心思想 1.1.1. hadoop的核心思想 Hadoop包括两大核心,分布式存储系统和分布式计算系统. 1.1.1.1. 分布式存储 为什么数据需要存储在分布式的系统中哪,难道单一的 ...

  2. hadoop的核心思想【转】

    [转自]:http://www.superwu.cn/2014/01/10/963/ 1.1.1. hadoop的核心思想 Hadoop包括两大核心,分布式存储系统和分布式计算系统. 1.1.1.1. ...

  3. jQuery的核心思想

    jQuery?----www.jQuery.com jQuery的理念:write less, do more jQuery的成就:世界排名前100的公司,46%都在使用jQuery,远远超过其他库, ...

  4. 浅谈Vue.js2.0核心思想

    Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动.组件系统. 数据驱动: Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProper ...

  5. 《深入理解Spark:核心思想与源码分析》——SparkContext的初始化(叔篇)——TaskScheduler的启动

    <深入理解Spark:核心思想与源码分析>一书前言的内容请看链接<深入理解SPARK:核心思想与源码分析>一书正式出版上市 <深入理解Spark:核心思想与源码分析> ...

  6. 《深入理解Spark:核心思想与源码分析》(前言及第1章)

    自己牺牲了7个月的周末和下班空闲时间,通过研究Spark源码和原理,总结整理的<深入理解Spark:核心思想与源码分析>一书现在已经正式出版上市,目前亚马逊.京东.当当.天猫等网站均有销售 ...

  7. 《深入理解Spark:核心思想与源码分析》(第2章)

    <深入理解Spark:核心思想与源码分析>一书前言的内容请看链接<深入理解SPARK:核心思想与源码分析>一书正式出版上市 <深入理解Spark:核心思想与源码分析> ...

  8. 《深入理解Spark:核心思想与源码分析》一书正式出版上市

    自己牺牲了7个月的周末和下班空闲时间,通过研究Spark源码和原理,总结整理的<深入理解Spark:核心思想与源码分析>一书现在已经正式出版上市,目前亚马逊.京东.当当.天猫等网站均有销售 ...

  9. 《深入理解Spark:核心思想与源码分析》正式出版上市

    自己牺牲了7个月的周末和下班空闲时间,通过研究Spark源码和原理,总结整理的<深入理解Spark:核心思想与源码分析>一书现在已经正式出版上市,目前亚马逊.京东.当当.天猫等网站均有销售 ...

随机推荐

  1. lua 入门学习

    -- 1.Hello world print( "--------------1--------------") print("Hello world"); - ...

  2. C++中类的前向声明的用法

    原创文章,未经博主允许禁止转载. C++的类可以进行前向声明.但是,仅仅进行前向声明而没有定义的类是不完整的,这样的类,只能用于定义指针.引用.以及用于函数形参的指针和引用.而不能定义对象(因为此时编 ...

  3. JS JQuery初始化

    (function($) {})(jQuery); 这种写法,申明一个匿名函数并立即调用 $(document).ready(function(){}); 文档全部加载完再执行 等同于$(functi ...

  4. Zabbix3.0+CentOS7.0+MariaDB5.5监视服务器安装

    本次安装采用: Centos7.0 Zabbix3.0 MariaDB5.5 -------------------  2012/12/2更新 最新的Centos7.1或者Redhat7.1版本在最后 ...

  5. Request Tracker 4.0.13 发布

    Request Tracker 4.0.13 修复了几个重要的安全问题. Request Tracker,企业级的问题跟踪系统

  6. 跟我一起学WCF(6)——深入解析服务契约[下篇]

    一.引言 在上一篇博文中,我们分析了如何在WCF中实现操作重载,其主要实现要点是服务端通过ServiceContract的Name属性来为操作定义一个别名来使操作名不一样,而在客户端是通过重写客户端代 ...

  7. mongo(五)副本集

    mongo(五)副本集 配置文件 1-3为三个存储节点,其实一个为Primary,两个secondary作为备份,4为仲裁节点 # mongod.conf #where to log logpath= ...

  8. [MFC] 从文件读取与向文件添加数据

    CString str,str2,str3;str2="dsf",str3="dsfds"; CStdioFile myFile, File; if(myFil ...

  9. servlet web文件上传

    web文件上传也是一种POST方式,特别之处在于,需设置FORM的enctype属性为multipart/form-data. 并且需要使用文件域. servlet的代码比较关键是这几句: // 使用 ...

  10. paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

    paip.提升效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----An ...