WEB网站开发前端命名及书写规范小结
1. 书写规范
1.1 项目命名规范
项目:用项目对应的英文单词命名
文件及文件夹:
全部英文小写字母,可以使用中线,不可出现其他字符,如login,my-order
调用 `/lib`里面的文件需包含版本号,压缩文件需包含`min`关键词,其他插件则可不包含,如:`/lib/jquery.1.9.1.js`
1.2 格式&编码
文本文件: `.xxx` UTF-8_\(无BOM\)_ 编码
图片文件: `.png` _(PNG-24)_ `.jpg` _(压缩率8-12)_
动态图片: `.gif`
压缩文件: `.tar.gz` `.zip``.rar`
2. CSS 规范
2.1 CSS 命名规范
所有的命名用小写的英文单词
不使用简单的方位词直接命名,如"left","bottom"
不缩写单词,除非一看就明白的单词
长名称或词组可以使用下划线作为连接符
避免选择器嵌套层级过多,少于3级
不要随意使用id,id应该按需使用,而不能滥用
使用CSS缩写属性 ,比如padding:0 10px 5px 5px等等,这样精简代码同时又能提高用户的阅读体验。
命名参考如下:
CSS样式命名 | 说明 |
---|---|
网页公共命名 | |
wrapper | 页面外围控制整体布局宽度 |
container或content | 容器,用于最外层 |
layout | 布局 |
head, header | 页头部分 |
foot, footer | 页脚部分 |
nav | 主导航 |
sub_nav | 二级导航 |
menu | 菜单 |
sub_menu | 子菜单 |
side_bar | 侧栏 |
sidebar_l, sidebar_r | 左边栏或右边栏 |
main | 页面主体 |
tag | 标签 |
msg message | 提示信息 |
tips | 小技巧 |
vote | 投票 |
friendlink | 友情链接 |
title | 标题 |
summary | 摘要 |
login_bar | 登录条 |
search_input | 搜索输入框 |
hot | 热门热点 |
search | 搜索 |
search_output | 搜索输出和搜索结果相似 |
search_bar | 搜索条 |
search_results | 搜索结果 |
copyright | 版权信息 |
branding | 商标 |
logo | 网站LOGO标志 |
site_info | 网站信息 |
site_info_legal | 法律声明 |
site_info_credits | 信誉 |
join_us | 加入我们 |
partner | 合作伙伴 |
service | 服务 |
regsiter | 注册 |
arr arrow | 箭头 |
guild | 指南 |
site_map | 网站地图 |
list | 列表 |
home_page | 首页 |
sub_page | 二级页面子页面 |
tool, toolbar | 工具条 |
drop | 下拉 |
dorp_menu | 下拉菜单 |
status | 状态 |
scroll | 滚动 |
tab | 标签页 |
left right center | 居左、中、右 |
news | 新闻 |
download | 下载 |
banner | 广告条(顶部广告条) |
2.2 CSS 书写规范
向"无ID,无层级,无标签"准则靠拢,可有效提高重用性,减小文件大小,提升渲染效率
2.3 CSS 注释格式
用来区分页面的注释,如/******************************************产品中心****************************************/
模块的注释,如/*首页导航栏*/
2.4 CSS各属性的排列顺序:不做硬性要求
Positioning(定位,如position,top,z-index)
Box model(盒模型,如display,box-sizing,width,border)
Typographic(排版,如font,line-height,text-align)
Visual(视觉,如background,color,opacity)
Other(其他,如cursor)
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型决定了组件的尺寸和位置,因此排在第二位。 其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。
2.5 CSS格式化
使用不换行方式书写,增加书写速度
.box{background: none repeat scroll 0 0 transparent;bottom: 11px;position: relative;width: 22px;z-index: 33;}
2.6 CSS字体单位
px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
rem也是相对长度单位,但相对的只是HTML根元素。
vw代表视窗(Viewport)的宽度为1%,如果视窗宽度为1000px,那么50vw = 500px
vh代表窗口高度的百分,如果视窗高度为800px,那么50vh = 400px
公司项目使用时注意事项:现有项目都是使用px作为单位,现推荐使用rem,vw,vh作为单位
3. JS 规范
3.1 JS命名规范
3.1.1 JS 变量命名
命名方法:小驼峰式命名
命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)
命名建议:尽量在变量名字中体现所属类型,如:length、count等表示数字类型;而包含name、title表示为字符串类型。
示例
// 好的命名方式var maxCount = 10;var tableTitle = 'LoginTable';// 不好的命名方式var setCount = 10;var getTitle = 'LoginTable';
3.1.2 JS 函数命名
命名方法:小驼峰式命名法
命名规范:前缀应当为动词
命名建议:可使用常见动词约定
动词 | 含义 | 返回值 |
can | 判断是否可执行某个动作(权限) | 函数返回一个布尔值。true:可执行;false:不可执行 |
has | 判断是否含有某个值 | 函数返回一个布尔值。true:含有此值;false:不含有此值 |
is | 判断是否为某个值 | 函数返回一个布尔值。true:为某个值;false:不为某个值 |
get | 获取某个值 | 函数返回一个非布尔值 |
set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象 |
load | 加载某些数据 | 无返回值或者返回是否加载完成的结果 |
3.1.3 JS 常量命名
命名方法:名称全部大写
命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词
示例
var MAX_COUNT = 10;var URL = 'https://blog.csdn.net/u014789708';
3.1.4 JS 文件命名
使用短线(-)或句点(.)作为分隔符号,推荐使用句点,最好使用小写英文字符,不要使用其他符号和扩展字符,如 jQuery UI 1.9.0 的源文件可命名为"jquery-ui-1.9.0.js"
使用 .js 扩展名,这个扩展名的兼容性最好。其实任何扩展名都可以,只要是 text 类型、编码正确即可
用句点分隔表示名称中的从属关系,范围大的在前,如jQuery 的表单插件 Form既可以命名为jquery.form.js
3.2 js 注释格式
使用多行注释,以/*开头,*/结尾
3.3 js 注意事项
书写格式
JS 换行缩进:采用tab(打散为4个空格)
结束行需添加分号`;`
性能
尽量选用局部变量而不是全局变量
尽量使用链式写法
尽量减少DOM调用
将js脚本放到页面底部
使用jquery的data来存取数据,减少对dom的操作
使用on方法绑定事件,这是jquery的推荐使用
选择器的选择:尽量不用标签选择器,能用ID选择器的就不用class选择器
4. HTML 规范
4.1 标签使用规范
尽量减少标签层级
双标签必须闭合,单标签用斜线闭合
HTML第一行统一使用HTML5标准<!DOCTYPE html>
一律统一标签结尾斜杠的书写形式:`<br />` `<hr />` 注意之间空格
避免使用已过时标签,如:`<font>` `<frame>` `<s>`
`<img>`标签默认缺省格式:`<img src="#" alt="缺省时文字" />`
`<a>`标签缺省格式:`<a href="#" title="链接名称">xxx</>` 注:`target="_blank"` 根据需求决定
style、link、script可省略type属性,因为 text/css 和 text/javascript 分别是他们的默认值
4.2 HTML注释
<!--内容-->
<div class="content"><p>content</p>
</div>
4.3 注意事项
手机端的自适应布局尽量采用弹性布局,而不是百分比
`css`文件都 置于头部
HTML换行缩进:采用 tab空格
其他效果`js`及`统计代码` 文件置于尾部
手机端的页面都按750px来做,显示效果按375px
5. Image 规范
5.1 图片规范
图片大小:切图时使用web格式保存,减小图片大小
图片尺寸:一律采用整数,如20X20,50X50
图片合并:小图片一律要合并,并保存对应的psd文件,以便后期修改
WEB网站开发前端命名及书写规范小结相关推荐
- springmvc web网站开发上传视频到远程服务器解决方案
springmvc web网站开发上传视频到远程服务器解决方案!近期在给学校做官方网站设计时,有一个业务需求是,后台要增加一个视频管理模块,管理员在后台可以把本地硬盘剪辑好的视频文件,上传到远程服务器 ...
- 用python做网站开发的课程_腾讯课堂:Flask Python Web 网站开发
大家好,欢迎大家学习优品课堂出品的Python完全零基础入我们精讲的系列教程这节课 我们来看第一个,我们先了解一下计算机常识,这节课我们来介绍.计算机的概念和组成,那不仅是开发人员作为普通用户电脑的使 ...
- 好用的手机Web网站开发工具:Mobirise for Mac
Mobirise mac版是一个用户友好且直观的手机Web网站开发工具,可以为您提供正确的工具和模板,使您能够尽可能轻松地构建网站,而无需编写一行代码.只需点击几下鼠标,即可为您提供用户友好的环境以及 ...
- 强力推荐的18种CSS命名和书写规范
选择器的命名规范 1.模块化命名 例如: 与布局相关的样式以"g"为开头.如"g-content"和"g-header": 与挂钩相关的样式 ...
- Java Web 高性能开发,前端的高性能
Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...
- php$paty,2020年Web网站开发-中国大学mooc-题库零氪
网站后台技术 项目一 PHP网站开发环境搭建 尝试开发一个页面,使用echo语句输出字符串"恭喜您走上PHP的编程之路!". 1.尝试开发一个页面,使用echo语句输出字符串&qu ...
- C++命名规则书写规范
常见命名法: 匈牙利命名法:基本原则是:变量名=属性+类型+对象描述\color{blue}{变量名=属性+类型+对象描述}变量名=属性+类型+对象描述,其中每一对象的名称都要求有明确含义,可以取对象 ...
- Web网站开发中,Cookie是什么?
你好,是我琉忆. 今天我们讲一讲什么是Cookie,怎么理解Cookie. 在我们Web开发中,例如要想长久的存储一个用户的信息,到底需要使用什么样的一个方式进行储存?我们一起来看看. 1.Cooki ...
- 企业中书写css,web前端开发企业级CSS常用命名,书写规范总结(示例代码)
(1)页面结构 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column ...
- Django网站开发 01.Web网站与前端HTML标签
浏览器交互流程 1.快速开发网站 在Pycharm控制台输入: pip install flask 新建一个web.py,编写一个基础网站: web.py from flask import Flas ...
最新文章
- Python 2大限来了!113天后自生自灭,官方不再维护更新 | 附升级指南
- 开花 (Standard IO)
- (~解题报告~)L1-019 谁先倒 (15分) ——17行代码AC
- 准备重新回归信息安全产业
- Angular 动态控制 aside 标签显示和隐藏的一个例子
- oracle 韩思捷_Oracle数据库技术服务案例精选
- 【转】Python可变长度的函数参数
- mysql配置多个磁盘_MySQL多实例配置(两)
- Java ListIterator 与 Iterator 异同
- mysql数据库导入导出sql文件
- 【已解决】NC65收款合同查询数据最多只显示5000条
- 盘点 | 2018年IoT蓄势待发
- 蓝桥杯单片机温度传感器DS18B20(基于STC15F2K60S2)
- java 主板序列号_Java获得硬盘和主板的序列号
- 使用mqtt.fx连接腾讯云IoT Cloud——超详细
- 中国大学排名是怎样的?
- cmt obm odm 代工模式oem_OEM、ODM、OBM、OPM概念,作用与区别
- linux异常死机日志,Linux常见死机原因
- CDA I级学习 - 漏斗模型
- lottie实现动画效果
热门文章
- oracle将奖金和工资相加,工资和年终奖一起发,是应该分别计税再相加,还是直接相加再一起按奖金计税?...
- JAVA毕业设计家政服务平台计算机源码+lw文档+系统+调试部署+数据库
- Linux - 进阶 NFS 服务器 账户的映射问题 exportfs命令
- 使用python将字符拼成图画
- OpenLayers入门,OpenLayers加载船讯网航海地图
- Oracle 存储过程 case when then用法
- 老黄的PHP学习笔记之一
- (通达信)公式源码导入和使用方法
- 发布订阅/回调模型的核心技术——观察者模式复习总结
- 在服务器上挂程序用什么系统好,两台服务器,一个放程序的,一个放数据库换季,redis装在哪个服务器上好...