BEM的命名规范是什么-创新互联
这篇文章主要介绍“BEM的命名规范是什么”,在日常操作中,相信很多人在BEM的命名规范是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”BEM的命名规范是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联-专业网站定制、快速模板网站建设、高性价比猇亭网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式猇亭网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖猇亭地区。费用合理售后完善,10年实体公司更值得信赖。什么是BEM命名规范
Bem是块(block)、元素(element)、修饰符(modifier)的简写,由Yandex团队提出的一种前端CSS命名方法论。
BEM是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密。
BEM命名模式
BEM命名约定的模式是:
.block{}
.block__element{}
.block--modifier{}
block代表了更高级别的抽象或组件。
block__element代表.block的后代,用于形成一个完整的.block的整体。
block--modifier代表.block的不同状态或不同版本。
使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定。如:
.sub-block__element{}
.sub-block--modifier{}
BEM命名法的好处
BEM的关键是,可以获得更多的描述和更加清晰的结构,从其名字可以知道某个标记的含义。于是,通过查看HTML代码中的class属性,就能知道元素之间的关联。
使用BEM命名规范的示例:
复制代码
复制代码
到此,关于“BEM的命名规范是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网页标题:BEM的命名规范是什么-创新互联
分享地址:http://scyanting.com/article/coseip.html