文件规范:
1,文件名用英文单词且语义化
2,一些浏览器会将含有这些词的作为广告拦截,文件命名、ID、CLASS等所有命名避免以上词汇。ad、ads、adv、banner、sponsor、gg、guangg、guanggao等。
html规范:
1,HTML属性应当按照以下给出的顺序依次排列,来确保代码的易读性
class 、id 、 name、src、for、 type、 href、title、alt、 role
2,标签、属性、属性命名由小写英文、数字和\_组成,且所有标签必须闭合,属性值必须用双引号`""`
CLASS --> n-head-title--> CLASS遵循名称+-,
ID --> n-head-title --> ID遵循名称+-
3,语义化HTML,尽可能减少DIV嵌套
CSS规范:
1,css属性显示顺序:显示属性、元素位置、元素属性、元素内容属性
.header {
/* 显示属性 */
display || visibility
list-style
position top || right || bottom || left
z-index
clear
float
/* 自身属性 */
width max-width || min-width
height max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本属性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
};
2,使用选择器时,命名比较短的词汇或者缩写的不允许直接定义样式。
.hd,.bd,.td{};//如这些命名
可用上级节点进行限定。
.recommend-mod .hd
多选择器规则之间换行,即当样式针对多个选择器时每个选择器占一行。
button.btn,
input.btn,
input[type="button"] {…};
优化`CSS`选择器。
#header a { color: #444; };/*CSS选择器是从右边到左边进行匹配*/
浏览器将检查整个文档中的所有链接和每个链接的父元素,并遍历文档树去查找ID为header的祖先元素,如果找不到header将追溯到文档的根节点,解决方法如下。
避免使用通配规则和相邻兄弟选择符、子选择符,、后代选择符、属性选择符等选择器
不要限定id选择符,如div#header(提权的除外)
不要限定类选择器,如ul.recommend(提权的除外)
不要使用 ul li a 这样长的选择符
避免使用标签子选择符,如#header > li > a
TypeScript书写规范:
类名(构造器)
-->小驼峰式但首字母大写
-->如:Current、DefaultConfig
函数名
-->小驼峰式
-->如:current()、defaultConfig()
变量名,常量名
-->小驼峰式
-->如:current、defaultConfig
2,代码格式
"()"前后需要跟空格
"="前后需要跟空格
","后面需要跟空格
JSON对象需格式化对象参数
if、while、for、do语句的执行体用"{}"括起来
"{}"格式如下。
if (a==1) {
//代码
};
图片规范
命名应用小写英文、数字、_组合,便于团队其他成员理解。
footer_btn.png
footer_btn2.png
注释规范:
TYPESCRIPT、CSS文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。