【发布时间】：2009-01-09 13:25:02
【问题描述】：
有没有好的 CSS 编码风格/标准？
【问题讨论】：
标签： css coding-style
【发布时间】：2009-01-09 13:25:02
【问题描述】：
【讨论】：
我同意 Andrew Hare 链接中的大部分观点，但我强烈相信
.class-name {
color: green;
}
不如：
.class-name
{
color: green;
}
基于：
.class-name, .class-name2 {
color: green;
}
或：
.class-name,
.class-name2 {
color: green;
}
对于 grep 或读取来说明显不如：
.class-name,
.class-name2
{
color: green;
}
【讨论】：
-
从来没有这样想过。我想我可能会开始使用这个约定
-
我不知道这是否“明显不那么明显”——这只是 OTBS 战争的重头。
-
好吧，内联分组依赖于您在任意长的选择器字符串中发现逗号，而 K+R 格式使 grepping 变得更加困难，因为并非所有行都以一致的方式结束 - 这很容易修复，为什么不说清楚？
实际上并没有标准。肯定有很多内部标准和约定。当然也有已知的最佳实践。
我坚持以下几点：
根据其用途构建 CSS
这可能涉及将 CSS 关注点分离到不同的文件中（layout.css、colors.css 等）。这也可能涉及将单个 CSS 文件清楚地划分为沿相同行的清晰部分。-
尽可能具体
选择器具有不同的权重。基于 ID 的选择器比基于类的选择器更具体。链式选择器（例如body div#container div#content p）确实非常具体。开始时尽可能具体，即使您看起来过于具体。以后很容易通过删除一个而使另一个不那么具体来将两个非常具体的样式定义合并在一起。
具有松散特异性的样式定义可能会以不明显或不明显的方式针对您不打算使用的元素。我认为这是 CSS 受挫最常见的原因（“为什么
div不允许我设置上边距？”） -
始终指定您希望为给定定义应用的每一种样式
例如，如果您希望所有段落都具有粉红色文本，请将文本颜色设置为粉红色，并设置边距/填充/背景颜色/字体等。不要依赖浏览器默认值来适当地保持一致。当然，对于最常用的元素，主要浏览器倾向于使用非常相似的默认样式，如果不完全相同的话。
如果您自己设置所有相关样式，您就会知道最终结果应该是什么。
如果您只设置那些最明显的样式，最终结果将（很可能）是浏览器默认值和您的样式的组合。这最终会在某个时候抓住你。我认为这是导致 CSS 受挫的第二大常见原因。 使用
ids 设置独特元素的样式
将id属性应用于将以任何方式与之交互的任何唯一元素通常是一个好主意。对于 CSS，这将使您更轻松地应用适当的特定样式。在唯一页面上使用
id
在样式和布局上与大多数页面（主页、搜索结果、404）有显着差异的页面应该在body元素上有一个id。这为您提供了所需的特殊性，以确保您谨慎的主页样式不会受到您稍后应用于某些内部内容页面的样式的影响。
【讨论】：
漂亮的编码风格 VS 网站速度
我一直在处理非常庞大的 CSS 文件，并发现了一些我以前从未读过的非常有趣的东西。
@import
一件事是使用@import。这实际上是一个瓶颈 - 通过完全不使用 @import，该网站变得更加活泼。
#every .style { 一行}
当浏览器读取文档时，它会逐行读取，所以通过从我漂亮的编码风格切换到这个，我完成了两件事；
- 更活泼的网站
- 更少的滚动，更好的概览。为什么？因为我首先向下滚动以找到我要使用的样式，然后它们都在同一行中，沿着这条线滚动你的眼睛以找到你正在寻找的东西并不难。
【讨论】：
-
我无法想象在现代浏览器中，将类放在一行中会获得如此多的性能优势；你能举例说明你看到了多少性能提升吗？我更喜欢格式良好的代码而不是紧凑的代码，即使是为了适度的性能提升。
-
是的，一切都在一条线上，没有换行，设计的整体结构变得更加明显。
【讨论】：
当我在 CSS 中编码时：
- 在第一部分我写了类和 id
- 在最后一部分中，我编写了通用元素（p、字体等），因为类和 id 对继承更重要
- 如果我想要使用 IE 或 MoSE 浏览器的特定行为，我会写评论
你可以在CSS Zen Garden看到一些例子
通常我会在其他元素上插入最重要的元素：如果有
p.important{/*features of a class*/}
p {/*features of a general element */}
阅读 CSS 文件我知道关于大多数特殊元素之前的格式规则，在关于大多数一般元素的规则之后。
这是Java编程的一种习惯。
【讨论】：
-
我实际上认为这与你应该如何构造完全相反，原因完全相同：具有更多特异性的类和 id 意味着标签将具有更多 效果，因此更多对继承很重要
按字母顺序放置您的 css 规则（例如：“color: red;”），并按照它们在标记中出现的顺序放置您的选择器（例如：“div { color: red; }”）。将结构代码与皮肤分开。
【讨论】：
根据我曾经编写过很长的 CSS 样式表的经验。现在我的样式表通常是半页。
所以保持简单（KISS），基于行（greppable）并保持紧凑（使用字体：而不是字体大小等）。
另外，我强烈建议使用CSSlint 检查您的代码是否有毛病。
【讨论】：
-
优点特别是紧凑
-
我也认为这是一个好点。但它不符合@annakata 对大括号样式的回答，也与 Jon Cram 关于始终指定您希望为给定定义申请的每一种样式 的观点相悖
可能有负载。在我们的工作中，我们使用以下内容：
/* =div a comment about my div */
div#mydiv {
border:1px solid #000;
}
=div 允许我们使用搜索功能搜索所有 div 元素。不过还有很多，我过去使用过很多不同的变体。
【讨论】：
-
你用什么样的 cmets 做 css ？
除了其他人所说的，请记住 C 代表“级联”，即子元素继承自顶级元素。听起来简单直接。但我经常看到包含冗余声明的 CSS 文件，例如用于字体样式。这使得 CSS 更加复杂且难以维护。
因此，在向 CSS 中添加内容之前，请确保它不是多余的，即检查父元素并从子元素中删除多余的声明。
鉴于此，您应该以某种方式组织 CSS，以便首先提及高级元素（如 body 类的声明），最后提及更专业的元素。
【讨论】：
这也可能会有所帮助，一些技巧可以让您的 CSS 样式保持干燥 - 如“不要重复自己”link text
【讨论】：
我强烈建议您查看 Less：http://lesscss.org
虽然不是一个真正的标准，但它最近获得了很大的动力。 Less 是在浏览器中运行的 css 扩展，将变量和函数带入语言中，因此允许模板化。
【讨论】：