Question

有没有好的CSS编码风格/标准？

Answer 1

这是一个很好的：

http://www.phpied.com/css-coding-conventions/

但重要的是选择一些东西并坚持下去以保持一致。

Answer 2

我同意Andrew Hare的链接中的大部分观点，但我强烈相信

.class-name {
    color: green;
}

不如：

.class-name
{
    color: green;
}

理由是：

.class-name, .class-name2 {
    color: green;
}

或：

.class-name, 
.class-name2 {
    color: green;
}

对于grep或read来说明显不那么明显：

.class-name, 
.class-name2 
{
    color: green;
}

Answer 3

没有标准的标准。当然有很多内部标准和惯例。并且肯定有最佳实践。

我坚持以下几点：

根据目的构建CSS
这可能涉及将CSS问题分离到不同的文件（layout.css，colors.css等）。这也可能只是将一个CSS文件清楚地划分为相同行的清晰部分。
尽可能具体
选择器具有不同的权重。基于ID的选择器比基于类的选择器更具体。链式选择器（例如body div#container div#content p）确实非常具体。

尽可能具体地开始，即使看起来你太具体了。稍后，通过删除一个并使另一个不那么具体，将两个非常具体的样式定义合并在一起非常容易。

具有宽松特异性的样式定义可能会以不明显或不明显的方式针对您不打算使用的元素。我认为这是CSS挫折的最常见原因（“为什么这个div不能让我设置上限？”）
始终指定您希望应用于给定定义的每种样式
例如，如果您希望所有段落都有粉红色文本，请将文本颜色设置为粉红色，并设置边距/填充/背景颜色/字体等。

不要依赖浏览器默认值来保持适当的一致性。当然，对于最常用的元素，主浏览器倾向于使用非常相似（如果不相同的默认样式）。

如果您自己设置所有相关样式，您就会知道最终结果应该是什么。

如果您只设置那些最明显的样式，最终结果将是（很可能）浏览器默认值和样式的组合。这最终会在某些时候让你失望。我认为这是CSS挫折的第二大常见原因。
使用id来设置独特元素的样式
将id属性应用于将以任何方式与之交互的任何唯一元素通常是个好主意。对于CSS，这将使您更容易应用适当的特定样式。
在唯一网页上使用id
样式和布局与大多数（主页，搜索结果，404）明显不同的页面在id元素上应该有body。这为您提供了所需的特性，以确保您的谨慎主页样式不会受到您稍后应用于某个内部内容页面的样式的影响。

Answer 4

漂亮的编码风格VS网站速度

我一直在处理非常庞大的CSS文件，并发现了一些我以前从未读过的非常有趣的事情。

<强> @import

有一件事是使用@import。这实际上是一个瓶颈 - 通过完全不使用@import，该网站变得更加活泼。

#every .style {in one line}

当浏览器读取文档时，它会逐行读取，因此通过从我漂亮的编码风格切换到此，我完成了两件事;

一个更加活泼的网站
滚动较少，概述较好。为什么？因为我首先向下滚动以找到我将要使用的样式，然后它们都在同一行中，并且沿着线滚动您的眼睛以找到您正在寻找的内容并不困难。

Answer 5

检查Sass。它是CSS的模板语言，使您的源代码DRY：呃，易于阅读。即使您没有使用ruby，也可以将它用于此任务，并自动从Sass源构建css文件。并且在其他语言中也可能有Sass实现。

Answer 6

当我在CSS中编码时：

在第一部分中，我编写了类和id
在上一部分中，我编写了一般元素（p，font等），因为class和id对继承更重要
如果我想要使用IE或使用MoSE浏览器

您可以在CSS Zen Garden

中看到一些示例

通常我会将最重要的元素插入另一个元素：如果有

p.important{/*features of a class*/}

p {/*features of a general element */}

阅读CSS文件我之前知道关于特定元素的格式规则，遵循关于常规元素的规则。
这是Java编程的习惯。

Answer 7

根据经验，我曾经写过很长的CSS样式表。现在我的样式表通常是半页。

所以保持简单（KISS），基于行（greppable）并保持紧凑（使用font：而不是font-size等等。）

另外，我强烈建议您使用CSSlint检查代码是否有毛病。

Answer 8

按字母顺序放置你的css规则（例如：“color：red;”），并将你的选择器（例如：“div {color：red;}”）放在你的标记中。结构与皮肤的代码分开。

Answer 9

可能有负载。在我们的工作中，我们使用以下内容：

/* =div a comment about my div */
div#mydiv {
    border:1px solid #000;
}

= div允许我们使用搜索功能搜索所有div元素。虽然有更多的负载，但我过去曾使用过很多不同的变体。

Answer 10

主要的良好编码风格是根据目标实际分离css文件。

请参阅Progressive Enhancement。

这样，无论您选择何种编码约定，您都将拥有一致且易于管理的单独css文件......更易于调试。

Answer 11

除了别人说的话，记住C代表'Cascading'，即子元素继承自顶级元素。声音简单而直接。但我经常看到包含冗余声明的CSS文件，例如用于字体样式。这使得CSS更复杂，难以维护。

因此，在向CSS添加内容之前，请确保它不是多余的，即检查父元素并从子元素中删除多余的声明。

鉴于此，你应该以某种方式组织你的CSS，以便首先提到高级元素（比如body类的声明），并且持续使用更专业的元素。

Answer 12

这可能也会有所帮助，一些提示让你的CSS风格保持干净 - 如“不要重复自己”link text

Answer 13

我强烈建议您查看Less：http://lesscss.org

虽然不是真正的标准，但它最近获得了很大的发展势头。较少的是在浏览器中运行的css扩展，它将变量和函数引入语言，从而允许模板化。

CSS编码风格

13 个答案: