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

CSS语义化命名

从上图我们可以大概看出这里有两种CSS的命名方式1、结构化命名法；2、语义化命名法。

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

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

那么具体来说，应该怎么命名呢，驼峰命名法？下划线命名法？中华线命名法？我们需要做到的是要见名知义，最好是用英文单词或通用的缩写来命名，对于是用驼峰命名法还是划线命名法，笔者建议两种都使用，驼峰命名法用来区别不同的单词，划线用来表示从属关系，如主导航栏，我们可以这样命名，mainNav代表这个导航，mainNav-current表示导航处于焦点状态，如本站的导航

html代码如下

，命名讲求的就是见名知义，并且还要注意避免命名冲突，尤其是一个项目由多个人完成时，对于这个问题我们可以通过在命名前面加组员代号或姓名简称来解决，具体还应根据不同团队的规范来实施。

常用的CSS命名规则

[1、文件命名]

主要的main.css

模块module.css

基本共用base.css

布局，版面layout.css

主题themes.css

专栏columns.css

文字font.css

表单forms.css

补丁mend.css

打印print.css

[2、注释的写法]

/Footer/

内容区

/EndFooter/

[3、id的命名]

(1)页面结构

容器:container

页头header

内容content/container

页面主体main

页尾footer

导航nav

侧栏sidebar

栏目column

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

(2)导航

导航nav

主导航mainNav

子导航subNav

顶导航Nav

边导航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-:20px;}

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

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

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

规范化命名是为了让其他人更方便的阅读，希望web前端设计师们能够遵循一下，小伙伴们感激不尽~~