В последнее время я прочесываю старые проекты, пытаясь немного навести порядок.Одной из проблем является 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;
}
}
Следуя БЭМ-соглашению, как мне поступить с добавлением модификаторов типов?Наверняка мне придется дублировать код?