美文网首页
BEM一些笔记

BEM一些笔记

作者: 一点金光 | 来源:发表于2019-08-14 10:21 被阅读0次

如何给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

相关文章

网友评论

      本文标题:BEM一些笔记

      本文链接:https://www.haomeiwen.com/subject/scwwjctx.html