前端开发较全CSS命名规范

前端开发用什么框架吗 前端开发新框架 前端开发app混合开发框架

css文件名命名规范

模块:module.css

基本共用:base.css

布局、版面:layout.css

主题:themes.css

专栏:columns.css

文字:font.css

表单:forms.css

补丁:mend.css

打印:print.css

页面结构元素div命名规范

头:header

内容:content/container

尾:footer

导航:nav

侧栏:sidebar

栏目:column

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

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:register

状态:status

投票:vote

合作伙伴:partner

颜色命名使用颜色的名称或者16进制代码

.red {color: red;}

.f60 {color: #f60;}

.ff8600 {color: #ff8600;}

字体大小命名直接使用“font+字体大小作为名称

.font12px {font-size: 12px;}

.font9pt {font-size: 9pt;}

对齐样式命名使用对齐目标的英文名称

.left {float:left;}

.bottom {float:bottom;}

标题栏样式命名使用类别+功能的方式命名

.barnews { }

.barproduct { }

注释书写规范

1.行间注释直接写于属性值后面,如:

.search{
border:1px solid #fff;/
定义搜索输入框边框/
background:url(../images/icon.gif) no-report #333;/
定义搜索框的背景/
}

2.整段注释分别在开始及结束地方加入注释,如:

/=====搜索条=====/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/=====
搜索条结束=====/

以上是我们整理的关于div+css页面设计中常用的命名规范,大家在日常的页面设计中要逐步养成规范命名的好习惯。

2.整段注释分别在开始及结束地方加入注释,如:

/=====搜索条=====/
.search {
border:1px solid fff;
background:url(../images/icon.gif) no-repeat #333;
}
/=====搜索条结束=====/

wap前端开发框架 前端开发ui框架 web前端框架与移动前端开发

» 本文来自:前端开发者 » 《前端开发较全CSS命名规范》
» 本文链接地址:https://www.rokub.com/5650.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!