为什么需要BEM
如果编写项目的 CSS 代码只有你一个人,或者项目的 CSS 代码量很小,你可以用你喜欢,习惯的方式去组织你的 CSS 代码。但是项目更大,更复杂,有多人编写项目的 CSS 代码(每个人有自己的风格),代码量大的时候,就需要一种统一形式去组织 CSS 代码,这时候 BEM 就派上用场了。
什么是BEM
BEM(Block Element Modifier) 是一种命名CSS class的模式,使用这种模式可以让 CSS 代码更加利于维护。标准的 BEM 写法是 .block-name__element-name--modifier-name
。
Block
页面上逻辑和功能独立的,可复用的组件,可以嵌套并相互交互,但在语义上它们保持平等,可以存在页面上不同的位置或不同项目中,保持样式不变。
可以使用字母,数字,连字符进行命名,任何html元素都可以成为一个block,不依赖于页面上的其他block或者element。
<header class="header"></header>
.header {
color: #333;
background: #f5f5f5;
}
Element
组成块的一部分,内部的任何元素都与块有关联,不能在块的外部使用。
<article class="article">
<h2 class="article__title"></h2>
<p class="article__content"></p>
</article>
.article {
padding: 12px;
}
.article__title {
font-size: 1rem;
}
.article__content {
font-size: .9rem;
}
Modifier
用来表示块或者元素的状态,外观或者行为,不必须,可以选择使用。
<button class="btn btn--disabled"></button>
.btn {
color: #333;
background-color: #fff;
}
.btn--disabled {
color: #fff;
background-color: #6c757d;
}
示例
这样的卡片是一个单独的块
<div class="list-card">
<img class="list-card__img" />
<div class="list-card__content">
<a class="list-card__link"></a>
<p class="list-card__desc"></p>
<div class="list-card__stats">
<span class="list-card__stat"><i class="list-card__icon"></i></span>
<span class="list-card__stat"><i class="list-card__icon"></i></span>
<span class="list-card__stat"><i class="list-card__icon"></i></span>
<span class="list-card__date"></span>
</div>
</div>
</div>
See the Pen BEM Demo by 轻键快码 (@xrr2016) on CodePen.
常用CSS class名
包裹类: container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block
状态类: primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading
尺寸类: large, middle, small, bigger, smaller
组件类: card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog
位置类: first, last, current, prev, next, forward, back
文本类: title, desc, content, date, author, category,label,tag
人物类: avatar, name, age, post, intro
结语
BEM 不是必须的,你依然可以选择自己喜欢的方式编写,组织你的 CSS 代码。使用 BEM 主要目的是为了在团队开发中有一个统一的规范,更利于代码的维护,在别人接手你的代码,或者接手别的代码时能够更加快速的理解代码。
参考
今天的文章BEM命名规范入门及常用CSS class 命名分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/14299.html