css没有语言的进化;
css的问题
-
类名冲突的问题:
-
层级过深不好阅读,
-
层级过浅容易出现类名冲突;
-
重复样式的问题:(样式的复用)eg: 主题颜色 #f40 应用在整个项目中的多个地方,一旦主题色更改,那么就需要更改多处,这将会是一个很大的工程
-
文件细分的问题:js文件需要细分,同样css文件也要细分,eg:轮播图样式只对应轮播图功能,公共样式可以单独抽离;同时,在真实的运行环境下,希望文件越少越好;
如何解决
解决命名冲突(提供以下几种方法)
-
按照命名规范进行命名,避免冲突,有以下几种命名标准:
-
BEM
-
OOCSS
-
AMCSS
-
SMACSS
-
css in js 在js中书写css,将样式写到style标签中,不提倡;
-
css module
解决重复样式的问题
- css in js 缺点是太过于灵活,他的书写习惯并不能让大多数开发者适应。
- 预编译器: (一些三方通过编制一套新的css语法)支持变量,函数等高级语法,经过编译器将其编译为正常的css。例如less sass
解决css文件细分的问题
依靠构建工具webpack来解决,对css代码进行拆分;webpack本身只能读取css代码,但是他不能进行分析,因为他只能当作js代码进行分析;
css-loader
将css代码转化为js代码,将所有的css代码转为字符串导出;
require('./assets/banner.css')
// banner.css
.red{
color:"#f40";
background:url("./bg.png")
}
// 经过css-loader 转化后变为
var import1 = require("./bg.png");
module.exports = `.red{
color:"#f40";
background:url("${import1}")
}`;// 经过webpack编译之后变为
var import1 = __webpack_require__("./src/bg.png");
module.exports = `.red{
color:"#f40";
background:url("${import1}")
}`;
// webpack.config.js
module.exports = {
module:{
rules:[
{test:/\.css$/, use:['style-loader', 'css-loader']},
{test:/\.png$/, use:'file-loader'},
]
}
}
style-loader
将css-loader 转换后的代码进一步处理,当css-loader导出的字符串加入到页面的style元素中
.red{
color:"#f40";
}
经过css-loader 转化后的js代码
module.exports = `.red{
color:"#f40";
}`
经过style-loader转化后
module.exports = `.red{
color:"#f40";
}`
var style = module.exports;
var styleElem = document.createElement("style");
styleElem.innerHTML = style;
document.head.appendChild(styleElem);
module.exports = {}