css语义化
# 常用的CSS命名规则
# 1、文件命名
主要的：main.css
模块：module.css
基本共用：base.css
布局，版面：layout.css
主题：themes.css
专栏：columns.css
文字：font.css
表单：forms.css
补丁：mend.css
打印：print.css
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2、注释的写法
/* Footer */
内容区
/* End Footer */
1
2
3
2
3
# 3、id的命名
（1）页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
（2）导航
导航：nav
主导航：mainNav
子导航：subNav
顶导航：topNav
边导航：sideNav
菜单：menu
子菜单：subMenu
标题: title
摘要: summary
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
（3）功能
标志：logo
广告：banner
登陆：login
登录条：loginBar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinUs
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：friendLink
版权：copyright
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 4、class的命名
（1）颜色：使用颜色的名称或者16进制代码,如
.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}
1
2
3
2
3
（2）字体大小,直接使用"font+字体大小"作为名称,如
.font12px{font-size:12px;}
.font9pt{font-size:9pt;}
1
2
2
（3）对齐样式,使用对齐目标的英文名称或单词缩写,如
.fl{float:left;}
.mt20{margin-top:20px;}
1
2
2
（4）标题栏样式,使用"类别+功能/分类"的方式命名,如
.titleBar-news{ }/*新闻标题栏*/
.titleBar-product{ }/*产品标题栏*/
1
2
2
编辑 (opens new window)
上次更新: 2022/04/06, 15:04:00