CSS组件化解决方案：OOCSS+BEM
时间：2023-03-30 16:25:44
CSS
CSS由于没有命名空间，所有的类都是全局的，所以如果一个大的团队项目没有一个好的命名规范，很容易失控。例如实现如下效果：通过class+tag.pageButtons{display:flex;证明内容：居中；}.pageButtons按钮{宽度：80px；高度：30px；边距：5px；边界半径：4px；边框：无；字体大小：13px；游标：指针；大纲：无；}.primary-button{颜色：白色；背景色：rgba(200,0,0,.9)；过渡：背景色1s，字体粗细1s；}.primary-button:hover{字体粗细：700；背景色：rgba(255,0,0,1)；Next
想象一下嵌入这个页面（或使它成为一个组件）到另一个页面中，并且还用button标签定义了按钮的样式，这将导致出现意想不到的按钮样式。所以尽量避免标签定义样式。还有一个问题就是.primary-button好像是一个普通的类，可能定义在别处，维护起来会比较困难。使用OOCSS+BEM实现OOCSS就是通过选择器重用CSS类。BEM全称Block-name__element--modifier。.pageButtons{显示：flex;证明内容：居中；}.pageButtons__prev,.pageButtons__next,.pageButtons__next--primary{width:80px;高度：30px；边距：5px；边界半径：4px；边框：无；字体大小：13px；游标：指针；大纲：无；}.pageButtons__next--primary{颜色：白色；背景色：rgba(200,0,0,.9)；过渡：背景色1s，字体粗细1s；}.pageButtons__next--primary:hover{font-weight:700;背景色：rgba(255,0,0,1)；
上一个下一个Next 相比于之前的方案，BEM的命名更加冗长，但这是保证CSS类名不会重复的方式，是核心思想BEM.如果你通过OOSCSS使用SASS写：%button{width:80px;height:30px;margin:5px;border-radius:4px;border:none;font-size:13px;cursor:pointer;outline:none;}%primaryState{color:white;background-color:rgba(200,0,0,.9);transition:background-color1s,font-weight1s;}%hoverState{font-weight:700;background-color:rgba(255,0,0,1);}.pageButtons{display:flex;justify-content:center;&__prev,&__next,&__next--primary{@extend%button;}&__next--primary{@extend%primaryState;}&__next--primary:hover{@extend%hoverState;}}这里稍微提一下%placeHolder和@mixin，如果不需要传入参数，使用%placeHoder，这样可以复用带选择器的类.与@mixin复制代码相比，减少了代码量。
