CSS语义化命名方式及常用命名规则语义化命名方式及常用命名规则
本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处,敬请指出,欢迎你提出更好的建
议,加插更多的命名规范。
CSS语义化命名语义化命名
从上图我们可以大概看出这里有两种CSS的命名方式:1、结构化命名法;2、语义化命名法。
结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边,那么这时
content-left板块却在右边,板块位置与其命名完全不符,那么我们这时就要修改页面中的以及CSS样式中的选择器名字了,这
样会很不方便,尤其是当页面结构复杂时,一会儿left,一会儿right,这样会很不容易维护。
语义化命名法:根据页面中模块的功能而命名,如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新
闻列表newsList等等,这样整个页面看起来就比较清晰了,维护起来也比较方便。
那么具体来说,应该怎么命名呢,驼峰命名法?下划线命名法?中华线命名法?首先我们需要做到的是要见名知义,最好是用
英文单词或通用的缩写来命名,对于是用驼峰命名法还是划线命名法,笔者建议两种都使用,驼峰命名法用来区别不同的单
词,划线用来表示从属关系,如主导航栏,我们可以这样命名,mainNav代表这个导航,mainNav-current表示导航处于焦点
状态,如本站的导航:
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