CSS编码风格

Question

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

- Sabya

Answer 1

以下是一篇不错的文章:

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

但重要的是选择一种规则并保持一致性。

- Andrew Hare

Answer 2

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

.class-name {
    color: green;
}

is inferior to:

的翻译是 "

不如：

"。

.class-name
{
    color: green;
}

因为以下理由：

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

或：

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

相比于以下内容，更不容易被 grep 或阅读到：

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

- annakata

---

从没想过这样做。我觉得我应该开始使用这种惯例。 - Jeff Winkworth

我不知道那是否“明显少了很多”——这就是又一次的OTBS战争。 - guns

嗯，在行内分组中，你需要注意任意长的选择器字符串中的逗号。而K+R格式使得在其中查找变得更加困难，因为并不是所有的行都以统一的方式结束。这是一个很容易解决的问题，为什么不选择清晰明了呢？ - annakata

Answer 3

并没有一个标准的标准。当然有许多内部标准和惯例，也有已知的最佳实践。

我遵循以下原则：

• 根据目的构建CSS结构
  这可能涉及将CSS问题分为不同的文件（layout.css、colors.css等）。这也可以清晰地沿着相同的线路将单个CSS文件划分为清晰的部分。

• 尽可能具体
  选择器具有不同的权重。基于ID的选择器比基于类的选择器更具体。链式选择器（例如body div#container div#content p）非常具体。
  

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

  具有松散特异性的样式定义可能以您未打算的方式针对元素，并且这种方式不是立即明显或明显的。我认为这是CSS挫败感的最常见原因（“为什么这个

  不让我设置顶部边距？”）

• 始终指定要应用于给定定义的每个样式
  例如，如果您希望所有段落都具有粉色文本，请将文本颜色设置为粉色，并设置边距/填充/背景颜色/字体等。
  

  不要依赖浏览器默认值是否足够一致。对于最常用的元素，主要浏览器 tend to use very similar if not identical default styling。

  如果您自己设置了所有相关样式，则知道最终结果应该是什么。
  
  如果您只设置那些最直观的样式，则最终结果将（很可能）是浏览器默认值和您的样式的组合。这最终会在某个时候让您失望。我认为这是CSS挫败感的第二个最常见原因。

• 使用id来为独特元素设置样式
  通常最好为任何将以任何方式交互的唯一元素应用id属性。对于CSS，这将使您更轻松地应用适当的特定样式。

• 在唯一页面上使用id
  与大多数页面（主页、搜索结果、404）风格和布局明显不同的页面应在body元素上使用id。这为您提供了所需的特异性，以确保您的精心设计的主页样式不会受到稍后应用于某些内部内容页面的样式的影响。

- Jon Cram

Answer 4

良好的编码风格主要是根据其目标将CSS文件分开。

请参见渐进增强。

这样，无论您选择什么编码约定，您都会拥有一致且易于管理的单独的CSS文件...更容易调试。

- VonC

Answer 5

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

我一直在使用相当庞大的 CSS 文件，并发现了一些非常有趣的事情，这些以前我从未听说过。

@import

其中一个是使用 @import。实际上，这是一个瓶颈 - 完全不使用 @import，网站变得更加迅捷。

#每个 .style {都写在同一行}

当浏览器读取文档时，它逐行读取，所以通过从我的漂亮的代码风格切换到这种方式，我实现了两件事：

1. 更快速的网站
2. 更少的滚动，更好的概览。为什么？因为我首先向下滚动查找要处理的样式，然后它们都在同一行中，很容易沿着该行滚动眼睛找到你正在寻找的内容。

- olemarius

---

我无法想象在现代浏览器中，将类放在单行中会带来如此大的性能优势；你能举个例子说明你看到了多少性能提升吗？即使只有适度的性能提升，我仍然更喜欢格式良好的代码而不是紧凑的代码。 - Ryan Guill

是的，当所有内容都在一行中且没有换行时，设计的整体结构变得更加明显。 - Mark Boulder

Answer 6

看看Sass吧。它是一种用于CSS的模板语言，可以使您的源代码更加DRY，并且易于阅读。即使您不使用ruby，也可以使用它来自动化从Sass源构建CSS文件的任务。而且其他语言中可能也有Sass实现。

- PEZ

---

Sass 的新网址是什么？ - Gerwald

Answer 7

仅从经验来看，我曾经写过相当长的CSS样式表。现在我的样式表通常只有半页。

所以保持简单(KISS)，基于行(greppable)和紧凑(使用font:而不是font-size等等)。

此外，我强烈建议使用CSSlint检查您的代码是否存在冗余。

- hendry

---

好处尤其是紧凑性。 - annakata

我也认为这是一个好观点。但它与@annakata关于大括号风格的答案不符，也违反了Jon Cram关于“始终指定要应用于给定定义的每个样式”的观点。 - Gerwald

Answer 8

将您的CSS规则（例如：“color: red;”）按字母顺序排列，并按它们在标记中出现的顺序排列选择器（例如：“div { color: red; }”）。将结构代码与样式代码分开。

- presario

Answer 9

我强烈推荐看一下Less: http://lesscss.org

虽然它不是真正的标准，但最近它已经获得了很多动力。Less是一种在浏览器中运行的CSS扩展，将变量和函数引入语言，从而允许模板化。

- Vineet

Answer 10

当我编写CSS代码时：

• 首先编写类和ID
• 最后编写一般元素（如p、font等），因为类和ID对于继承更为重要
• 如果我想要在IE或MoSE浏览器中实现特定的行为，我会添加注释

你可以在CSS Zen Garden中看到一些例子。

通常我会将最重要的元素插入到其他元素之上：如果有

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

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

通过读取CSS文件，我了解到关于最特定元素的格式规则先于最一般元素的规则。
这是Java编程中的一种习惯。

- alepuzio

---

我认为这实际上是结构的反向，原因正好相反：类和ID具有更高的特异性意味着标签将具有更多的影响，因此在继承中更为重要。 - annakata