css性能优化
css选择器优化
如果可以直接选中元素，不需要加一些多余的修饰
我要评论 /*不要使用类选择器和id选择器修饰元素标签，这样多此一举，还会降低效率。*/
div#slider.slider {
}
一般来说，class用于样式，id用于js，因为id定义的样式不利于复用
保证不会误选的情况下，尽量保持简单
避免冲突可以在命名时区分好
/*保持简单，不要使用嵌套过多过于复杂的选择器*/
/*浏览器从右向左解析css*/
/*.slider .slider-item-container .slider-item .slider-link .slider-img {
width: 100%;
}*/
.alex-slider-img {
/*嵌套少*/
/*权重低 便于使用的时候覆盖*/
width: 100%;
}
尽量少用通配符选择器，可以单独写出来，罗列出来
/*避免通配选择器*/
* {
}
ul, li, dl, dt, dd, p {
padding: 0;
margin: 0;
}
不必要的样式和没有用到的样式直接删除即可
/*移除无匹配的样式*/
.slider {
/*width: 100%;*/
}
高级选择器少用（类似正则的），还有属性选择器，性能并不高
但是必须的情况下可少量使用
/*避免类正则的属性选择器*/
[class*="slider-indicator"] {
}
[class~="slider-indicator"] {
/*空格分隔*/
}
[class^="slider-indicator"] {
}
[class$="slider-indicator"] {
}
css属性优化：
不同类里存在相同样式可以提取出来一起写，减少冗余
而且方便统一修改
/*提取公用部分*/
.slider,
.slider-item-container {
width: 100%;
height: 100%;
}
合并一些可以合并的元素
上右下左
适当使用简写
/*合写*/
.slider {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
margin: 10px 20px 10px 20px;
margin: 10px 20px;
margin: 10px 20px 10px;
background-color: #fff;
font-size: 12px;
font: ;
}
其他优化：
不建议使用css @import引用加载css（scss里没关系）
做动画时优先使用css3动画，其次再考虑js动画
移动端优先考虑flex布局，少用float
如对本文有疑问， 点击进行留言回复！！
2020培训0706-0708【web入门】笔记「三」CSS专题整理
网友评论