【css模块化思考】

[kind-hearted]

在大型的web应用里面，随着样式的越写越多，很容易出现相同的选择器，造成样式污染，所以需要进行模块化。

源码css.css

.class-name {
}

vue的单文件组件使用scope进行模块化
编译css

.class-name[data-v-de37886c] {
}

runtime.js会执行一下代码，将这个自定义属性附加到元素上

node.setAttribute('data-v-de37886c', '')

<div data-v-de37886c class="class-name"></div>

在编译时，选择器加上一个自定义属性，在html渲染时，元素设置自定义属性。

css-modules进行模块化

编译css

._13LGdX8RMStbBE9w-t0gZ1 {
}

import css from 'css.css'

var className = css['class-name']  //_13LGdX8RMStbBE9w-t0gZ1

<div className={className}></div>

<div class="_13LGdX8RMStbBE9w-t0gZ1"></div>

在编译时，将样式名编译成一个唯一的值，整个css文件作为一个js模块导出，可以通过原来的class-name访问到编译后的值。

从使用方式上来说，vue的scope更方便使用。另外vue scopeId与整个单文件组件的代码有关，而css-modules的样式名不与引用其的模块有关，只取决与自身。是否可以结合以上两种方式？

编译css

.class-name[data-v-de37886c] {
}

import css from 'css.css'

var scopeId = css.scopeId  //data-v-de37886c
//在渲染时，遍历所有后代，添加这个自定义属性，这个方法可以全局混入组件的生命周期内执行
while(node){
  node.setAttribute(scopeId, '')
}

在编译时，加上一个自定义属性，模块导出该属性，在html渲染时，将这个添加到元素上面去，