MVC 布局中的 CSS 命名最佳实践

Question

我需要在带有布局的 MVC 元素中创建 CSS 命名约定。

布局的使用导致在选择类名称时需要非常小心，因为它可以被布局 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/ , 少 - http://lesscss.org/或触控笔 - http://learnboost.github.io/stylus/

使用预处理器有助于组织，因为您可以根据需要将样式表分成任意多个文件，然后在编译时将它们全部导入一个文件以遵循性能最佳实践。 (另请参阅 - http://thesassway.com/advanced/modular-css-naming-conventions)

你提到你有一个规则，只使用类作为 CSS 钩子(Hook)和 ID 作为 JS 钩子(Hook)——这是一个好的开始，但是我建议不要使用 ID，而是转向以 js 为前缀的类。通过这种方式，您的 JS 也变得可重用。

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

一般性指导就这么多——所有这些与以下内容有何关系:

“我需要在带有布局的 MVC 元素中创建 CSS 命名约定。 布局的使用导致在选择类名称时需要非常小心，因为它可以被布局 CSS 文件中声明的名称覆盖。”

您会看到以上所有指南都旨在将您的 CSS(和 JS)组织成可重用代码块。这样做的关键是规划，并为您将要使用的每个 block 提供规范引用 - 因此是模式库。

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

在您希望布局主动影响其后代内容的地方，您将希望对它们进行范围界定。所以将它们包装在一个可以充当命名空间的类中。即

<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 之外使用，因此我们可以编写样式而不用担心它们会影响后代内容。

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