CSS 命名规范 BEM 思想
2024-08-22 23:52:23
Part.1 何为 BEM?
BEM :Block ( 块 ) 丶Element ( 元素 ) 丶Modifier ( 修饰符 )
出 处:是由 Yandex 团队提出的一种前端命名方法论
优 点:命名方式条理清晰丶易懂;更加适用于团队合作项目
Part.2 例如
- .block{}
- .block__element{}
- .block--modifier{}
- .block 最高级-块
- .block__element 代表.block的后代
- .block--modifier代表.block的不同状态或不同版本
Part.3 如何使用?
常规命名方式如下:
<div class="site-search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</div>
BEM 改造如下:
<div class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</div>
区别:改造后我们能清晰地看到有个叫.site-search的块,他内部是一个叫.site-search__field的元素,并且.site-search还有另外一种形态叫.site-search--full。显而易见,后者条理更加清晰明了!
最新文章
- JavaScript的理解记录(3)
- mysql5.6中 order by 多个字段排序问题
- Eclipse开发Android程序如何在手机上运行
- 菜鸟学Linux命令:tail命令 查看日志
- 必须会的SQL语句(五)NULL数据处理和类型转换
- 重新安装python
- F#(1)
- tomcat动态映射路径
- NIO和IO(转)
- LaTeX排版指南
- Ironic中pxe driver和agent driver的区别
- ES 14 - (底层原理) Elasticsearch内部如何处理不同type的数据
- 使用 prismjs 在网页中高亮显示代码
- Pycharm 消除波浪线
- Unity 新手入门 如何理解协程 IEnumerator yield
- Greenplum 日常维护手册 (汇总、点评、备查)
- 3.Python3变量与基本数据类型
- ubuntu 16.04 安装 网易云
- Kafka 处理器客户端介绍
- tomcat启动报错“Error: Exception thrown by the agent : java.net.MalformedURLException: Local host name unknown: java.net.UnknownHostException: iZ25fsk1ifk: iZ25fsk1ifk”