Web开发风格指导原则

转载自 http://www.chromium.org/developers/web-development-style-guide

Chromium中使用Javascriot，CSS和HTML作为前端实现。这被称为WebUI。 开发者需要遵循以下原则。

（译者注：这是前端开发都应该尊重的原则)

分离展示和内容

当你设计一个WebUI程序时，你应该将内容分为内容(HTML)和风格(CSS)，控制逻辑行为的内容(JS)。

一种较为清晰的方法是使用MVC原则：

MVC Component	Web Component
Model	HTML
View	CSS
Controller	JS

分离 内容 (HTML), 展示 (CSS) 和逻辑(JS) 到不同的文件中.

javascript

参阅 Google JavaScript Style Guide (注意其中关于浏览器兼容部分对Chrome WebUI不适用)

你可以使用 Closure linter来处理一些风格错误。

• 使用 $('element-id')代替 document.getElementById
• 使用单引号代替双引号来扩住所有字符串
• 对单个逻辑块不使用括号
• 不要使用const关键字，而使用var
  •   详细参阅 issue
• 使用ES5的 getters和setters
  •  在JSDoc声明中使用 @type(替代@return or @param)
• 对@-directives参见Annotating JavaScript for the Closure Compiler
• 使用@override 替代 @inheritDoc.

CSS

参阅Google HTML/CSS style guide (同样，浏览器兼容部分对chrome WebUI不适用)

基本的


.raw-button,
.raw-button:hover,
.raw-button:active {
 -webkit-box-shadow: none;
 background-color: rgb(253, 123, 42);
 background-repeat: no-repeat;
 border: none;
 min-width: 0;
 padding: 1px 6px;
}




• 一个选择子一行
• 起始大括号要在最后一个选择子的末尾
• 每项声明前空两个，一项声明一行，最后以分号结束
• 尽可能使用段声明
• 按照字母顺序排列属性
  •   -webkit属性应该放在最上面，按照字母顺序排列
• 冒号后插入空格，分离属性和值
• 不要为一个元素创建一个类，使用ID来代替
• 对于长度值，不要给出0单位的值，如,  left: 0px;而应该是 left : 0;
• 例外：在一组百分比列表中应该使用0%，如hsl(5, 0%, 90%) 或者在 @keyframe 规则中，如
• @-webkit-keyframe animation-name {
  •   0% { /* beginning of animation */ }
•   100% { /* end of animation */ }
• }
• 字符串一律使用单引号
• 类的名字使用'-'分割
• 时间长度若小于1秒，使用毫秒单位，如
  • -webkit-transition: all 0.2s;
  • -webkit-transition: all 200ms;
• 对于pseudo-element，使用两个冒号，如::after, ::before, ::-webkit-scrollbar

颜色

• 尽可能使用颜色名（如red)来提高可读性
• 使用rgb()和rgba()，传递十进制值来替代16进制

URLs

在URL中不要嵌入数据 .

• • background-image: url(data:image/jpeg;base64,...);
  • background-image: url('file/in/the/source/tree.jpg');

RTL

.suboption {
 -webkit-margin-start: 16px;
}

#save-button {
 color: #fff;
 left: 10px;
}

html[dir='rtl'] #save-button {
 right: 10px;
}




• For the properties that WebKit currently supports, use the RTL-friendly properties:
  • x-left -> -webkit-x-start
  • x-right -> -webkit-x-end
  • Where x is either margin, padding or border
  • text-align: left -> text-align: start
  • text-align: right -> text-align: end
  • left/right: <length> when positioning will use the [dir] of the page, so if you set both left will apply when [dir='ltr'].
• For properties that do not have RTL-friendly alternatives, use html[dir='rtl'] to specify the RTL version of said property.

HTML

See the Google HTML/CSS style guide.

Head

<!DOCTYPE HTML>
<html i18n-values="dir:textdirection">
<head>
 <meta charset="utf-8">
 <title i18n-content="myFeatureTitle"></title>
 <link rel="icon" href="feature.png">
 <link rel="stylesheet" href="feature.css">
 <script src="feature.js"></script>
</head>
…
</html>

• Specify <!DOCTYPE HTML>.
• Set the dir attribute of the html element to the localized ‘textdirection’ value.
• Specify the charset, UTF-8.
• Link in image, icon and stylesheet resources.
  • Do not add inline styling to elements.
• Include the appropriate JS scripts.
  • Do not add JS to element event handlers.

Body

<h3 i18n-content="autofillAddresses"></h3>
<div class="settings-list">
 <list id="address-list"></list>
 <div>
   <button id="autofill-add-address" i18n-content="autofillAddAddress"></button>
 </div>
</div>
<if expr="pp_ifdef('chromeos')">
 <a href=" https://www.google.com/support/chromeos/bin/answer.py?answer=142893 "
     target="_blank" i18n-content="helpButton"></a>
</if>

• Element IDs use dash-form.
• For i18n-content use javaScriptCase.
• Adhere to the 80-column limit.
  • Indent 4 spaces when wrapping a previous line.
  • If you linebreak after an opening tag you must linebreak before the closing tag.
• Add 2 space indentation in each new block.
• Localize all strings using i18n-content attribute.
• Use double-quotes instead of single-quotes for all attributes.
• Do not close single tags.
  • <input type="radio" />
• Use the button element instead of <input type="button">.
• Do not use <br>; place blocking elements (<div>) as appropriate.
• Do not use spacing-only divs; set the margins on the surrounding elements.
• Only use <table> elements when displaying tabular data.