如何给ui项目类名命名。
什么是它
01.是一种方法
为什么要
一个简单命名和容易让别人一起工作的方法。
01.比如选项卡导航是一个块(Block)
02.这个块里的元素的是其中标签之一(Element),称之为元素
03.而当前选项卡有一个修饰状态(Modifier)。
如何实现
一些原则
01.把容器和内容分离:实现内容插入到哪个容器都行。--可重用性
02.把基础和扩展分离:实现基础被哪个样式修饰都行。--可扩展性
一些建议
#steps-00:页面进行分块
.header
.footer
.main
.sidebar
#steps-01:某块进行分元
.header__logo {}
.header__tagline {}
.header__searchbar {}
.header__navigation {}
#steps-02:对象进行修改
#2 对元素进行修改
.header__navigation--secondary {}
#2 对某块进行修改
.header--alert{}
一些不足
参考文献
w3cplus:bem-definitions
smashingmagazine:a-new-front-end-methodology-bem
tutsplus:an-introduction-to-the-bem-methodology
permanenttourist:why-using-bem-for-your-css-is-a-bad-idea
网友评论