一些网上的前端规范

最新推荐文章于 2021-12-24 19:14:12 发布

颓废的四哥

最新推荐文章于 2021-12-24 19:14:12 发布

阅读量171

点赞数

文章标签：杂记

1.1 文件命名规则

【使用场景：在新建网页，图片，脚本，css文件时，根据此规则给文件命名并放入指定位置】

文件名称统一用小写的英文字母，数字和下划线的组合，其中不得包含汉字空格和特殊字符。命名原则的指导思想：
一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，
二是当我们在文件夹中使用“按名称排列”的命令时，同一种大类的文件能够排列在一起，以便我们查找，修改，替换，计算负载量等操作。

1.1.1 HTML命名规则

索引文件统一使用index.html，index.asp，index.htm文件名。
各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：

子页	命名
关于我们	\aboutus
信息反馈	\feedback

如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音首字母表示。
每一个目录中应该包含一个缺省的html文件，文件名统一用index.html，index.htm，index.asp。

1.1.2 图片的命名规则

图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质。
例如：广告，标志，菜单，按钮等。

放置在页面顶部的广告，装饰图案等长方形的图片取名：banner
标志性图片取名为：logo
在页面上位置不固定并且带有链接的小图片取名为：button
在页面上某一个位置连续出现，性质相同的链接栏目的图片取名：menu
装饰用的图片取名：pic
不带链接表示标题的图片取名：title

范例：banner_sohu.gif banner_sina.gif menu_aboutus.gif

1.1.3 javascript的命名规则

一般使用脚本功能的英文小写缩写命名。
例如：广告条的JavaScript文件名为ad.js 弹出窗口的JavaScript文件名为pop.js

1.1.4 动态语言文件命名规则

以性质_描述，描述可以有多个单侧，用 “ _ ”隔开，性质一般是该页面的概要。

1.2 文件存放位置规范

文件夹	说明
flash	存放flash文件
images	存放图片文件
inc	存放include文件
library	存放DW文件
media	存放多媒体文件
script	存放js文件
css	存放css文件

1.3 css书写规范

【使用场景：书写css样式时，根据此规则对ID和class进行命名，并遵循书写规则，避免出现常犯错误，提高效率。】

1.3.1 基本规则

css样式可以细分为3类：重新定义HTML样式，链接状态样式，自定义样式。

重新定义HTML样式为设计师重新定义已有的HTML标签样式，影响全部的被设定标签样式，用于统一网页中某一标签的样式定义。
链接状态样式为设计师对链接不同状态设定特殊样式，影响被使用本样式区域中的链接。该样式写法有两种：a.nav:link(中间无空格)，.nav a:link；第一种只能修饰<a>标签中，第二种可以修饰所有包含<a>标签的其他标签。
样式为设计师自定义的新css样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名.+相应样式效果描述的单词或缩写 例如：“.shadow”，文字样式样式名.no+字号+行距+颜色缩写 例如：“.no12”,”.no12_34”。“.nbo12”类型一般出现在base.css中，只可选用，不可以修改，避免名称含义和实际内容不符。自定义的样式最好用意义命名。

比如重要的新闻高亮显示，有两种写法：
red{color:red};
.important_news{color:red}; //很显然第二种传达的意义更加明确，所以尽量不要用意义不明确的座位自定义命名。
页面内的样式加载必须用链接方式：
<link rel="stylesheet" type="text/css" href="style/style.css">
重新定义的最先，伪类其次，自定义样式最后，便于自己和他人阅读。
一般不允许将样式定义写在标签中（如：style= “color:red”）。
所有装饰性的图片（如背景图），要定义在css中。

1.3.2 注意细则

class与id命名：大的框架命名比如header/footer/wrapper/left/right之类的由设计框架的人统一命名。其他样式名称由小写英文，数字，_ 来组合命名，避免使用中文拼音，尽量使用简易的单词组合；总之，命名要语义化，简明化。
规避class与id重名，不建议使用id选择器。
a. 通过从属写法规避。
b. 取父级元素id/class命名部分名称。
c. 重复使用率高的命名，可加代号加下划线起始，如：i_clear;

css属性书写顺序，建议遵循布局定位属性–>自身属性–>文本属性–>其他属性。此条可根据自身书写习惯书写，但尽量保证同类属性写在一起。

文件夹	说明
布局定位属性	margin，padding，float，clear，position，display，visibility，overflow
自身属性	width，height，background，border
文本属性	font，color，text-align，text-decoration，text-indent，white-space，othertext，content
其他属性	list-style，vertical-align，cursor，z-index，zoom

书写代码前，考虑并提高样式重复使用率。
杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7"/>兼容IE8。
避免兼容性属性的使用，比如text-shadow||css3的相关属性；
减少使用影响性能的属性，比如position：absolute||float；
重要图片加上alt属性，重要的元素和截断的元素加上title;
避免使用!important ,!important优先级最高；
必须为大区块样式添加注释，小区块适量注释；
代码缩进与格式：建议单行书写，可根据自身习惯，后期优化统一处理；
margin，padding，border，font等样式尽可能采用合并写法；

font 的简写对于缩小代码量很有帮助，如果没有定义某个属性值的话，将继承父级元素的定义或使用默认值。

1.3.3 命名规则

页面结构	导航
容器：container/wrap	导航：nav
整体宽度：wrapper	主导航：mainbav/globalnav
页头：header	子导航：subnav
内容：content	顶导航：topnav
页面主题：main	边导航：sidebar
页尾：footer	左导航：leftsidebar
侧栏：sidebar	右导航：rightsidebar
栏目：column	边导航图标：sidebarlcon
中间内容：center	菜单：menu
标题：title	子菜单：submenu

1.4 html书写规范

【使用场景：书写HTML页面时，根据此规则对HTML内容进行补充和完善。】

1.4.1 head区代码规范

head区是指HTML代码的<head></head>之间的内容。

必须加入的标签
1. 网页显示字符集
  简体中文：<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
  繁体中文：<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  英语：<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
2. 搜索关键字（网站类型）
  <meta name="keywords" content="xxx,xxx,xx">
3. 网页css规范
  <link href="../css/style.css" rel="stylesheet" type="text/css">
4. 网页标题
  <title> xxxxxx </title>
可以选择加入的标签
1. 公司版权注释
  
2. 网页制作者信息
  <meta name="author" content="webmaster@maketown.com">
3. 网站简介
  <meta name="DWSACRIPTION" content="xxx">
4. 设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
  <meta http-equiv="expires" content="Wed,26 Feb 1997 08:21:57 GMT">
5. 禁止浏览器从本地的缓存中调阅页面内容。
  <meta http-equiv="Pragma" content="no-cache">
6. 用来防止别人在框架里调用你的页面。
  <meta http-equiv="Window-target" content="_top">
7. 自动跳转
  <meta http-equiv="Refresh" content="5;url=http://www.yahoo.com">
8. 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
  <meta name="robots" content="none">
9. 收藏夹图标
  <link rel="Shortcut Icon" href="favicon.ico">
10. 所有的JavaScript的调用尽量采取外部调用。
  <script language="javaScript" src="script/xxx.js"></script>

1.4.2 body区代码规范

<body>标签：

body标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景：<body bgcolor="#fff">(此处为示意，样式需写在css文件中)
在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常阅读，我们用javascript:void(null)代替原来的“#”标记。

1.5 JavaScript书写规范

【使用场景：书写js脚本时，根据此规则对变类，函数，变量命名，并遵循书写规则，避免出现常犯错误，提高脚本效率】

书写过程中，每行代码结束必须有分号，原则上所有功能均根据XXX项目需求原生开发，以避免网上down下来的代码造成代码污染（沉冗代码 || 与现有代码冲突 || …）
库引入：原则上仅引入jQuery库，以及组件组开发的相关库。若需引入第三方库，需与团队其他人员讨论决定。
变量命名：驼峰式命名。原生JavaScript变量要求是纯英文字母，首写字母需小写，如：iTaoLun；jQuery私有变量要求首字符为“_”;其他与原生JavaScript规则同；另外要求变量集中声明，避免全局变量。
类命名：首字母大写。
函数命名：首字母小写驼峰式命名。
命名语义化，尽可能利用英文单词或其缩写。
尽量避免使用存在兼容性及消耗资源的方法或属性，如eval(),innerText。
后期优化中，JavaScript非注释类中文字符须转换成Unicode编码使用，以避免编码错误时乱码显示。
代码结构明了，加适量注释。提高函数的重用率。
注重与HTML分离，减小reflow，注重性能。

1.6 图片规范

【使用场景：引用添加图片文件时，根据此规则对图片格式进行选择以及命名存放】

所有页面元素类图片均放入images文件夹，测试用图片放于images/demoimg文件夹。
图片格式仅限于gif || png || jpg。
命名全部用小写英文字母，数字，_ 的组合，其中不能包含汉字，空格，特殊字符。尽量用易懂的词汇，便于团队其他成员理解，另，命名分头尾两部分，用下划线隔开，比如：ad_left.gif。
在保证视觉效果的情况下选择最小的图片格式和图片质量，以减少加载时间。
尽量避免使用半透明的png图片（若使用，请参考css规范相关说明）
运用css sprite技术集中小的背景图或图标，减小页面http请求，但注意，请务必在对应的sprite psd 源图中划参考线，并保存至images目录下。

1.7 注释规范

1.7.1 HTML注释

注释格式  ,”–”只能在注释的始末位置，不可置入注释文字区域。

1.7.2 css注释

行间注释：直接写于属性值后面。

.search{border:1px solid #fff}/*定义搜索输入框边框*/

整段注释：分别在开始及结束地方加入注释。

/*===搜索条===*/
.search{
    border:1px solid #fff;
    background:url(../images/icon.gif) no-repeat #333;
}
/*===搜索条结束===*/

1.7.3 js注释

JavaScript单行注释使用
//这是单行注释
JavaScript多行注释使用
/* 这是多行注释 */

颓废的四哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一些网上的前端规范

1.1 文件命名规则【使用场景：在新建网页，图片，脚本，css文件时，根据此规则给文件命名并放入指定位置】文件名称统一用小写的英文字母，数字和下划线的组合，其中不得包含汉字空格和特殊字符。命名原则的指导思想：一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排列”的命令时，同一种大类的文件能够排列在一起，以便我们查找，修改，替...
复制链接

扫一扫