html前端命名规范

css 命名规范

CSS 通用命名

(1)页面框架命名，一般具有唯一性，推荐用ID命名

ID名称	命名	ID名称	命名
头部	header	主体	main
脚部	footer	容器	wrapper
侧栏	side_bar	栏目	column
布局	layout

(2)模块结构命名

CLASS名称	命名	CLASS名称	命名
模块(如：新闻模块)	mod (mod_news)	标题栏	title
内容	content	次级内容	sub_content

(2)导航结构命名

CLASS名称	命名	CLASS名称	命名
导航	nav	主导航	main_nav
子导航	sub_nav	顶部导航	top_nav
菜单	menu	子菜单	sub_menu

(3)一般元素命名

CLASS名称	命名	CLASS名称	命名
二级	sub	面包屑	breadcrumb
标志	logo	广告	Bner (禁用banner或ad)
登陆	login	注册	regsiter/reg
搜索	search	加入	join
状态	status	按钮	btn
滚动	scroll	标签页	tab
文章列表	list	短消息	msg/message
当前的	current	提示小技巧	tips
图标	icon	注释	note
指南	guide	服务	service
热点	hot	新闻	news
下载	download	投票	vote
合作伙伴	partner	友情链接	link
版权	copyright	演示	demo
下拉框	select	摘要	summary
翻页	pages	主题风格	themes
设置	set	成功	suc
按钮	btn	文本	txt
颜色	color/c	背景	bg
边框	border/bor	居中	center
上	top/t	下	bottom/b
左	left/l	右	right/r
添加	add	删除	del
间隔	sp	段落	p
弹出层	pop	公共	global/gb
操作	op	密码	pwd
透明	tran	信息	info
重点	hit	预览	pvw
单行输入框	input	首页	index
日志	blog	相册	photo
留言板	guestbook	用户	user
确认	confirm	取消	cancel
报错	error

导航

  1 导航：nav
  2 主导航：mainNav /gloabNav   main_nav/gloab_nav  main-nav/gloab-nav
  3 子导航：subNav  sub_nav sub-nav 
  4 顶部导航 topNav top_nav  top-nav
  5 边部导航 sideBar side_nav side-nav
  6 左边导航：leftSideBar left_side_nav left-side-nav
  7 右边导航：rightSideBar 
  8 边导航图片 sideBarIcon
  9 菜单 menu
 10 子菜单 subMenu   sub_menu  sub-menu
 11 
 12 标志：logo 
 13 登陆：login
 14 登录条：loginbar
 15 注册：regsiter
 16 产品：products
 17 产品价格：products_prices
 18 产品评论：products_review 
 19 编辑评论：editor_review
 20 最新产品：news_release
 21 最新产品：news_release
 22 广告/标语：banner
 23 摘要:summary
 24 生产商：publisher
 25 缩略图：screenshot
 26 常见问题：faqs
 27 关键词：keyword
 28 博客：blog
 29 论坛：forum
 30 搜索：search 
 31 搜索输入框：search_input
 32 搜索输出：search_output 
 33 搜索结果：search_results
 34 加入我们：joinus 
 35 状态：status
 36 按钮：btn 
 37 滚动：scroll
 38 标签页：tab 
 39 文章列表：list
 40 提示信息：msg/message 
 41 当前的: current
 42 小技巧：tips 
 43 皮肤：skin
 44 充值：pay 
 45 活动：activities
 46 推广：promotion 
 47 公告：announcement
 48 排行：ranking 
 49 公司简介：company_profile
 50 公司设备：equipment 
 51 公司荣誉：glories
 52 企业文化：culture 
 53 企业规模：scale
 54 营销网络：sales_network 
 55 组织机构：organization
 56 技术力量：technology 
 57 分支机构：branches
 58 企业资质：enterprise_qualification 
 59 公司实力：strength_strength
 60 经营理念：operation_principle 
 61 经理致辞：manager_oration
 62 发展历程：development_history 
 63 工程案例：engineering_projects
 64 分类浏览：browse_by_category 
 65 应用领域：application_fields
 66 人力资源：human_resource_hr 
 67 领导致辞： leader_oration
 68 客户留言：customer_message 
 69 客户服务：customer_service
 70 您的要求：your_requirements 
 71 销售信息：sales_information
 72 招商：enterprise_establishing 
 73 教育培训：education_training
 74 在线交流：online_communication 
 75 质量认证：quality_certification
 76 合作加盟：joinIn_cooperation 
 77 产品描述：products_description
 78 业务范围：business_scope 
 79 产品销售：sales_sales
 80 联系我们：contact_us 
 81 信息发布：information
 82 
 83 返回首页：homepage 
 84 产品定购：order
 85 电子商务：e_business
 86  版权所有：copy _right
 87 友情连结：hot_link 
 88 行业新闻：trade_news
 89 行业动态：trends 
 90 邮编：postal_code_zipcode
 91 新闻动态：news_trends 
 92 公司名称：company_name
 93 销售热线：sales_hotline 
 94 联系人：contact_person
 95 建设中：in_construction 
 96 证书：certificate
 97 地址：add 
 98 电话：tel
 99 传真：fax 
100 产品名称：product_name
101 产品说明：description 
102 价格：price
103 品牌：brand 
104 规格：specification
105 尺寸：size 
106 生产厂家：manufacuturer
107 型号：model
108 产品标号：item_no
109 技术指标：technique_data 
110 产品描述：description
111 产地：production_place 
112 用途：application
113 论坛：forum 
114 在线订购：on_line_order
115 招标：bidInviting 
116 综述：general
117 业绩：achievements 
118 大事：great_event
119 动态：trends 
120 服务：service
121 投资：investment 
122 行业：industry
123 规划：programming 
124 环境：environment
125 发送：delivery 
126 提交：submit
127 重写：reset 
128 社区：community
129 业务：business 
130 在线调查：online_inquiry
131 下载中心：download 
132 意见反馈：feedback
133 常见问题：faq 
134 中心概况：general_profile
135 游乐园：amusement_park 
136 专题报道：special_report
137 图标: icon 
138 注释：note
139 指南：guild 
140 服务：service
141 热点：hot 
142 新闻：news
143 下载：download 
144 投票：vote
145 商标：label/branding 
146 当前位置：breadcrumb/loc
147 购物车：shop 
148 标签：tag
149 信誉：siteinfo_credits 
150 网站信息：siteinfo
151 法律声明：siteinfo_legal 
152 合作伙伴：partner
153 友情链接：friendlink 
154 版权：copyright

项目中文件名字

1：符合应用场景
2：一律使用小写英文字母，统一要求；英文，禁止中文拼音。
3：命名原则：使团队成员可以看懂自己代码；自己也方便查找并修改

xxx.html文件的命名

1：主页面 index.html
2: 子页面：首页：homme.html 我的 mine.html 关于我们:aboutus.html 信息反馈 feedback
产品 product 购物 shop 计数器 count
3: 一级页面: 登录：login.html login.css login.js
注册： resign.html
用户管理：userManage.html

图片的命名规则

1：图片文件的后缀 xxx.png xx.jpg xxxx.gif xxx.bmp

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

大类例如：广告、标志、菜单、按钮

放在页面顶部的【广告】 【banner】
企业商标 【标志】性的图片 【logo】
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： 【menu】
装饰用的照片我们取名： 【pic】
【不带链接】表示【标题的图片】我们取名： 【title】
范 例 ： banner_ sohu.gif
banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_iphone.jpg
pic_TV.jpg
…

文件夹存放规范

• www 或者 web 存放前端代码文件
  • css 存放 xxx.css 文件
  • src 存放 xxx。js文件
  • views 或者 pages 存放 xxx.html 或者 xxx.vue 文件
  • assetes 存放所有【资源文件】
    • images 存放图片文件
    • library 存放【第三方库】文件
    • media 存放媒体文件
  • build 存放经过【自动化构建工】或者【自动化打包工具】处理后的文件
• serve 存放服务端代码文件
  • api 存放【接口文件】
  • modules 存放 【数据库操作】文件

css 书写规范 性能优化方案

1：禁止class 与id 重名
2：书写顺序：布局定位属性–>自身属性–>文本属性–>其他属性

.box{
    /* 布局定位类 */
    float:left;

    /* 自身属性 */
    width:100px;
    height:100px;

    /* 文本类 */
    text-align:left;

    /* 其他属性 */
    background:red;
}

CSS优化

1: 全局考虑样式；提你高代码重复使用
2：多使用兼容性好的样式 css2
3: 减少使用功能position absolute fixed 属性;
4: 重要图片 加【alt】 重要标签加【title属性】
5：合理使用选择器；尽量少使用伪类选择器 nth:type-of-child()
6: 不到万不得已；不要用 !important 权重最高
8：尽量使用复合属性 magin border