前端html页面中的命名规范

项目中文件名字

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

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;
}

布局定位类属性

 Margin\padding\float\clear\position （ 相 应 top,right,bottom,left）\display\visibility\overflow

自身属性

 Width\height\background\ bord

文本属性

 font\color\text-align\text-decoration\text-indent\ white-space\othertext\content

其他属性

 list-style(列表样式)\vertical-align\cursor\z-index(层叠顺序)\zoom

CSS优化

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

css 命名规范

页面结构

容器: container/wrap
 整体宽度：wrapper
 页头：header
 内容：content
 侧栏：sidebar
 栏目：column
 中间内容：center

导航

导航：nav
主导航：mainNav /gloabNav   main_nav/gloab_nav  main-nav/gloab-nav
子导航：subNav  sub_nav sub-nav 
顶部导航 topNav top_nav  top-nav
边部导航 sideBar side_nav side-nav
左边导航：leftSideBar left_side_nav left-side-nav
右边导航：rightSideBar 
边导航图片 sideBarIcon
菜单 menu
子菜单 subMenu   sub_menu  sub-menu

标志：logo 
登陆：login
登录条：loginbar
注册：regsiter
产品：products
产品价格：products_prices
产品评论：products_review 
编辑评论：editor_review
最新产品：news_release
最新产品：news_release
广告/标语：banner
摘要:summary
生产商：publisher
缩略图：screenshot
常见问题：faqs
关键词：keyword
博客：blog
论坛：forum
搜索：search 
搜索输入框：search_input
搜索输出：search_output 
搜索结果：search_results
加入我们：joinus 
状态：status
按钮：btn 
滚动：scroll
标签页：tab 
文章列表：list
提示信息：msg/message 
当前的: current
小技巧：tips 
皮肤：skin
充值：pay 
活动：activities
推广：promotion 
公告：announcement
排行：ranking 
公司简介：company_profile
公司设备：equipment 
公司荣誉：glories
企业文化：culture 
企业规模：scale
营销网络：sales_network 
组织机构：organization
技术力量：technology 
分支机构：branches
企业资质：enterprise_qualification 
公司实力：strength_strength
经营理念：operation_principle 
经理致辞：manager_oration
发展历程：development_history 
工程案例：engineering_projects
分类浏览：browse_by_category 
应用领域：application_fields
人力资源：human_resource_hr 
领导致辞： leader_oration
客户留言：customer_message 
客户服务：customer_service
您的要求：your_requirements 
销售信息：sales_information
招商：enterprise_establishing 
教育培训：education_training
在线交流：online_communication 
质量认证：quality_certification
合作加盟：joinIn_cooperation 
产品描述：products_description
业务范围：business_scope 
产品销售：sales_sales
联系我们：contact_us 
信息发布：information

返回首页：homepage 
产品定购：order
电子商务：e_business
 版权所有：copy _right
友情连结：hot_link 
行业新闻：trade_news
行业动态：trends 
邮编：postal_code_zipcode
新闻动态：news_trends 
公司名称：company_name
销售热线：sales_hotline 
联系人：contact_person
建设中：in_construction 
证书：certificate
地址：add 
电话：tel
传真：fax 
产品名称：product_name
产品说明：description 
价格：price
品牌：brand 
规格：specification
尺寸：size 
生产厂家：manufacuturer
型号：model
产品标号：item_no
技术指标：technique_data 
产品描述：description
产地：production_place 
用途：application
论坛：forum 
在线订购：on_line_order
招标：bidInviting 
综述：general
业绩：achievements 
大事：great_event
动态：trends 
服务：service
投资：investment 
行业：industry
规划：programming 
环境：environment
发送：delivery 
提交：submit
重写：reset 
社区：community
业务：business 
在线调查：online_inquiry
下载中心：download 
意见反馈：feedback
常见问题：faq 
中心概况：general_profile
游乐园：amusement_park 
专题报道：special_report
图标: icon 
注释：note
指南：guild 
服务：service
热点：hot 
新闻：news
下载：download 
投票：vote
商标：label/branding 
当前位置：breadcrumb/loc
购物车：shop 
标签：tag
信誉：siteinfo_credits 
网站信息：siteinfo
法律声明：siteinfo_legal 
合作伙伴：partner
友情链接：friendlink 
版权：copyright