【工程化】千万不要忽视css编写方案的定制！选择好的编写方案越写越爽！！！

前言

在我任职工作中，发现基本很多前端项目工程都会忽视css编写方案的定制。导致后续随着项目的研发，功能越来越复杂后，css的编写渐渐力不从心，出现交叉污染，难以维护，功能不好拓展等问题。

这些应该都是在框架搭起来的时期就该考虑到的了，接下来我将结合我的工作经历和网上查阅的资源，总结一些心得，供参考。后续也会不断补充哦！

---

css选择器的命名规则

网上比较推崇的是一个叫BEM的命名规范，具体是啥可以看看下面的文章：

• 用了这些css命名小技巧，我的代码优雅了不少！
• 不会真有人不知道 BEM 规范?

这个我觉得要看个人或者团队的喜好了，比如我喜欢根据业务或者功能去命名。当然如果css隔离做的好的话，用这个也是挺美观的。

自己的团体其实可以自己定义规则，也不一定要遵从这个。

---

Vue的原生方案

关于Vue，我已经写了一篇文章讲了一些东西：【vue其他相关】理清scoped的表层原理，父子组件样式继承问题，深度选择器解决什么、以及CSS Modules等等

主要围绕的还是局部css的编写，其中CSS Modules方案具体实用性如何，我还没用过，有使用过的小伙伴可以评论下。

---

React的原生方案

关于React的我也总结了一篇：【react框架】一些关于样式写法的心得记录，例如怎么去写局部的css，以及容易忽略的svg的使用等等

同样围绕的也是局部css的编写，我个人是最推荐CSS Modules+className方案的，基本上就搞定了。

---

第三方库的使用

前面讲的都是在框架内写原生css的方案，其实还有很多第三方库提供了一些功能强大的编写方案。例如这几年非常流行的tailwindCss。

原子化的形式去写css，个人初步去使用了下，感觉挺好的，就是从陌生到熟悉有一定的过程，而且文档只翻译了一点点。

掘金上看到一个文章已经总结的很好了【从自身开发体验谈谈Tailwind CSS】

后面我又了解到了UnoCSS，真是苦恼啊，前端库选择困难症又来了，可以看看这篇文章：【UnoCSS给了我一个不用tailwindcss的理由】，哎可惜文档也是英文。

个人觉得后台管理项目就不需要用这种原子类型的css库了，除此之外都可以考虑下加入。目前我还没在公司真实的项目上实践这类库，好多认知只能看别人博客的总结。

---

有空的话可以多去看看css的新特性

其实啊，css每年都有更新，有很多东西实现起来比以前的“土方法”方便很多，只是我们平时忙于工作和生活，没去关注而已，渐渐的那些所谓的新特性也会变成老知识点了。

举个例子吧，我们要画一个三角形，我相信大多数人第一个想到的代码就是：

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

其实用这个clip-path属性就可以简单搞定了，这玩意也不新，应该是起码18年就有了。类似的还有去显示高色域属性的css函数-----color()。

---

善于用零代码工具帮忙写css

有些样式的编写其实不一定要我们亲力亲为去写，而且你自己的未必是最好的写法。

例如啊，你要写个波浪效果，或者某个卡片布局啥的，首先要百度搜索一个一个挨着看哪个最贴合需求，然后还要cv大法手动去调试。

这时候可以借助零代码工具帮忙写css，推荐一个我自己的网站：前端UI实用网站收藏合集

小伙伴要是也知道一些好的零代码工具网站也在评论区推荐下哈~

---

关于动画

前端应该对页面的动效有点追求，适当的给页面添加点动画会让页面更生动流畅一些，也不需要我们手动绞尽脑汁，直接引入合适的动画库使用即可。

前端UI实用网站收藏合集，我的网站也推荐了几个不错的动画库，可以参考下。