CSS名规则
CSS-命名总结
热度 2已有 26 次阅读 -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