Question

我刚开始探索这个领域，并想知道在制作干净，结构良好且可维护的CSS时最好的做法是什么。

似乎很少有不同的方法来构建CSS规则。

我看到的最常见的一个是将所有内容放在一个规则中，即边距，边框，字体，背景，如下所示：

.my-class {
    border-top:1px solid #c9d7f1;
    font-size:1px;
    font-weight:normal;
    height:0;
    position:absolute;
    top:24px;
    width:100%;
}

我注意到的另一种方法是使用属性分组，比如文字相关属性，比如字体大小，字体，强调等等，一个规则，背景进入其他规则，边框/边距进入另一个规则：

.my-class {
    border-top:1px solid #c9d7f1;
}

.my-class {
    font-size:1px;
    font-weight:normal;
}

.my-class {
    height:0;
    top:24px;
    width:100%;
    position:absolute;
}

我想我正在寻找一个银色的子弹，我知道我不会得到，但是还是打赌 - 这个领域的最佳做法是什么？

Answer 1

我使用了自己的订单，方便我。

规则以降序列出，标准是规则对布局的影响。例如：

.element {
    float:none;
    position:relative;
    top:-2px;
    z-index:100;
    width:100px;
    height:100px;
    margin:10px 0;
    padding:0;
    border:1px solid #000;
    background:#F00;
    font-size:10px;
    color:#CCC;
}

当然，在上面的示例中，我没有列出所有css指令。

特别的想法是保持团体秩序，例如：

定位
宽度和高度
边距和填充
Borders（和其他人，影响元素的总尺寸）
背景，对齐（以及其他不影响整个页面布局的其他内容）
印刷术

Answer 2

我通常将所有适用于同一元素的属性组合在一起 - 这使得尝试查找适用的所有内容稍微不那么烦人，并且使其更容易避免重复属性。如果我有三个不同的.my-class规则，我会不会惊讶于在不远的将来发现他们都设置了一些属性两三次因为有人匆匆而只是寻找最近的选择器右。

Answer 3

我喜欢Stefano Mazzocchi在标题为Why Programmers Suck at CSS Design的帖子中提出的建议。除其他外，他解释了如何从一个干净的平板开始，是否使用em或px，如何定义字体等。我不会使用所有的建议（例如，我会犹豫是否导入任何CSS - 或任何其他 - - 雅虎的文件），但有些想法非常好。

还有一些建议：100 Exceedingly Useful CSS Tips and Tricks

Answer 4

如果您正在使用可能在另一个具有完全不同外观的上下文中再次使用的类名，请使用“命名空间”以确保这些规则不会“溢出”其预期的上下文。上下文是最近的父元素的选择器，在其中总是会找到与未命名的选择器匹配的元素。

e.g。让我们假设您正在为可重用模块创建一些样式，其顶级元素始终具有class =“mymodule”。所有仅供在那里使用的选择器应该以“.mymodule”开头 - 所以“.item”应该变为“.mymodule .item”，你的mymodule项目的标题应该有选择器“.mymodule .item .title”等

但是，不要试图在CSS中完全复制整个元素层次结构 - 这会导致非常脆弱，难以维护的CSS。例如如果您认为您将在“.new-products”之外使用“.product-item”，但希望在很大程度上保留其外观，那么您肯定会为提供更好的灵活性>不命名空间（系列）选择器。您可以随时使用其他选择器（具有相同或更高的特异性）覆盖您的样式，以适应其他环境中的外观变化。

示例：

.black-module {
   background: #000;
}
.product {
   color: #363; /* products look similar everywhere /
}
.black-module .product {
   color: #FCF; / products have lighter text if inside a black module /
}
   .product .title {
      color: #030; / won't affect article titles /
   }
   .black-module .product .title {
      color: #FCF; / won't affect article titles or product titles in a non-black module /
   }
   .product .subtitle {
      color: #7A7; / looks good on all known module backgrounds, even black */
   }

.article .title {
   font-weight: bold; /*won't affect product titles */
}

Answer 5

就个人而言，我使用第一种方法，但我也缩进了子选择器。例如：

.my-class {
    /* stuff here */
}

    .my-class tr {
        /* stuff here */
    }

        .my-class tr a {
            /* stuff here */
        }

然而，关于最佳实践的Dunno，除了将开头大括号与结束大括号放在同一行上，并用分号结束每个属性，即使它是最后一个。

Answer 6

这里确实没有正确或错误的答案，当然没有确定的答案。做一些对你有意义的事情，理想情况下对其他人来说是最可读的。

就个人而言，我喜欢将相关元素组合在一起，但我也按照它们在页面上的部分进行组织。我将在CSS中用注释表示这些部分。例如，我的标题部分可能如下所示：

/* HEADER */

#header {
    float:left;
    width:100%;
    height:162px;
    background:url(images/headerbg.gif);
    background-repeat:no-repeat;
}

#header-left {
    float:left;
    margin:0;
    padding:0;
    width:350px;
}

#header-right {
    float:right;
    margin:0;
    padding:0;
    width:620px;
}

#header a {
    color:#c4e6f2;
    text-decoration:none;
}

#header a:hover {
    color:#ffffff;
}

围绕CSS有很多不同的语义实践，但这只是我通常对规则进行分组的一个例子。我通常会尝试最小化所需的CSS数量，因此我使用边框，边距，填充等缩写，我尝试不再重复使用CSS选择器。我通常将所有属性组合在一起。

Answer 7

CSS允许您针对特定元素“级联”多个规则，但通常您没有相互影响完全相同元素的规则。在一个块中，我将分离出特定类型的指令：

div.foo {
    float: left;
    padding: 1em;
    margin: 1em;

    background-color: #fff;
    border: solid 1px silver;

    font-family: ...
}

我的想法是，为了获得最大的可读性，您希望使每个指令尽可能密集。也就是说，这里的填充比边距更容易阅读：

div.foo {
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
}

说了这么多，一般来说CSS的问题并不是保持个别块的清洁。您更常见的问题是，如何将文件和文件部分中的规则分组？

例如，您可以拥有一个layout.css，theme.css（颜色，字体等）以及影响应用程序特定部分的单个CSS文件，例如data-browser.css。然后，您可以从一个主CSS文件导入这些CSS文件，或者根据需要在每个页面上导入它们。

Answer 8

对我来说，按字母顺序排列元素属性是件好事。对于程序员而言，这很简单，可见且有用。）

e.g。

#my-id 
{
   color: #fff;
   float: left;
   font-weight:
   height: 200px;
   margin: 0;
   padding: 0;
   width: 150px;
}

在制作之前，建议使用some的compressors来提高效果。

Answer 9

与大多数“最佳实践”一样，这里没有正确答案。我认为其他人的建议和风格一般都很好。

虽然我喜欢CSS，但我认为CSS在这方面让我们失败了。该语言陈旧，可以在帮助我们组织大型复杂CSS文件的方式上进行大量改进。在这个方向上的一个很好的努力是http://LESScss.org。他们使用变量，混合，嵌套规则以及甚至允许css更加干燥和易于管理的操作来扩展CSS。

这不是/ true / CSS，因为你必须preprocess the LESS to turn it into CSS浏览器才能理解，但这是一个快速而简单的步骤，如果你的CSS变得笨拙，那么这对你来说是值得的。

因此，如果你发现CSS不实用，那么值得一试。

编写可维护CSS的最佳实践是什么？

9 个答案: