CSS类名在开发中一般都是简单的命名一下,例如 nav、title、menu 等等,但是这也带来了问题,出现命名冲突的时候不知道是哪里引起的,加上 CSS 本身权重的问题就更加棘手。如果是小项目,代码不多、开发人员较少还可以控制,一旦项目的代码增多、人员增多,查问题就很耗时,同时即使查到问题也改不动,不知道是不是会影响项目的其他页面或者功能。有时为了尽快解决问题,尤其是交付类项目,就会用!important或者行内样式进行妥协,这就为以后的维护带来了更大的隐患。
CSS 中有一种命名方式叫 BEM,我的理解就是模块化或者说是命名空间,块–元素–状态,很好理解可以看以下例子,__(双下划线)代表子元素,–代表状态或者修饰:
<form class="site-search full"><input type="text" class="field"><input type="Submit" value ="搜索" class="button">
</form>
用了 BEM 后
<form class="site-search site-search--full"><input type="text" class="site-search__field"><input type="Submit" value ="搜索" class="site-search__button">
</form>
显而易见,用了 BEM 后,对于开发人员,通过类名就可以确定该类的具体作用。但是同样也会带来问题,就是命名太过复杂,每次起名字就要很多时间,可能在项目开发中很难落地。有一种方式是可以通过 BEM 对组件进行命名,例如site-search__button,利用工具类实现状态效果,例如 bg-blue。工具类也可以选用比较成熟的库,例如Bootstrap 或者 Tailwind。