web前端编码规范/编码习惯
一、CSS文件命名规范
全局样式 | 布局、版面 | 字体样式 | 按钮样式 | 主要的 | 专栏 | 主题 | 模块 | 基本共用 |
---|---|---|---|---|---|---|---|---|
global.css | layout.css | font.css | button.css | master.css | columns.css | themes.css | module.css | base.css |
二、页面结构命名
内容/容器 | 页头 | 页面主体 | 模块头 | 页尾 | 栏目 | 模块 | 左右中 | 模块主题内容容器 | 页面外围控制整体布局宽度 |
---|---|---|---|---|---|---|---|---|---|
content/container | header | main | hd | footer | column | mod | left right center | md | wrapper |
三、导航命名
导航 | 主导航 | 子导航 | 顶导航 | 边导航 | 左导航 | 右导航 | 菜单 | 子菜单 | 摘要 |
---|---|---|---|---|---|---|---|---|---|
nav | main nav | sub nav | top nav | sidebar | left side bar | right side bar | menu | submenu | summary |
四、功能命名
标志 | 广告 | 登陆 | 登录条 | 注册 | 搜索 | 功能区 | 栏目标题 | 加入 | 状态 |
---|---|---|---|---|---|---|---|---|---|
logo | banner | login | login-bar | register | search | shop | title | join-us | status |
按钮 | 滚动 | 标签页 | 文章列表 | 提示信息 | 当前的 | 小技巧 | 图标 | 注释 | 指南 |
btn | scroll | tab | list | msg | current | tips | icon | note | guild |
服务 | 热点 | 新闻 | 下载 | 投票 | 合作伙伴 | 友情链接 | 版权 | 活动元素 | 未活动元素 |
service | hot | news | download | vote | partner | friend-link | copyright | active | normal |
(个人有个人的书写规范,不做强制要求)
五、CSS书写规范-性能优化方案
1、禁止class
与 id
重名
2、书写顺序:布局定位属性–>自身属性–>文本属性–>其他属性
.box{
/* 布局定位类 */
float:left;
/* 自身属性 */
width:100px;
height:100px;
/* 文本类 */
text-align:left;
/* 其他属性 */
background:red;
}
六、HTML书写规范
在属性上,使用双引号,不要使用单引号。
HTML 属性应该按照特定的顺序出现以保证易读性。
1. class
2. id, name
3. data-*
4. src, for, type, href, value
5. title, alt
6. role, aria-*
Classes
是为高可复用组件设计的,所以他们处在第一位。Ids
更加具体而且应该尽量少使用(例如, 页内书签),所以他们处在第二位。
Boolean
属性指不需要声明取值的属性。XHTML
需要每个属性声明取值,但是 HTML5
并不需要。简而言之,不要为 Boolean
属性添加取值。
在JavaScript
文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。
七、CSS语法
- 使用组合选择器时,保持每个独立的选择器占用一行。
- 为了代码的易读性,在每个声明的左括号前增加一个空格。
- 声明块的右括号应该另起一行。
- 每条声明应该只占用一行来保证错误报告更加准确。
- 所有声明应该以分号结尾。虽然最后一条声明后的分号是可选的,但是如果没有他,你的代码会更容易出错。
- 逗号分隔的取值,都应该在逗号之后增加一个空格。
- 不要在颜色值
rgb()
,rgba()
,hsl()
,hsla()
, 和rect()
中增加空格 - 不要在属性取值或者颜色参数前面添加不必要的
0
(比如,使用.5
替代0.5
和-.5px
替代0.5px
)。 - 所有的十六进制值都应该使用小写字母,例如
#fff
。因为小写字母有更多样的外形,在浏览文档时,他们能够更轻松的被区分开来。 - 尽可能使用短的十六进制数值,例如使用
#fff
替代#ffffff
。 - 为选择器中得属性取值添加引号,例如
input[type="text"]
。 他们只在某些情况下可有可无,所以都使用引号可以增加一致性。 - 不要为
0
指明单位,比如使用margin: 0;
而不是margin: 0px;
。
八、CSS声明顺序
相关的属性声明应该以下面的顺序分组处理:
Positioning
Box model
盒模型Typographic
排版Visual
外观
Positioning
处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。盒模型紧跟其后,因为他决定了一个组件的大小和位置。其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响,所以他们排在后面。
例如:
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
九、媒体查询位置
尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。
十、前缀属性
当使用厂商前缀属性时,通过缩进使取值垂直对齐以便多行编辑。
例如:
/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
十一、属性简写
坚持限制属性取值简写的使用,属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:
padding
margin
font
background
border
border-radius
大多数情况下,我们并不需要设置属性简写中包含的所有值。例如,HTML
头部只设置上下的 margin
,所以如果需要,只设置这两个值。过度使用属性简写往往会导致更混乱的代码,其中包含不必要的重写和意想不到的副作用。
十二、LESS 和 SASS 中的运算符
为了提高代码可读性,在数学运算外增加括号,并且在取值,变量和运算符之间增加空格。
例如:
// Bad example
.element {
margin: 10px 0 @variable*2 10px;
}
// Good example
.element {
margin: 10px 0 (@variable * 2) 10px;
}
十三、Class 命名
- 保持 Class 命名为全小写,可以使用短划线(不要使用下划线和
camelCase
命名)。短划线应该作为相关类的自然间断。(例如,.btn
和.btn-danger
)。 - 避免过度使用简写。
.btn
可以很好地描述button
,但是.s
不能代表任何元素。 - Class 的命名应该尽量短,也要尽量明确。
- 使用有意义的名称;使用结构化或者作用目标相关,而不是抽象的名称。
- 命名时使用最近的父节点或者父
class
作为前缀。 - 使用
.js-* classes
来表示行为(相对于样式),但是不要在CSS
中定义这些classes
。