写点什么

前端代码书写规范

发布于: 2021 年 01 月 12 日
前端代码书写规范

规范的命名能够极大地提高代码的可读性,并且显得代码更加专业。以下是一些常见的命名规范。

一、常用命名规范

(一)常用命名

内容:content/container 导航:nav 侧栏:sidebar 栏目:column

标志:logo 页面主体:main 广告:banner 热点:hot 新闻:news

下载:download 子导航:subnav 菜单:menu 搜索:search 页脚:footer

滚动:scroll 版权:copyright 友情链接:friendlink 子菜单:submenu 内容:content 标签页:tab 文章列表:list 注册:regsiter 提示信息:msg 小技巧:tips

加入:joinus 栏目标题:title 指南:guide 服务:service 状态:status

投票:vote 尾:footer 合作伙伴:partner 登录条:loginbar

页面外围控制整体布局宽度:wrapper 左右中:left right center   

(二)注释的写法:

/* Footer */ 内容区 /* End Footer */

(三)id 的命名:

1)页面结构

容器: container 页头:header 内容:content/container 页面主体:main

页尾:footer 导航:nav 侧栏:sidebar 栏目:column 左右中:left right center 页面外围控制整体布局宽度:wrapper

2)导航

导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary

3)功能

标志:logo 广告:banner/ad 登录:login 登录条:loginbar 注册:regsiter

搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标签页:tab 文章列表:list 提示信息:msg 当前的: current

小技巧:tips 图标: icon 注释:note 指南:guide 服务:service 热点:hot

新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link

版权:copyright

(四)class 的命名:

(1)颜色:使用颜色的名称或者 16 进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如 .left { float:left; } .bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如 .barnews { } .barproduct { }

注意事项: 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写,除非一看就明白的单词.

主要的 master.css 模块 module.css 基本共用 base.css 主题 themes.css 专栏 columns.css 打印 print.css 文字 font.css 表单 forms.css 补丁 mend.css 布局,版面 layout.css

二、CSS 属性书写顺序

CSS 规范的书写顺序能够极大地提高代码可读性。建议按照以下顺序书写 CSS 代码块:

1、布局定位属性,如:

display、position、float、clear、visibility、overflow 等
复制代码

2、自身属性,如:

width、height、margin、padding、border、background 等
复制代码

3、文本属性,如:

color、font、text-decoration、text-align、vertical-align、white-space、break-word 等
复制代码

4、其他属性,如:

content、cursor、border-radius、box-shadow、text-shadow、background:liner-gradient 等
复制代码


发布于: 2021 年 01 月 12 日阅读数: 52
用户头像

所思在远道 2020.08.19 加入

一只慢慢进步的小白

评论

发布
暂无评论
前端代码书写规范