CSS语义化命名及常用命名规则

CSS语义化命名

从上图我们可以大概看出这里有两种CSS的命名方式：

1、结构化命名法；（根据位置命名）

2、语义化命名法。 ( 根据功能命名 一般用这个 )

结构化命名法：

根据页面中板块的位置而命名，如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边，那么这时content-left板块却在右边，板块位置与其命名完全不符，那么我们这时就要修改页面中的以及CSS样式中的选择器名字了，这样会很不方便，尤其是当页面结构复杂时，一会儿left,一会儿right，这样会很不容易维护。

语义化命名法：
根据页面中模块的功能而命名，如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList等等，这样整个页面看起来就比较清晰了，维护起来也比较方便。

我一般比较喜欢用划线命名法
例如：footer-nav

常用的CSS命名规则

[1、文件命名]

主要的：main.css

模块：module.css

基本共用：base.css

布局，版面：layout.css

主题：themes.css

专栏：columns.css

文字：font.css

表单：forms.css

补丁：mend.css

打印：print.css

[2、注释的写法]

/* Footer */

内容区

/* End Footer */

[3、id的命名]

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

(2)导航

导航：nav

主导航：mainNav

子导航：subNav

顶导航：topNav

边导航：sideNav

菜单：menu

子菜单：subMenu

标题: title

摘要: summary

(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

[4、class的命名]

(1)颜色：使用颜色的名称或者16进制代码,如

.red{color:red;}

.f60{color:#f60;}

.ff8600{color:#ff8600;}

(2)字体大小,直接使用”font+字体大小”作为名称,如

.font12px{font-size:12px;}

.font9pt{font-size:9pt;}

(3)对齐样式,使用对齐目标的英文名称或单词缩写,如

.fl{float:left;}

.mt20{margin-top:20px;}

(4)标题栏样式,使用”类别+功能/分类”的方式命名,如

.titleBar-news{ }/新闻标题栏/

.titleBar-product{ }/产品标题栏/