命名规范

最新推荐文章于 2022-07-01 22:58:54 发布

我小代不惧怕任何人？？？

最新推荐文章于 2022-07-01 22:58:54 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/qq_42573901/article/details/102503566

版权

项目中的文件名字

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

xxx.html文件的命名

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

图片的命名规则

1.图片文件的后缀 xxx.png xx.jpg xxx.gif xxx.bmp
图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类
列如：产品类product 产类下的电视手机 product_tv product_iphone
列如：广告标志菜单按钮

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

文件夹存放规范

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

css 书写规范性能优化方案

禁止 class 与 id 重名
书写顺序：布局定位属性–>自身属性–>文本属性–>其他属性
.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\ 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.减少使用功能posittion absolute fixeddeng
4.重要图片加【alt】重要标签加【titles属性】
5.合理使用选择器，尽量少使用伪选择器，nth：type-of-child（）
6.不到万不得已，不要用！importtant 权重最高
7.注意；大区域一定加注释，小区域适当，方便查看
8.尽量使用复合属性 magin border

css命名规范

页面结构

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

标志：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