Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

不使用 CSS class 的尝试

  以前我常常为 CSS 中的 class 命名而发愁,因为以前没有遵循什么命名规范,经常出现命名冲突的问题。后来我搞了一套「模块化的 CSS 命名规则」后才逐渐摆脱命名冲突的问题。但新的问题又来了,模块化之后的 class 名总是会很长,在 HTML 中写起来不方便。
  当初解决 CSS 命名冲突的问题并不是因为搞出了一套命名规范(很多命名规范完全没有解决命名冲突的问题),而是引入了「组件化」的概念。所以,组件化才是解决 CSS 命名冲突的关键。之前用 Polymer 做的项目由于是基于 Shadow DOM,所以本身也不存在 CSS 命名冲突的问题。而最近在使用 React 做项目时就遇到问题了。
  其实 React 和 Polymer 的思想是类似的,都是组件化。只是 Polymer 借助了浏览器特性使组件化变得更加彻底了而已。React 的问题就在于 —— 如何更好地处理 CSS?
  最近好像 css-modules 比较火?虽然我没细看,但就我目前了解的程度看来,它只是提供了 CSS 的模块化,相当于把「模块化的 CSS 命名规则」给融入开发中了。比起单纯地使用一份命名规范来约束开发,这个做法确实更给力也更方便。但它没有解决我的问题,如何在 React 中更友好地使用 CSS?
  React 本身就是基于组件,我们不需要另外搞一套组件机制进来(突然感觉 css-modules 和 Angular 挺配的)。所以核心问题是将 CSS 以 React 组件的粒度隔离开来。最终要实现的是 Polymer 那样美好的开发模式,而又不像 Polymer 一样依赖于一堆不靠谱的浏览器特性。
  我觉得勉强实现 style scope 还是可以的,要实现 Polymer 那种 Shadow DOM 程度的隔离就难了。但是 style scope 的程度就确实可以解决很多问题了,甚至可以让一个项目完全不使用 CSS 的 class。下面是一个 React 的例子,虽然满满的都是黑魔法。。。 <base href="http://share.web-tinker.com" />
<script src="/bower_components/react/react.js"></script>
<script src="/bower_components/react/JSXTransformer.js"></script>
<script type="text/jsx">
'use strict';
class Css {
  render() {
    var root = this._reactInternalInstance;
    var rootId = root._rootNodeID;
    var parentId = rootId.replace(/\.[^.]*$/, '');
    var selector = `[data-reactid="${parentId}"]`;
    var raw = this.props.children + '';
    var cssText = raw.replace(/:scope/g, selector);
    var dangerousSource = { __html: cssText };
    return <style dangerouslySetInnerHTML={dangerousSource}></style>;
  }  
};
onload = function() {
  React.render(<div>
    <div>
      <Css>{`
        :scope { color: red; }
      `}</Css>
      red
    </div>
    <div>
      <Css>{`
        :scope { color: green; }
      `}</Css>
      green
    </div>
  </div>, document.body);
};
</script>
  上面的实现还比较恶心,由于大括号在 jsx 中是特殊字符,所以只能在外面加一个 js 字符串来包裹。这个恶心的东西可以通过预处理来解决掉,而且预处理还可以加入 sass 或 stylus 之类的东西 。但这终究是一堆黑魔法堆出来的,我只是觉得可以这么玩而已。目前也不是一个成熟的方法,不推荐大家尝试(让我自己先找个项目踩踩坑吧)。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^