使用BEM修饰符类

Posted 2021-05-04

最近我正在梳理一些旧项目试图清理一下。一个值得关注的地方是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约定我将如何添加类型修饰符？当然我必须重复代码？

答案

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;
        }
    }
}