CSS 命名规范
CSS 通用命名
1. 页面框架命名
通常具有唯一性,推荐用 ID 命名:
ID 名称 | 命名 |
---|---|
头部 | header |
主体 | main |
脚部 | footer |
容器 | wrapper |
侧栏 | side_bar |
栏目 | column |
布局 | layout |
2. 模块结构命名
CLASS 名称 | 命名 |
---|---|
模块(如:新闻模块) | mod (mod_news) |
标题栏 | title |
内容 | content |
次级内容 | sub_content |
3. 导航结构命名
CLASS 名称 | 命名 |
---|---|
导航 | nav |
主导航 | main_nav |
子导航 | sub_nav |
顶部导航 | top_nav |
菜单 | menu |
子菜单 | sub_menu |
4. 一般元素命名
CLASS 名称 | 命名 |
---|---|
二级 | sub |
面包屑 | breadcrumb |
标志 | logo |
广告 | banner (禁用 ad) |
登录 | login |
注册 | register/reg |
搜索 | search |
加入 | join |
状态 | status |
按钮 | btn |
滚动 | scroll |
标签页 | tab |
文章列表 | list |
短消息 | msg/message |
当前的 | current |
提示小技巧 | tips |
图标 | icon |
注释 | note |
指南 | guide |
服务 | service |
热点 | hot |
新闻 | news |
下载 | download |
投票 | vote |
合作伙伴 | partner |
友情链接 | link |
版权 | copyright |
项目中文件命名
- 符合应用场景
- 一律使用小写英文字母,统一要求;英文,禁止中文拼音
- 命名原则:使团队成员可以看懂自己代码;自己也方便查找并修改
HTML 文件命名
- 主页面:
index.html
- 子页面:
- 首页:
home.html
- 我的:
mine.html
- 关于我们:
aboutus.html
- 信息反馈:
feedback.html
- 产品:
product.html
- 购物:
shop.html
- 计数器:
count.html
- 首页:
- 一级页面:
- 登录:
login.html
- 注册:
register.html
- 用户管理:
userManage.html
- 登录:
图片命名规则
- 图片文件后缀:
.png
,.jpg
,.gif
,.bmp
- 图片名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类
大类例如:
- 广告、标志、菜单、按钮
- 放在页面顶部的广告:
banner
- 企业商标、标志性图片:
logo
- 连续出现的链接栏目图片:
menu
- 装饰用的照片:
pic
- 不带链接表示标题的图片:
title
范例:
banner_sohu.gif
menu_aboutus.gif
logo_police.gif
pic_iphone.jpg
文件夹存放规范
www
或web
: 存放前端代码文件css
: 存放.css
文件src
: 存放.js
文件views
或pages
: 存放.html
或.vue
文件assets
: 存放所有资源文件images
: 存放图片文件library
: 存放第三方库文件media
: 存放媒体文件build
: 存放经过自动化构建工具处理后的文件server
: 存放服务端代码文件api
: 存放接口文件modules
: 存放数据库操作文件
CSS 书写规范与性能优化方案
- 禁止
class
与id
重名 - 书写顺序: 布局定位属性 -> 自身属性 -> 文本属性 -> 其他属性
.box {
/* 布局定位类 */
float: left;
/* 自身属性 */
width: 100px;
height: 100px;
/* 文本类 */
text-align: left;
/* 其他属性 */
background: red;
}
CSS 优化
- 全局考虑样式;提高代码重复使用率
- 多使用兼容性好的样式 (CSS2)
- 减少使用
position: absolute
和fixed
属性 - 重要图片加
alt
属性,重要标签加title
属性 - 合理使用选择器;尽量少使用伪类选择器
nth-type-of-child()
- 不到万不得已,不要用
!important
(权重最高) - 尽量使用复合属性 (如
margin
,border
)
版权声明:
作者:MR.k
链接:https://bigeng.sbs/2024/09/css-%e5%91%bd%e5%90%8d%e8%a7%84%e8%8c%83/
文章版权归作者所有,未经允许请勿转载。
THE END