个人整理的前端风格规范html/css/js

html:

文件命名: 完整英文名,如feedback/about_us,若是有顺序的文件则加数字后缀并根据最大补0,如news_018

图片命名: 分两部分,前部分是类型:
banner(广告)
logo(标志)
button(按钮)
menu(栏目)
pic(装饰)
title(标题)
后部分是具体内容,如pic_girl.gif,有onmouse效果的图片用_on/_off标记。


目录结构:
根目录:
index.html(主页)
index01(文件夹)
index02(文件夹)
… (根据页面层级创建文件夹)
images (存放图片)
scripts (存放js)
styles(存放css)
medias (存放多媒体文件)


尺寸规范:
最宽1002px,长度不超3屏,宽度不超1屏
全尺寸banner468x80,半尺寸banner234x60,小banner88x31,小图标120x90/120x60,图片大小最好不超过60K,banner不超过14K


代码规范:
命名: 采用全小写+"-",语义明确的同时尽量短
缩进: 采用2空格
不要闭合空标签,如

不要使用转义字符


<head>
添加标识:作者信息、法律信息、版权等
调用css,js
</head>

样式文件命名规范 如:
全局的:global.css
主要的:master.css
布局、版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css
补丁:pacth.css
格式化浏览器:base.css

ID及Class命名常用名称 :
页头:header
登录条:login-bar
标志:logo
侧栏:side-bar
广告:banner
导航:nav
子导航:sub-nav
菜单:menu
子菜单:sub-menu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
版权:copyright
外套:wrap
页脚:footer
标题:title
顶导航:top-nav(mini-nav)


css:

颜色: 使用如#ABC16进制简写表示,不要用#aabbcc
每个声明结尾都要加分号,即使是最后一个
把0开头的数值前的0省掉
每个声明占据一行


javaScript:

变量:
不要使用var,使用constlet
使用小驼峰命名 variableName

常量: 全大写+下划线命名 CONST_NAME

方法: 大驼峰 FunctionName


缩进: 2空格

不要一次声明多次变量,如var a=1,b=2;
不要使用array创建数组
优先使用for...of
优先使用箭头函数
使用单引号
行末加分号
尽量不用with

发布了7 篇原创文章 · 获赞 12 · 访问量 500

猜你喜欢

转载自blog.csdn.net/weixin_45901207/article/details/105633223