CSS编码风格

Question

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

Answer 1

这是一个很好的:

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

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

Answer 2

我同意大多数安德鲁野兔的链接点,但我强烈相信

.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挫折的第二大常见原因.

• 使用ids来设置独特元素
  的样式将id属性应用于任何将以任何方式与之交互的唯一元素通常是个好主意.对于CSS,这将让您更轻松地应用适当的特定样式.

• 使用id一个独特的页面
  的页面的风格和布局的大部分(主页,搜索结果404)显著不同应该有一个id上body元素.这为您提供了所需的特性,以确保您的谨慎主页样式不会受到您稍后应用于某个内部内容页面的样式的影响.