在阅读element时,发现其CSS命名采用BEM的风格,于是去查阅BEM是什么...
我的理解:BEM是命名规范
BEM的意思就是块(block)、元素(element)、修饰符(modifier)
主要问题是CSS类名中“--”和“__”是什么意思?
__(两个短横线)表示某一个块的后代元素
--表示某一个块的不同状态或版本
.block{} block块
.block__element{} block块下的元素
.block--modifier{} block块的不同状态或版本
示例
<form class="site-search full"><input type="text" class="field"><input type="Submit" value ="Search" class="button"></form>
用BEM风格改写如下
<form class="site-search site-search--full"><input type="text" class="site-search__field"><input type="Submit" value ="Search" class="site-search__button"></form>
我理解的块的不同状态或版本就是一个块有不同的类名
参考原文如下:
CSS命名规范——BEM思想(非常赞的规范)_大奋齐的博客-CSDN博客_bem命名规范/chenmoquan/article/details/17095465