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.


你可能感兴趣的:(Web开发风格指导原则)