踩过N次PHPCMS样式炸锅坑 手把手教你硬核清理冗余CSS

先唠唠：为啥PHPCMS的CSS是个长满杂草的后花园啊？

家人们！谁懂啊！当年刚入行接的第一个独立站活就是老板甩过来的祖传PHPCMS站，说：“小X，这站加载慢得像蜗牛爬乌龟壳，你给整整，特别是后台加前台那一堆堆花花绿绿的代码！”

我抱着电脑啃了三天三夜，差点给整emo了——好家伙！祖传的东西果然不一样，CSS文件夹里的文件数比我工位桌上的零食还多！有v9自带的，有换模板塞的旧模板碎片，有前两任开发小哥各自造的“轮子零件”，甚至还有不知道从哪个demo站扒下来、连注释都是乱码火星文的玩意儿！这不就是个没人管的后花园嘛？原生的牡丹芍药占着C位，野菊花狗尾巴草到处疯长，还有半根埋在土里烂掉的葱（就是那堆完全没用的火星文注释和没引用的class）！关键是，老板只给了我一天整完，差点哭晕在茶水间泡枸杞菊花茶的地方！

不过还好，后来摸爬滚打踩过无数次PHPCMS样式炸锅的坑，终于总结出一套硬核又不费头发的清理冗余CSS土办法，今天就无偿share给家人们！过来人的经验，靠谱得很，看完保证你再也不用被祖传PHPCMS站的冗余CSS气到砸键盘！

第一步：先把祖传文件备份三遍！备份三遍！备份三遍！

重要的事情说三遍！不管你是用宝塔面板的压缩功能，还是直接拖到本地D盘新建个“祖传PHPCMS站备份202X.X.X千万别删”的文件夹，哪怕你嫌麻烦只备份了CSS文件夹，也比裸奔操作强一万倍！

当年我年轻不懂事，第一次碰这种祖传站，上来就删删删，结果前台首页的导航栏直接塌成了散架的乐高积木，后台添加文章的编辑框按钮全消失不见！老板差点扣我半个月的全勤奖买服务器恢复数据！还好我本地偷偷留了份刚接手的压缩包（没错，就是偷偷留的，这是过来人留下的保命小技巧），才没酿成大祸！

所以家人们，清理冗余CSS之前，备份备份备份，哪怕你手抖删错了，也能一键复原，就像给你的后花园买了份全额保险，刮风下雨都不怕！

第二步：拔掉那些明摆着的“烂葱”——完全没用的CSS文件

刚才说了，祖传PHPCMS站的CSS文件夹里有很多完全没用的“烂葱”，比如换模板时留下的旧模板碎片文件、不知道什么时候删掉的功能对应CSS文件、前两任开发小哥测试时随便建的“测试1.css”“测试2.css”甚至“超级无敌测试终极版.css”！

怎么找这些“烂葱”呢？

你得搞清楚现在的PHPCMS站到底在用哪些CSS文件！别慌，过来人给你两个靠谱的工具：

• 第一个是浏览器自带的F12开发者工具！打开F12，点击“网络（Network）”标签，刷新一下前台首页、后台登录页、后台添加文章页、产品详情页这些常用页面，把类型（Type）筛选成CSS，把那些出现的CSS文件名记下来！
• 第二个是宝塔面板里的“文件搜索”功能！如果你记不住或者嫌麻烦，直接在宝塔面板搜索所有的HTML、PHP文件（因为PHPCMS是用PHP写的，模板文件一般是.htm或者.html，放在template文件夹里），搜索关键词比如“

然后把这两份名单对比一下，取交集！交集之外的CSS文件，不管它名字有多酷炫，不管它注释有多感人（哪怕前前任开发小哥留了“帮下任开发小哥减轻负担”的屁话，屁话，屁话！帮下任还留这么多没用的！），全部毫不犹豫地删掉删掉删掉！

对了，还有一个小技巧：PHPCMS v9自带的CSS文件，比如default文件夹里的，如果现在用的不是默认模板，大部分都是没用的，可以大胆删掉，只留几个系统核心必要的就行，比如后台登录页的login.css，一般情况下还是留着比较稳妥，万一哪天老板想换回默认模板呢？（不过这种概率和中五百万彩票差不多）

第三步：剪掉那些“多余的狗尾巴草”——单文件里的冗余CSS代码

拔掉明摆着的“烂葱”之后，接下来就要修剪单文件里的“多余的狗尾巴草”了！单文件里的冗余CSS代码一般有两种：一种是完全没引用的class或者id，另一种是重复写了好几次的相同样式！

先唠唠完全没引用的class或者id怎么找！刚才说的浏览器F12开发者工具其实也能用，但太麻烦了，刷新一百个页面也可能漏！过来人给你推荐两个神器，都是免费的，靠谱得很：

• 第一个是Chrome浏览器的插件叫Unused CSS！这个插件超级无敌好用，直接在Chrome浏览器里打开网站，点击插件图标，它会自动扫描整个网站，找出所有没引用的class、id、标签选择器，还给你标红！标红！标红！不过要注意，扫描的时候要把所有常用页面都打开（比如前台首页、列表页、详情页、后台登录页、后台添加文章页、后台修改文章页等等），不然可能会误删有用的代码！
• 第二个是在线工具叫PurgeCSS！这个工具也很牛，你可以直接上传你的CSS文件和HTML/PHP文件（模板文件），它会自动对比，生成一份清理后的CSS文件！不过在线工具可能会有数据泄露的风险（虽然概率很小很小很小），如果你的网站是商业站，建议还是用Unused CSS插件，安全一点！

找到完全没引用的class或者id之后，全部毫不犹豫地删掉删掉删掉！

再唠唠重复写了好几次的相同样式怎么找！这个就简单多了，直接用编辑器（比如VS Code、Sublime Text）的“查找替换”或者“查找重复项”功能就行！比如你发现“.btn-primary”这个按钮样式在同一个CSS文件里写了三次，而且样式完全一样，那你就保留第一次写的，把后面两次全部删掉！

对了，还有一个土味正能量的小建议：修剪完“多余的狗尾巴草”之后，记得给CSS文件做个小整理，比如把相同类型的样式放在一起（比如把导航栏的样式放在一起，把按钮的样式放在一起，把字体的样式放在一起），再给它们加个简单的注释（别再加火星文了，别再加前前任开发小哥的屁话了，就加个“/ 导航栏样式 /”“/ 按钮样式 /”就行），这样下次再修改的时候，就不用像在狗尾巴草里找牡丹芍药一样费劲了！土味正能量从我做起，整理代码，从现在开始！

第四步：给你的“后花园”施点肥——压缩清理后的CSS文件

拔掉“烂葱”、剪掉“狗尾巴草”之后，你的“后花园”已经清爽很多了，但还可以再优化一下！比如给你的CSS文件施点肥——压缩一下！压缩后的CSS文件体积会变小，网站加载速度会更快，就像给你的后花园浇了营养液，牡丹芍药开得更艳了！

压缩CSS文件的工具也有很多，都是免费的：

• 第一个是编辑器自带的插件，比如VS Code里的Minify CSS插件，Sublime Text里的CSS Sublime插件，直接一键压缩就行！
• 第二个是在线工具，比如刚才说的PurgeCSS，它在生成清理后的CSS文件时，也可以选择压缩！还有腾讯云的COS图片压缩CSS压缩工具，阿里云的OSS图片压缩CSS压缩工具，都很靠谱！

压缩完之后，记得把原来的CSS文件重命名一下（比如原来叫style.css，重命名成style_old.css），把压缩后的CSS文件重命名成原来的名字，然后再刷新一下网站，看看有没有问题！如果没问题，那就可以把style_old.css删掉了！

最后总结一下：PHPCMS冗余样式清理三步曲

家人们！今天的分享就到这里啦！总结一下就是PHPCMS冗余样式清理三步曲：

• 第一步：备份备份备份！保命小技巧！
• 第二步：拔掉明摆着的“烂葱”——完全没用的CSS文件！
• 第三步：剪掉“多余的狗尾巴草”——单文件里的冗余CSS代码！
• 第四步：给你的“后花园”施点肥——压缩清理后的CSS文件！

怎么样？是不是超级无敌简单？是不是土味正能量满满？是不是像过来人跟你聊天一样？过来人的经验，靠谱得很，看完保证你再也不用被祖传PHPCMS站的冗余CSS气到砸键盘！

家人们，如果觉得这篇文章对你有帮助，记得点赞收藏转发哦！如果还有什么不懂的地方，欢迎在评论区留言，我会一一回复的！土味正能量从我做起，PHPCMS冗余样式清理，从现在开始！加油加油加油！奥利给！