700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > CSS命名规范--BEM

CSS命名规范--BEM

时间:2021-02-13 03:12:41

相关推荐

CSS命名规范--BEM

在阅读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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。