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)

CSS 命名规范

CSS 通用命名

1. 页面框架命名

2. 模块结构命名

3. 导航结构命名

4. 一般元素命名

项目中文件命名

HTML 文件命名

图片命名规则

文件夹存放规范

CSS 书写规范与性能优化方案

CSS 优化

评论0