CSS命名规则

CSS-命名总结

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

CSS书写命名总结

一、命名原则:

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

ID具有唯一性，Class具有可重复性。让所有的Class元素都成为外围ID元素的子级或孙级。网页模块化，利于网站代码的控制，维护和修改

a.外围架构使用ID控制

b.内部结构使用Class控制

二、命名规则:

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_CA TEGORIES

三、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

元素选择:

一行多列: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

登录条:loginbar

功能区:shop

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

友情链接:friendlink

网站导航Site Map

公司简介Profile or Company Profile or Company 公司设备Equipment Equipment

公司荣誉Glories Glories

企业文化Culture Culture

产品展示Product Product

资质认证Quality Certification

企业规模Scale Scale

营销网络Sales Network

组织机构organization organization

合作加盟Join In Cooperation

技术力量Technology Technology

经理致辞Manager`s oration

发展历程Development History

工程案例Engineering Projects

业务范围Business Scope

分支机构Branches

供求信息Supply & Demand

经营理念Operation Principle

产品销售Sales Sales