CSS名规则

CSS-命名总结

热度 2已有 26 次阅读 2010-8-13 23:42 |个人分类:资料库|关键词:CSS 命名

HYPERLINK ""

CSS书写命名总结

一、命名原则:

不要通过视觉外观来给元素命名，而是根据功能给元素命名。

ID具有唯一性，Class具有可重复性。让所有的Class元素都成为外围ID元素的子级或孙级。

网页模块化，利于网站代码的控制，维护和修改

a.外围架构使用ID控制

b.内部结构使用Class控制

二、命名规则:

HYPERLINK ""

a.骆驼命名法

指混合使用大小写字母来构成变量和函数的名字,首写字母小写

myData

b.帕斯卡命名法

指混合使用大小写字母来构成变量和函数的名字,首写字母大写

MyData

c.匈牙利命名法

标识符的名字以一个或者多个小写字母开头作为前缀，标识出变量的作用域，类型等。前缀之后的是首字母大写的一个单词或多个单词组合或者符号，该单词要指明变量的用途。

txtMyData

d.下划线或中划线命名法

树状结构的命名

层叠式命名

每一个逻辑断点都有一个下划线或中划线来标记

DWMenu_Insert_Animals

DWMenu_Insert_Animals_Dog

DWMenu_Insert_Animals_Cat

DWMenu_Insert_Animals_Monkey

DWMenu-Insert-Animals

DWMenu-Insert-Animals-Dog

DWMenu-Insert-Animals-Cat

DWMenu-Insert-Animals-Monkey

txt-MyData

e.常量命名

SQL_SELECT_CATEGORIES

HYPERLINK ""

三、CSS推荐命名方式

[模块前缀(模块标识|区域标识)]+[功能标识]+[模块后缀(状态|位置|[A-Z]:多风格标识|[0-9]:行标识|[a-z]:列标识)]

wrapperDetails

detailsLeft

detailsRight

section01

section02

section03

sectionYoulike

sectionTel

sectionNews

list01

list02

list03

listPro

listArt

listMedia

itemArticle

itemMedia

item

bgBody

btnAdd

btnDel

btnSubmit

btnSubmit01

btnSubmit02

btnSubmit03

四、常用的样式文件命名

全局样式表:base.css

页面级别样式表:style.css

五、

1、页面框架:

页面主体:container|icontainer

页眉:header

页中:pagebody

侧栏:aside|sidebar

正文:content

页脚:footer

版块:section

行:sectionR|column

栏:sectionC|row

article

dialog

figure

details

datagrid

nav

menu

command

video

audio

2、结构元素

Wrapper

外框:wrapper

外框内套:iWrapper

导航:menu

标签页:tab

容器:pannel

列表:list

内容的内套:inner

上:[top]-[T]

中:[middle]-[M]

下:[bottom]-[B]

左:[left]-[L]

中:[center]-[C]

右:[right]-[R]

多行多列:[part]-[P]

3、模块item

HYPERLINK ""

元素选择:

一行多列:li + 属性命名 list控制

一行两列和多行一列:dl dt dd + 属性命名 list控制

多行多列:div item控制

三种状态:[A][B][C][on]

Layout-版式:

上:[top]-[T]-[IT]

中:[middle]-[M]-[IM]

下:[bottom]-[B]-[IB]

左:[left]-[L]-[IL]

中:[center]-[C]-[IC]

右:[right]-[R]-[IR]

多行多列:-[part]-[P]

Property-属性命名:

Profile-色彩|背景

六、网站常用模块中英文对照表

版权:copyright

导航:nav

顶导航:topNav

主导航:mainNav

子导航:subNav

用户导航:userNav

菜单:menu

主菜单:mainMenu

子菜单:subMenu

右键菜单:contentMenu

快捷菜单:shortcutMenu

搜索:search

登录:login

登录条:loginb