Ques 核心思想——CSSNamespace

In 未分类 on 2015年04月06日 by TAT.donaldyang view: 693

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>

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 名。

这有什么好处呢？

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

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2015/04/ques%e6%a0%b8%e5%bf%83%e6%80%9d%e6%83%b3-cssnamespace/

分享到:

AlloyTeam

AlloyTeam

同行们是怎么解决的？

我们的方案

发表评论