|
本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
201411191145113.jpg
CSS语义化命名
从上图我们可以大概看出这里有两种CSS的命名方式：1、结构化命名法；2、语义化命名法。
结构化命名法：根据页面中板块的位置而命名，如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边，那么这时content-left板块却在右边，板块位置与其命名完全不符，那么我们这时就要修改页面中的以及CSS样式中的选择器名字了，这样会很不方便，尤其是当页面结构复杂时，一会儿left,一会儿right，这样会很不容易维护。
语义化命名法：根据页面中模块的功能而命名，如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList等等，这样整个页面看起来就比较清晰了，维护起来也比较方便。
那么具体来说，应该怎么命名呢，驼峰命名法？下划线命名法？中华线命名法？首先我们需要做到的是要见名知义，最好是用英文单词或通用的缩写来命名，对于是用驼峰命名法还是划线命名法，笔者建议两种都使用，驼峰命名法用来区别不同的单词，划线用来表示从属关系，如主导航栏，我们可以这样命名，mainNav代表这个导航，mainNav-current表示导航处于焦点状态，如本站的导航：
201411191145114.jpg
html代码如下：
复制代码代码如下:</p>
<p><ulclass="mainNav"> </p>
<p><liclass="mainNav-current"><ahref="#"title="首页">首页</a></li> </p>
<p><li><ahref="#"title="HTML5">HTML5</a></li> </p>
<p><li><ahref="#"title="CSS3">CSS3</a></li> </p>
<p><li><ahref="#"title="Javascript">Javascript</a></li> </p>
<p>... </p>
<p></ul>
另外，命名讲求的就是见名知义，并且还要注意避免命名冲突，尤其是一个项目由多个人完成时，对于这个问题我们可以通过在命名前面加组员代号或姓名简称来解决，具体还应根据不同团队的规范来实施。
常用的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
顶导航：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{}/*产品标题栏*/
规范化命名是为了让其他人更方便的阅读，希望web前端设计师们能够遵循一下，小伙伴们感激不尽~~ | 
发表于 2014-11-19 11:45:28
