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命名约定。在选择类的名称时，Layouts的使用需要非常小心，因为它可以被布局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之外使用，所以我们可以编写样式而不用担心它们会影响后代内容。

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

Answer 2

我认为第一和第二种布局完全不同。例如：在第二个布局中，（我相信）课程.lyb-ctn .wrp意味着他们也会传递从.lyb-ctn到.wrp的规则。

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

以下是来自.wrp的代码，该代码仅覆盖部分 .lyb-ctn class

    max-width: 960px;
    width: 95%;
    margin: auto;
    background-color: #ffd800;

}

嗯，现在它们在浏览器中可能看起来是一样的。但随着越来越多的风格涉及，它很容易陷入意想不到的结果。

我认为在这种情况下，第三个会产生更多场景。

Answer 3

首先我使用camelcase命名

第二次使用尽可能多的类和css中的小ID，因为这样可以重用代码，也可以更好地使用

.w100 { width: 100%; } .black { color: black; }

大于

.something { width: 100%; color: black; }

甚至更糟

#something { width: 100%; color: black; }

CSS命名MVC布局的最佳实践

3 个答案: