项目命名规范

1. 符合项目应用场景
2. 一律使用小写，统一要求：英文,不可以拼音
3. 命名规则：使团队可以看懂自己的代码，自己也方便查找和修改

xxx.html 文件的命名

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

图片的命名规则

1. 图片的后缀 xxx.png
   xxx.jpg
   xxx.gif
   xxx.bmp

图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质
例如：产品 product 产品下的 电视 手机 product_tv product_phone
例如：广告、标志、菜单、按钮等等。

• 放置在页面顶部的[广告] [banner]
• 企业商标 [标志性]的图片 [logo]
• 在页面上某个文字连续出现，性质相同的链接栏目图片我们取名： [menu] 菜单
• 装饰用的照片我们取名： [pic]
• [不带链接]表示[标题的图片]我们取名：[title]
  范 例 ：
  banner_sohu.gif banner_sina.gif
  menu_aboutus.gif menu_job.gif
  title_news.gif
  logo_police.gif logo_national.gif
  pic_people.jpg

文件夹存放规则

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

css 书写规范 性能优化

1. 禁止 class 和 id 重名
2. 书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性
   • 布局定位属性 ：Margin\padding\float\clear\position （ 相 应 的top,right,bottom,left）\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 等

css 优化

1. 全局考虑样式，提高代码重复使用
2. 多使用兼容性好的样式 css2
3. 减少使用功能position:absolute fixed 属性
4. 重要图片 如[alt] 重要标签加[title属性]
5. 合理使用选择器，尽量少使用伪类选择器 nth:type-of-child()
6. 不到万不得已：不要用 !important 权重最高
7. 注意：大区域一定要加注释； 小区域适当，方便查看
8. 尽量使用合并写法：Margin、padding、border、font 等

css 命名规范

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

2. 导航
   导航：nav
   主导航：mainNav/gloabNav main_nav/gloab_nav
   子导航：subNav sub_nav
   顶导航：topNav top_nav
   边导航：sideBar side_bar
   左导航：leftSideBar left_side_bar
   右导航：righSideBar righ_side_bar
   边导航图标：sidebarIcon side_bar_icon
   菜单：menu
   子菜单：subMenu sub_menu
   标题：title

3. 功能
   标志：logo
   登陆：login
   登录条：loginbar
   注册：regsiter
   产品：products
   产品价格：products_prices
   产品评论：products_review
   编辑评论：editor_review
   最新产品：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
   经营理念：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
   合作加盟：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