html前端命名规范

css 命名规范

CSS 通用命名

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

(2)模块结构命名

(2)导航结构命名

(3)一般元素命名

导航

  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