美文网首页
BEM--CSS命名规范

BEM--CSS命名规范

作者: 虾米不是鱼 | 来源:发表于2020-09-12 13:35 被阅读0次

什么是BEM?

BEM代表块(Block),元素(Element),修饰符(Modifier)。
BEM是一种书写CSS的一种命名规范好处:
1.统一的规范便于维护
2.结构清晰容易后来的人对结构和代码的理解
3.利于团队之间的协作

BEM(或BEM的变体)是一个非常有用,强大,简单的命名约定,以至于让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确而且更加严密。


<div class="header header--skin">
  <div class="header__left header__left--sikn"></div>
  <div class="header__right"></div>
</div>

上面是一个基础模式

header 代表一个模块(或者说一个组件)

以--为连接的是对模块的装饰

以__为连接的是模块的子元素(可能是一个button可能是一个P标签)

相关文章

  • BEM--CSS命名规范

    什么是BEM BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区...

  • BEM--CSS命名规范

    什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier)。BEM是一种书写C...

  • 适合各厂使用的 MySQL 团队开发规范,太详细了,建议收藏!

    数据库对象命名规范 数据库对象 数据库对象全局命名规范 数据库命名规范 表命名规范 字段命名规范 索引命名规范 视...

  • 代码书写规范

    res命名规范: src中命名规范: 习惯命名:

  • Android开发中的优化方案

    一、命名规范 代码规范先从命名规范开始,Android的命名规范主要涉及:Java源代码,xml文件,图片资源。 ...

  • Swift--规范编程

    命名规范 注释规范 声明 代码排版 命名规范 常用命名方法 匈牙利命名,一般只是命名变量,原则是: 变量名 = 类...

  • Flutter 代码规范

    命名规范 命名规范中包括了文件以及文件夹的命名规范,常量和变量的命名规范,类的命令规范。Dart 中只包含这三种命...

  • 入门13 CSS综合

    CSS编码规范 命名规范:语义化标签优先;基于功能命名、基于内容命名、基于表现命名;简略、明了、无后患 书写规范:...

  • 规范文档

    1.命名规范2.注释规范3.代码规范4.目录规范 1.命名规范 通用规范通用规范是在整个项目中,所有的命名都需要遵...

  • 内部前端规范v1.0

    项目目录结构规范 请查看 项目目录结构规范 HTML 命名规范 class 命名实行 BEM命名方式。关于BEM,...

网友评论

      本文标题:BEM--CSS命名规范

      本文链接:https://www.haomeiwen.com/subject/lieeektx.html