最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

关于团队合作常用的CSS命名规范

前端技术 rockyxia 4587浏览

写在前面

这套规范是我目前所在团队使用的规范,在此分享给大家。再一次来看这套规范发现我在日常的工作中有很多地方并没有按照规范来,确实有些大意,没有重视这块,可能团队中其他人也没有重视,缺少相互间的监督与互查,现在分享一下,希望我自己能严格遵守起来。后续我还会分享一个更详细的命名方法,与本套规范也属一脉相承,来自与IMWeb的一个建议。

下面就将规范内容直接贴出,希望能给新人一些帮助,若有意见及建议可以在文章底部的一对一交流问答链接中提出。

一、注意事项:

  • 1、代码一律小写;
  • 2、尽量用英文;
  • 3、尽量不加中杠和下划线,如果需要统一使用中杠;
  • 4、尽量不缩写,除非一看就明白的单词;
  • 5、不写JS的地方不要加ID,一律用class;
    • 主要的 master.css
    • 模块 module.css
    • 基本共用 base.css
    • 布局,版面 layout.css
    • 主题 themes.css
    • 专栏 columns.css
    • 文字 font.css
    • 表单 forms.css
    • 补丁 mend.css
    • 打印 print.css
  • 6、坚持以字母开头命名选择器,这样可保证在所有浏览器下都能兼容。

二、常用的css命名规则

(1)页面结构

  • 页面外围控制整体布局宽度:wrapper(我们习惯简写成wrap)
  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 左右中:left right center

(2)导航

  • 导航:nav
  • 主导航:mainbav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

(3)功能

  • 标志:logo
  • 广告:banner
  • 登录:login
  • 登录条:loginbar
  • 注册:regsiter
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的: current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guide
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:friendLink
  • 版权:copyright
  • 当前:current

*命名全部使用小写字母,如果需要多个单词,单词间使用“_”分隔,比如sidebar_list

*css属性书写顺序, 建议遵循布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举:

布局定位属性主要包括: margin & padding & float(包括clear) & position(相应的 top,right,bottom,left) & display & visibility & overflow等;

自身属性主要包括: width & height & background & border;

文本属性主要包括: font & color & text-align & text-decoration & text-indent等;

其他属性包括: list-style(列表样式) & vertical-vlign & cursor & z-index(层叠顺序)  & zoom等.

我所列出的这些属性只是最常用到的, 并不代表全部。

三、一般习惯性的命名与写法

1、颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

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

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

3、对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

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

.barnews {}
.barproduct {}

四、注释的写法

1、html注释: 注释格式<\!--这儿是注释-->, ‘–‘只能在注释的始末位置,不可置入注释文字区域;

2、css注释: 注释格式 /*--这儿是注释--*/;

3、注意我们内部进行迭代修改备注,用时间进行/*--注释--*/,并标明是add或edit。

如:

.google{
	position:relative;
	width:440px;
	height:260px;
} /*----------20110920edit-------------*/

.adsense{
	width:300px;
	height:250px;
	border:5px solid #d2d2d2;
} /*----------20110920add-------------*/

五、其他规范

1、开发过程中严格按分工完成页面, 以提高CSS复用率, 避免重复开发;

2、减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.

结束语

随着写页面是的时间越来越长,你会发现一直按部就班的写样式变得很枯燥,你需要想办法去改变一下工作方法,提升一下工作效率,让那些大差不差,差别不大的页面能够很快速的生成出来。以便你能制作更多的项目,或者有更多的时间来研究工作方法。

目前比较流行也很火的组件化模块化的前端代码输出方式应该得到正确的应用,期待我那个纯CSS的基础组件库赶快出来了。此前端组件库将基于我们自己的base.js(浏览器兼容重置基础样式)进行基础样式定义,然后将常用模块慢慢的全部输出,以便组装。

附base.js代码

/*@charset 'UTF-8';
/**********************
Date:2015-02-05
BuilderVersion:v1.2.0
CopyRight:iflytek_EUED
***********************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	margin:0;
	padding:0;
}
body,button,input,select,textarea {
	font-family:'Microsoft YaHei',arial,SimSun,sans-serif,tahoma;
}
body{
	-webkit-text-size-adjust:none; 
}
input,select,textarea {
	font-size:100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0 none;
}
iframe {
	display:block;
}
abbr,acronym {
	border:none;
	font-variant:normal;
}
del {
	text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:500;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:500;
}
q:before,q:after {
	content:'';
}
sub, sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}
sup {
	top:-0.5em;
}
sub {
	bottom:-0.25em;
}
ins,a {
	text-decoration:none;
}
.clearfix{
	*zoom:1;
}
.clearfix:before,.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
	overflow:hidden;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
.hidenone{
	display:none;
	visibility:hidden;
}
.hide{
	visibility:hidden;
}
.mt10{
	margin-top:10px;
}
.mt20{
	margin-top:20px;
}
.ml10{
	margin-left:10px;
}
.mr10{
	margin-right:10px;
}
.pt10{
	padding-top:10px;
}
.pl10{
	padding-left:10px;
}
.pr10{
	padding-right:10px;
}
.tc{
	text-align:center;
}

转载请注明:Rockyxia Web技术博客 » 关于团队合作常用的CSS命名规范
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)