CSS中的类命名

hawk2014bj

于 2024-04-09 12:32:15 发布

阅读量271

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/hawk2014bj/article/details/137546599

版权

文章讨论了CSS类名命名中的问题，如命名冲突和权重问题。引入BEM方法后，通过明确的块、元素和状态划分提高了代码可读性。然而，复杂的BEM命名可能导致开发效率降低。文中还提及使用工具类和成熟库如Bootstrap和Tailwind来简化命名和状态管理。

摘要由CSDN通过智能技术生成

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。