项目命名规范
- 符合项目应用场景
- 一律使用小写，统一要求：英文,不可以拼音
- 命名规则：使团队可以看懂自己的代码，自己也方便查找和修改
xxx.html 文件的命名
- 首页，主页面 index.html
- 子页面：首页 home.html
我的 mine.html
关于我们 about.html
信息反馈 feedback.html
产品 produot.html
购物 shop.html
计数器 count.html - 一级页面：登入 login.html login.css login.js
注册 resign.html
用户管理
图片的命名规则
- 图片的后缀 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 书写规范 性能优化
- 禁止 class 和 id 重名
- 书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性
- 布局定位属性 ：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 优化
- 全局考虑样式，提高代码重复使用
- 多使用兼容性好的样式 css2
- 减少使用功能position:absolute fixed 属性
- 重要图片 如[alt] 重要标签加[title属性]
- 合理使用选择器，尽量少使用伪类选择器 nth:type-of-child()
- 不到万不得已：不要用 !important 权重最高
- 注意：大区域一定要加注释； 小区域适当，方便查看
- 尽量使用合并写法：Margin、padding、border、font 等
css 命名规范
-
页面结构
容器：container/wrap
整体宽度：wrapper
页头：header
内容：content
侧栏：sidebar
栏目：column
中间内容：center -
导航
导航：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 -
功能
标志：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
1172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
