CSS命名MVC布局的最佳实践

Question

我需要在带有布局的MVC项目中创建一个CSS命名约定.

在选择类的名称时,Layouts的使用需要非常小心,因为它可以被布局CSS文件中声明的一个覆盖.

我使用的一个规则是只使用样式的元素类和jQuery使用的元素ID.

假设我有这样的布局:

<div class="lyb-ctn">
    <div class="lyb-wrp">

        @RenderBody()

        <div class="lyb-ctn-rgt">
            <div class="lyb-ctn-subscribe">
                <p class="lyb-ctn-subscribe-title">Subscribe</p>
                <input placeholder="Email" /><input type="button" />
            </div>
            <div class="lyb-ctn-categories">
                <p class="lyb-ctn-categories-title">Categories</p>
                <div class="lyb-ctn-categories-ctn-list">
                    <div class="category">
                        <p>Cars</p>
                        <p>Boats</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

一种选择是:

.lyb-ctn {
    position:fixed;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    background-color: #f2f2f2;
    padding-top: 50px;
}

.lyb-wrp {
    max-width: 960px;
    width: 95%;
    margin: auto;
    background-color: #ffd800;
}

.lyb-ctn-rgt {
    float: right;
    width: 235px;
    border: solid 1px #ff6a00;
}

.lyb-ctn-subscribe {
    width: 100%;
}

.lyb-ctn-subscribe-title {
    color: #80bd01;
}

.lyb-ctn-categories {
    width: 100%;
}

.lyb-ctn-categories-title {
    color: #80bd01;
}

我还构建了另一个选项,但我认为这个选项很危险,因为如果它在父布局中恰好存在".rgt-ctn",它可以覆盖这个:

.lyb-ctn {
    position:fixed;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    background-color: #f2f2f2;
    padding-top: 50px;
}

.lyb-ctn .wrp {
    max-width: 960px;
    width: 95%;
    margin: auto;
    background-color: #ffd800;
}

.lyb-ctn .wrp .rgt-ctn {
    float: right;
    width: 235px;
    border: solid 1px #ff6a00;
}

.lyb-ctn .wrp .rgt-ctn .subscribe-ctn {
    width: 100%;
}

.lyb-ctn .wrp .rgt-ctn .subscribe-ctn .title {
    color: #80bd01;
}

这是另一个看起来干净的但我们看不到DOM的层次结构,我认为找到一个要编辑的元素可能更难:

.lyb-ctn {
    position:fixed;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    background-color: #f2f2f2;
    padding-top: 50px;
}

.lyb-wrp {
    max-width: 960px;
    width: 95%;
    margin: auto;
    background-color: #ffd800;
}

.ctn-side-options {
    float: right;
    width: 235px;
}

.ctn-subscribe,
.ctn-categories,
.ctn-tags {
    width: 100%;
}

.ctn-subscribe .title, 
.ctn-categories .title,
.ctn-tags .title {
    color: #80bd01;
    padding: 25px 0 10px 5px;
}

.ctn-categories .ctn-list, 
.ctn-tags .ctn-list {
    width: 100%;
    background-color: #fff;
    border: solid 1px #e6e6e6;
    border-radius: 3px;
    margin: 0;
    padding: 0;
}

还是有更好的方法？

Answer 1

TLDR:组织有序.

首先,我强烈建议您阅读:

OOCSS - http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

SMACSS - https://smacss.com/

和

BEM - http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

在项目开始时花些精力去理解CSS的模块化方法,随着项目变得越来越大,它将带来巨大的回报.如果您正在与两个或更多开发人员合作开展项目,那么拥有强大的命名约定将使生活变得更加轻松.

接下来,如果您还没有这样做,那么值得转换到CSS预处理器,例如SASS - http://sass-lang.com/,LESS - http://lesscss.org/或STYLUS - http://learnboost.github.io/stylus/

使用预处理器可以帮助组织,因为您可以将样式表分成任意数量的文件,然后在编译时将它们全部导入到一个文件中,以遵循性能最佳实践.(另见 - http://thesassway.com/advanced/modular-css-naming-conventions)

你提到你有一个规则只使用类作为CSS钩子和ID作为JS钩子 - 这是一个很好的开始,但我建议不要使用ID并转向js-前缀类.通过这种方式,您的JS也可以重复使用.

接下来要看的是创建一个模式库 - 一个很好的例子就是Mailchimp的例子 - http://ux.mailchimp.com/patterns

如此多的一般指导 - 这些都与以下内容相关:

"我需要在带有布局的MVC项目中创建一个CSS命名约定.使用布局会在选择类名时需要非常小心,因为它可以被布局CSS文件中声明的一个覆盖".

您将看到所有上述指南都旨在将CSS(和JS)组织成可重用代码块.关键是计划,并为您将要使用的每个块提供规范参考 - 因此是模式库.

在您的示例中,您可能希望为每个布局创建一个指南 - 每个布局如何使用以及它如何/应该如何影响后代内容？

如果您希望布局主动影响其后代内容,您将需要对其进行范围限定.所以将它们包装在一个可以充当命名空间的类中.即

<div class="layout-one">[ALL DESCENDANT CONTENT HERE]</div>
.layout-one p {
    color: green;
}

<div class="layout-two">[ALL DESCENDANT CONTENT HERE]</div>
.layout-two p {
    color: red;
}

但是,我认为你更关心的是你的布局会以一种破坏你的设计的方式重新影响后代内容.因此,任何仅与布局相关但不更紧密地与后代相关的样式的范围.

而不是:.layout-one p {}如上所述,去.layout-one__p {},.layout-one__h4 {}

正如您所看到的,这个受BEM启发的命名约定使得它立即变得清晰,所讨论的样式直接是布局的一部分.我们不希望看到这个类在布局HTML之外使用,所以我们可以编写样式而不用担心它们会影响后代内容.

或者,我们可以在布局的命名空间中编写样式,并确保我们的样式会受到影响.