css整改之设计、问题与优化_scss嵌套太多-CSDN博客

本文链接：https://blog.csdn.net/qq_42434077/article/details/125244236

关于我们项目。vue + element-ui，样式写法是常规的css + scss。
这个月有个需求就是对一个页面的布局的重新开发（上下布局改成四叶草布局）。后续同模块下多个功能都会做相应调整。借此打算对整体的样式做一个优化。

样式问题一直都有，因为项目初始是另一个团队开发，中期两个团队一起，后期就我们团队再开发。还有参与写一两个需求就走的，前后参与人员较多。检查代码发现有很多问题，因项目保密，下面仅做一些描述、思路。

命名规范：开发中是没有立规范的，所有每个人都自由发挥。class命名各异。比如很多缩写，基本写完自己都不认识了。
css冲突：这个遇到过几次，因为我们是vue，vue组件下样式可作用全局和局部。不同组件下全局样式会出现冲突的。而我们又是按需加载。当我们访问一个模块后再访问新模块，两个样式都会加载，在访问之前模块可能会因为样式冲突，影响页面。
重复开发：比如一个文本内容超出显示**...**，很多模块都有。还有些对英文单独作用的样式，一个模块有多处。重复的代码块。
scss过度使用嵌套：scss可以嵌套，本来是很好的用法，但是过度嵌套，比如我们项目，打包好可以发现会出现**.a .b ... .g**，连续9到10个的都有。影响打包后文件的大小。对同元素新加样式也很难作用。
使用id选择器：影响优先级，如公共模块使用id，子模块其他class无法覆盖。
使用**!important**：很多就是写样式发现不作用，就直接使用**!important**，其他人开发新样式又无法作用。恶性循环。

完全避免还是很难，特别参与人数较多时。

主要还是要有个规范，每个开发开发时尽量遵循。
针对对css冲突、重复开发：新加样式时可以全局搜索下，看是否同名有影响。修改老样式时搜索是否有作用于别处。这些还是比较麻烦，我觉得最重要还是对项目多了解，相似功能可能出现冲突、重复。提前了解开发时就可以多测试、避免。
针对scss嵌套过度：主要避免过度嵌套。使用一些新的写法而不是单纯嵌套（后面会说）。
针对id选择器、!important：个人推荐不使用优先级太高的。后期开发有影响。

关于css的设计，有些OOCSS、SMACSS、BEM等。网上可以找到很多（如css设计模式）。我们使用element-ui这里举个例子

在这里插入图片描述

在这里插入图片描述

我们可以看到饿了么的下拉框组件el-select，组件类名el类似空间，select功能块。下拉框el-select-dropdown，包含el-select-dropdown__list，__list描述下拉列表。根据名字可以很容易和功能匹配。

在这里插入图片描述

可以看到el-select-dropdow还包含了el-scrollbar组件。可见功能命名分类清晰。

分析页面布局，对功能块有个大致分类。命名上采用块-描述_状态，如公共模块使用layout标识，layout-header、layout-header-title头部标题，header-button、header-button_hidden头部按钮不可见。等等
针对scss嵌套过多，这里我使用scss的**&**。如

.layout-header {
    &-title{
    }
    &_hidden{
        display: none;
    }
}

这样打包后layout-header-title和layout-header_hidden。减少过度嵌套。

团队项目还是要有规范，可以根据团队风格协调定义。并且每个人要一起去遵守，才能让样式更统一，页面的风格更一致。