企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。 命名约定的模式如下: ```css .block{} .block__element{} .block--modifier{} ``` .block 代表了更高级别的抽象或组件。 .block__element 代表.block的后代,用于形成一个完整的.block的整体。 .block--modifier代表.block的不同状态或不同版本。 在项目中,我们使用smacss配合bem完成css的规划组合 命名规则如下 1. smacss规定五中类型,其中皮肤类和初始化类独立处理,另外三类规定命名前缀 2. 布局类 以.l开头中划线链接具体布局名 3. 模块类 以.m开头中划线链接具体模块名 4. 状态类 以--后链接具体状态名字 实例如下 ```html <header class="l-header"> <nav class="m-nav"> <ul class="m-nav_compent"> <li class="m-nav_children"> <span class="m-nav_list--red"> </span> </li> </ul> </nav> </header> ```