最近我通过梳理旧项目试图清理了一点东西。一个值得关注的地方就是CSS。
鉴于此，我想我给BEM一展身手，以收拾了一下。
我发现了一堆样式声明：
#news-grid {
.article {
margin: 0px;
text-align: left;
border: none;
.article-featured-image-box {
position: relative;
.featured-image {
max-width: 100%;
height: auto;
display: block;
position: relative;
width: 100%;
object-fit: cover;
}
iframe {
width: 100%;
height: auto;
}
p {
display: none;
}
}
.article-meta-information {
color: #cacacd;
font-size: 15px;
font-family: $balto-font;
font-weight: 300;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 5px;
}
.article-content {
padding: 30px 30px 30px 30px;
background-color: $white;
}
.article-title {
font-family: $circular-font;
color: $navy;
font-size: 24px;
font-weight: 500;
margin-top: 10px;
margin-bottom: 10px;
word-wrap: break-word;
a {
color: $navy;
}
}
.article-body {
line-height: 24px;
font-family: $balto-font;
font-size: $body-text;
font-weight: 300;
p {
line-height: 24px;
font-family: $balto-font;
color: $slate;
font-size: $body-text;
font-weight: 300;
word-wrap: break-word;
a {
color: $bright-blue;
}
}
a {
color: $bright-blue;
}
.article-excerpt p {
line-height: 24px;
font-family: $circular-font;
color: $navy;
font-size: 21px;
font-weight: 500;
word-wrap: break-word;
}
}
.article-footer {
padding-top: 15px;
border-top: 1px solid $grey-1;
padding-bottom: 30px;
}
.interactions-panel {
width: auto;
float: right;
}
.sticker {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.92);
text-transform: uppercase;
font-size: 12px;
line-height: 18px;
color: #282C35;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 0px;
right: 0px;
height: 45px;
width: 45px;
}
/* Dark theme */
&.dark {
.article-title {
a {
color: $bright-blue;
}
}
.article-content {
background-color: $slate;
.article-body {
p {
color: $white;
}
}
}
}
/* Tweet theme */
&.tweet {
.featured-image {
margin-bottom: -10px;
}
.twitter-title {
color: #eee;
font-size: 16px;
padding: 25px 0 10px 0;
a {
color: inherit;
text-decoration: underline;
}
}
.sticker-twitter {
background: $navy;
.icon-twitter {
.fa-twitter {
color: $bright-blue;
font-size: 20px;
line-height: 45px;
text-align: center;
width: 100%;
height: auto;
}
}
}
.article-content {
background-color: $bright-blue;
.article-body {
p {
color: $white;
font-weight: $bold;
}
}
}
}
/* Facebook Theme */
&.facebook {
.facebook-title {
color: #eee;
font-size: 16px;
padding: 25px 0 10px 0;
a {
color: inherit;
text-decoration: underline;
}
}
.sticker-facebook {
background: $bright-blue;
.icon-facebook {
.fa-facebook {
color: $white;
font-size: 20px;
line-height: 45px;
text-align: center;
width: 100%;
height: auto;
}
}
}
.article-content {
background-color: $navy;
.article-body {
p {
color: $white;
font-weight: $bold;
}
}
}
}
/* Vimeo Theme */
&.vimeo {
background: $grey-4;
.vimeo-title {
padding: 0;
font-family: "CircularStd";
color: #eee;
font-size: 24px;
font-weight: 500;
margin-top: 10px;
margin-bottom: 10px;
word-wrap: break-word;
a {
color: inherit;
text-decoration: underline;
}
}
.sticker-vimeo {
background: $bright-blue;
z-index: 1;
.icon-vimeo {
.fa-vimeo-v {
color: $white;
font-size: 20px;
line-height: 45px;
text-align: center;
width: 100%;
height: auto;
}
}
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article-content {
background: transparent;
.article-body {
p {
color: $white;
}
}
}
}
}
}
如您所见，为了针对不同的帖子类型重新设置样式，需要进行大量重复。
使用BEM你想有一个块级元素，然后元素组成该块。鉴于此，我有以下内容：
.article-post-card {
&__article-featured-image-box {
position: relative;
}
&__featured-image {
max-width: 100%;
height: auto;
display: block;
position: relative;
width: 100%;
object-fit: cover;
}
&__content {
padding: 30px 30px 30px 30px;
background-color: #FFFFFF;
}
&__meta {
color: #cacacd;
font-size: 15px;
font-family: "Balto";
font-weight: 300;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 5px;
}
&__title {
font-family: "CircularStd";
color: #093875;
font-size: 24px;
font-weight: 500;
margin-top: 10px;
margin-bottom: 10px;
word-wrap: break-word;
}
&__excerpt {
line-height: 24px;
font-family: $circular-font;
color: $navy;
font-size: 21px;
font-weight: 500;
word-wrap: break-word;
}
&__sticker {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.92);
text-transform: uppercase;
font-size: 12px;
line-height: 18px;
color: #282C35;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
display: inline-block;
top: 0px;
right: 0px;
height: 45px;
width: 45px;
}
}
遵循BEM约定，如何添加类型修饰符？我肯定要重复代码吗？
答案 0 :(得分：0)
BEM中的修饰符基于OOCSS概念。您将必须在DOM元素中同时拥有两个类。
在编写scss时，您可以采用以下简单方法：
.article-post-card {
&__title {
font-family: "CircularStd";
color: #093875;
font-size: 24px;
font-weight: 500;
margin-top: 10px;
margin-bottom: 10px;
word-wrap: break-word;
&--dark {
color: red;
}
}
}