CSS中的类命名

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。