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

我需要在带有布局的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>

我还构建了另一个选项，但我认为这一个是危险的，因为如果父布局中碰巧存在“.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;
}

---

还是有更好的方法？

我认为第一个和第二个布局完全不同。例如：在第二个布局中，（我相信）class

.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类

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

我认为第三部在这种情况下会有更多的场景。

TLDR：组织起来

首先，我强烈建议您阅读以下内容：

OOCSS-

SMACSS-

及

边界元

在一个项目开始时，投入一些精力来理解CSS的模块化方法，将在项目变得更大时获得巨大的回报。如果您与两个或两个以上的开发人员一起从事一个项目，那么拥有强大的命名约定将使您的工作更加轻松

接下来，如果您还没有这样做，那么很值得过渡到CSS预处理器，例如SASS、LESS或STYLUS-

使用预处理器有助于组织，因为您可以将样式表分解为任意多个文件，然后在编译时将它们全部导入到一个文件中，以遵循性能最佳实践。（另见-）

您提到您有一个只使用类作为CSS钩子，使用ID作为JS钩子的规则-这是一个好的开始，但是我建议不要使用ID，而是使用带有JS前缀的类。这样，您的JS也变得可重用

接下来要看的是创建一个模式库-Mailchimp的例子就是一个很好的例子-

一般指南到此为止-所有这些与以下方面有何关系：

“我需要在带有布局的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;
}

[此处的所有子代内容]
.布局图一p{
颜色：绿色；
}
[此处的所有后代内容]
.布局图二p{
颜色：红色；
}

然而，我认为您更关心的是，您的布局将以破坏您的设计的方式重新积极地影响后代内容。因此，请确定仅与布局相关而与子体无关的任何样式的范围

而不是： .layout one p{} 如上所述，选择 .layout-one_uup{}、.layout-one_uuh4{}

正如您所看到的，这种受BEM启发的命名约定使我们立即清楚地认识到，所讨论的样式是布局的直接组成部分。我们不希望看到这个类在布局HTML之外使用，因此我们可以编写样式，而不必担心它们会影响后代内容

---

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

首先，我要使用camelcase命名

第二，在css中使用尽可能多的类和尽可能少的ID，因为这样可以实现代码重用，而且最好使用

.w100{宽度：100%；}.black{颜色：黑色；}

.something{宽度：100%；颜色：黑色；}

甚至更糟

---

#某物{宽度：100%；颜色：黑色；}

部分取决于您的站点中是否有其他

.wrp

等元素。不管怎样，我倾向于使用option2，这样你的html就不会被冗长的CSS类名塞满——关键是它们会层叠在一起，谢谢。但是，例如“.title”非常常见，这可能会增加覆盖的风险…否？

。lyb ctn.wrp.rgt ctn.subscribe ctn.title

非常具体，因此我认为不太可能被覆盖。“类”的意义在于它定义了一个类（即一组类似的）元素的样式。因此，您可能有一个全局

.title{font-weight:bold；}

使所有标题都加粗，但只有您的

.subscribe ctn.title

是绿色的。注意类命名约定是好的，但是您还需要注意如何使用它们。我做了一个小测试，以确保layoutblog.css中的.title不被layout.css文件中的.title覆盖，这是正确的。它假设的是最接近的一个。我想你对这件事太担心了。样式旨在级联，因此无论何时创建样式或元素，都需要考虑现有样式是如何影响的。每个页面都是所有样式的集合，您需要这样查看。。。不是作为一个单独的部分

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

}

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