css/html命名规范

项目中文件名字

1.符号应用场景
2.一律使用小写英文字母，英文， 禁止中文拼音
4.命名原则 使团队成员可以看懂自己代码，也方便自己查找，修改

html文件的命名

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

图片的命名规则

1.图片文件的后缀 .png jpg gif bmp
图片的名称分为头尾两部分 下划线隔开 头部表示大类
例如 产品 product 下的手机电视 product-tv product-iphone

例如 广告 标志 菜单 按钮

————放在页面顶部的【广告】 【banner】 banner-sohu.gif
————企业商标 【标志】性图片 【 logo】 logo-police.gif
————在页面上某一位置连续出现，性质相同的链接栏目图片叫 【menu】menu-aboutus。gif
————装饰使用的照片 取名【pic】 pic-tv.jpg
————【不带链接】表示标题的图片叫 【title】

文件夹存放规范

-www 或者 web 存放前端代码文件
-css 存放css文件
-src 存放js文件
-views 或者 pages 存放 html vue 文件
-assetes 存放 所有【资源文件】
-images 存放图片文件
-library 存放【第三方库】文件
-media 存放媒体文件
-build 存放 进过【自动化构建工具】或 【自动化打包工具】 处理后的文件

-serve 存放服务端代码文件
-api 存放【接口文件】
-modules 存放【数据库操作文件】

css 书写规范 新能优化方案

1 禁止class于ID 重名
2 书写顺序 ：布局定位属性 > 自身属性》文本属性》其他属性

.box{
     /* 布局定位类 */
     float:right;
     /* 自身属性 */
     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.减少使用 position absuolute fixed 属性
4.重要图片加【alt】 重要标签加 【title属性】
5.合理使用选择器 尽量不用伪类选择器 nth：type-of-child（）
6.避免使用 不要有 ！important 权重最高
7.注意 大区域一定要加注释 ，小区域适当 ，方便查看
8.尽量使用 符合属性 ； margin border

css 命名规范

页面结构

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

 导航  nav
 主导航 mainNav/gloabNav
 子导航 subNav
 顶部导航  topnav
 边部导航  sideBar
 左边导航 leftSiBebar
 右边导航 rightSiBebar
 边导航图片 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

原文链接：https://blog.csdn.net/weixin_45725033/article/details/102503551