bem-css命名规范

最新推荐文章于 2025-03-04 12:09:32 发布

H_x

最新推荐文章于 2025-03-04 12:09:32 发布

阅读量159

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43650979/article/details/107941133

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了BEM（Block Element Modifier）CSS命名规范，包括如何使用中划线表示块，下划线表示后代元素，以及双中划线表示状态或版本。通过具体的实例展示其在实际应用中的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法

中划线-表示块，例如一个想把一个容器命名为x-box，这就是块，即-用来连接有多个单词的块的名字
下划线_表示块的后代元素，例如x-box_header，x-box_center， x-box_button
双中划线--表示状态或者版本，例如成功，失败等，x-box_button--success, x-box_button--danger

实例

<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value="Search" class="site-search__button">
</form>

<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value="Search" class="site-search__button--success">
    <input type="Submit" value="Search" class="site-search__button--danger">
</form>