CSS代码规范

由 alexyao 提交于 26 January 2013

最后更新2012年1月7日, 由alanburke创建于2008年8月31日. 编辑者:JohnAlbin,sun, jhodgdon, aspilicious.中文翻译:南文子. 登陆进行编辑此页面.

原文链接:http://drupal.org/node/302199

状态
草稿. Drupal 核心 (HEAD)应该追随最新的约定版本.(译者加: 原文有HEAD这个词,因版本一直更新而头痛? 我没太理解^_^)
链接
CSS 编码规范问题 Drupal 核心"标记"组件问题 groups.drupal.org中的早期讨论 由Nick Lewis提出的最初建议

书写有效的CSS

所有CSS代码应该是有效的CSS, 比较好的选择是 CSS 2.1. 假如CSS3的用法是合法化的并且遵循平稳退化／渐进增强(graceful degradation / progressive enhancement)原则,那么CSS 3.0也是可以接受的.

这些规范都使用简洁术语:

selector {
  property: value;
}
选择器: {
  属性: 值;
}

选择器

选择器应该

  • 在单独的一行上
  • 在前一个选择器后面有一个空格
  • 以前大括号结尾
  • 以单独一行的不用缩排的后大括号闭合
.book-navigation .page-next {
}
.book-navigation .page-previous {
}

.book-admin-form {
}

在群组间,区域或多个逻辑相关样式选择器块之间需要空一行.

多个(Multiple)选择器

多个选择器的每一项应该是单独成一行,并且每个逗号后面不留空格:

#forum td.posts,
#forum td.topics,
#forum td.replies,
#forum td.pager {

属性Properties

所有的属性都应该在前大括号的下面一行. 每个属性应该:

  • 单独占一行
  • 缩进两个空格,如范例, 不使用制表符tab
  • 在属性名后和属性值前有一个空格
  • 以分号结尾semi-colon
#forum .description {
  color: #efefef;
  font-size: 0.9em;
  margin: 0.5em;
}

属性按字母顺序排列

多个属性应该按字母的顺序列出.

不好:

body {
  font-weight: normal;
  background: #000;
  font-family: helvetica, sans-serif;
  color: #FFF;
}

好:

body {
  background: #000;
  color: #fff;
  font-family: helvetica, sans-serif;
  font-weight: normal;
}

颜色(特别是十六进制值hex values)最好是小写.

属性有多个值时

在属性有多个值的地方,每个值应该以空格分开.

  font-family: helvetica, sans-serif;

CSS3的属性, 第三方前缀(vendor prefixes), 渐进增强(progressive enhancement)

.progressive-enhancement {
  background: #000 none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5000000,endColorstr=#E5000000);
  background-color: rgba(0, 0, 0, 0.9);
}
.progressive-prefixes {
  background-color: #003471;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
  background-image: -webkit-linear-gradient(top, #003471, #448CCB);
  background-image: -moz-linear-gradient(top, #003471, #448CCB);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00003471,endColorstr=#00448CCB);
  background-image: -ms-linear-gradient(top, #003471, #448CCB);
  background-image: -o-linear-gradient(top, #003471, #448CCB);
  background-image: linear-gradient(to bottom, #003471, #448CCB);
}
.vendor-prefixes {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 3px 20px #000;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10');
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10')";
  -webkit-box-shadow: 0 3px 20px #000;
  box-shadow: 0 3px 20px #000;
}
  1. 所有的属性按字母顺序排列
  2. 将特有的第三方属性(vendor-specific)以他们各自的标准CSS3属性名进行群组.
  3. 第三方特定属性按字母顺序排列(vendor-specific properties).
  4. 第三方特定属性(vendor-specific properties)声明在标准属性(standard properties)前.
  5. 把可能不支持的值声明在已知的被支持的值之后(渐进增强progressive enhancement). (see CSS spec细则)

filter:属性特例should be grouped with 应该它之前以ms-filter:属性分组并排序(如上例).

当声明的CSS3属性还没有达到被推荐的标准状态(亦称:定案)前使用第三方特定扩展可能会引起浏览器矛盾. 不要理所当然的认为-vendor-xyz-property属性和最终版xyz-property是一样的.

推荐避免使用那些不被CSS3标准支持的第三方特定扩展.

注释

通常,所有的注释都要遵循drupal的通用Doxygen格式化约定 , 用以同Drupal的其它代码库保持一致. 如果在那些通用约定不能应用的区域, 我们会求助于CSSDoc 语法 (草案).

根据PHP代码规范,大块的注释应该遵循如下格式, 来描述注释下面的代码区.

/**
 * Documentation here.
 */

更多的通用注释语法细节可以查看这个文档: Doxygen 格式化约定.

比较短的行内注释可以加到属性的后面, 注释前加一空格.

  background-position: 0.2em 0.2em; /* LTR */
  padding-left: 2em; /* LTR */

Right-To-Left从右向左(译者加:做为天朝上国阅读顺序很正常下面不用看了)

Drupal supports conditional loading of CSS files with specific override rules for right-to-left languages. For a module, the override rule should be defined in a file named <module>-rtl.css (e.g., node-rtl.css). For a theme, the override rule should be defined in a file named style-rtl.css. The rule that is overridden should be commented in the default CSS rule.

From node-rtl.css:

#node-admin-buttons {
  clear: left;
  float: right;
  margin-left: 0;
  margin-right: 0.5em;
}

Rules in node.css which will be overridden if the rtl.css file is loaded:

#node-admin-buttons {
  clear: right; /* LTR */
  float: left; /* LTR */
  margin-left: 0.5em; /* LTR */
}

See also: http://drupal.org/node/132442#language-rtl

As a rule of thumb, add a /* LTR */comment in your style:

  • when you use the keywords, 'left' or 'right' in a property, e.g. float: left;
  • where you use unequal margin, padding or borders on the sides of a box, e.g., 
    margin-left: 1em;
margin-right: 2em;
  • where you specify the direction of the language, e.g. direction: ltr;

 

分类

最新话题