我爱编程

css命名规范

2017-04-04  本文已影响0人  心专注

一、注意事项:

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。

上一篇 下一篇

猜你喜欢

热点阅读