Web开发风格指导原则

最新推荐文章于 2023-03-09 12:09:23 发布

漂流的代码

最新推荐文章于 2023-03-09 12:09:23 发布

阅读量2.2k

点赞数

分类专栏： webikit UI

UI 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

webikit

15 篇文章 0 订阅

订阅专栏

转载自 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.

漂流的代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web开发风格指导原则

转载自 http://www.chromium.org/developers/web-development-style-guideChromium中使用Javascriot，CSS和HTML作为前端实现。这被称为WebUI。开发者需要遵循以下原则。（译者注：这是前端开发都应该尊重的原则)分离展示和内容当你设计一个WebUI程序时，你应该将内容分为内容(HTML)
复制链接

扫一扫