关于css命名的一些思考，讨论css命名空间的可行性
时间：2023-03-31 11:21:15
CSS
本文主要讨论传统项目中的css命名，vue，react等单页应用可以使用css-module来解决这个问题，作为前端的小白，免不了要切图（写css，html静态部分），写css最头疼的就是给类命名，词汇量有限，又懒，想着类名比布局还难.在网上搜索了一下，发现css规范比较统一，接受度也比较高。但是css命名似乎没有完美的解决方案。张新旭大师简明法BEM命名法-达摩老师科普BEM简明法张新旭简明法是这样的：.fr{float:left;}.tc{text-align:center;}.pb8{padding-bottom:8px;}
简洁的方法重用率高，性能好，但是这么一堆class感觉有点像写内联样式，维护起来太难受了。毕竟，这是七年前张新旭写的一篇文章。BEM命名法BEM意为块（block）、元素（element）、修饰符（modifier），是Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法使您的CSS类对其他开发人员更加透明和有意义。BEM命名约定更严格并且包含更多信息，它们被团队用于开发大型、耗时的项目。————摘自达摩先生的BEM科普BEM应该算是一个比较科学和系统的命名法。每个类都有一套BEM，自然不会混淆。不过这个冗长的类名写起来真的是软软的。虽然使用scss的&选择器可以省很多事，但是html中冗长的类名还是无法避免，pug之类的html模板也救不了我们。所以想知道有没有科学简洁的css命名方法，于是自己创建了一个命名空间方法，在我的项目中使用起来很开心。但是，这种方法还没有经过大型项目的测试。希望高手讨论一下可行性。命名空间方法的基本思想这种方法最好配合scss使用。思路是最外层使用唯一模块名，内层使用简单类名，最外层禁止使用简单类名。不同模块中，简单的类名可以任意使用，不会影响其他模块。例如：.m-header{.left{背景：红色；高度：10px；}.right{背景：黄色；高度：10px；}}.m-body{.left{背景：蓝色；高度：10px；}.right{背景：绿色；高度：10px；}}
