1 / 4
文档名称:

web前端规范-CSS的命名.doc

格式:doc   大小:27KB   页数:4页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

web前端规范-CSS的命名.doc

上传人:xxj165868 2022/8/15 文件大小:27 KB

下载得到文件列表

web前端规范-CSS的命名.doc

相关文档

文档介绍

文档介绍:原则:整个项目的命名风格要统一,id说明特殊性,class说明普遍性。从模块重用和节约文件体积的角度看,建议id类应尽量减少使用。class类的命名向模块化发展。
命名风格:
常见的命名风格有: css-style(不推荐)
原则:整个项目的命名风格要统一,id说明特殊性,class说明普遍性。从模块重用和节约文件体积的角度看,建议id类应尽量减少使用。class类的命名向模块化发展。
命名风格:
常见的命名风格有: css-style(不推荐); css_style(次推荐); cssStyle(主推荐)。
没有强制一定用哪种风格,不过同个项目中最好只使用一种风格,除非想表达特殊作用的再用多种风格,但要写好注释说明。 好的命名规范也能体现出语义化。
id 和 class:
什么时候用id,什么时候用class没有一个绝对的说法。这里只是提供一个参考。
对于页面的各个结构外层或者特殊部分(比如页面的布局,各个栏目),用id来说明这个区域是什么内容。 对于页面中可重用的结构或者一些常用的从属结构(比如栏目中的标题,文章,列表等),用class来说明这个小块是什么,表现怎么样。
约 定:搜索search不加bar修饰, 比如左边搜索区域, 命名为: searchL。以此类推, L(左边), R(右边), T(上方), B(下方)。 不管任何模块, 为避开css过多的命名名称, 比如选项卡tab的标题区域, 用hd命名, 写法为:" .tab .hd " 所有模块, 全部采用hd和bd模式。另外, 用"Tb"代表表格的缩写,比如表单表格: formTb。所有css命名采用Java的命名规范, 既是驼峰式的命名方式, 比如"newsList"。 大量模块使用雅虎的hd和bd命名思想(见‘CSS 书写’ 部分),将内层的css类命名简化,减少起名字的次数。最好不要用id类定义html的模块外观,id类的唯一性比特殊。比如在两个div中,用了相同的 id,js拿id交互便会出现问题。
常用的CSS命名
主体模块布局
命名解释
css命名
命名解释
css命名
页头
header
页尾
footer
标题区域
hd
主体区域
bd
容器
container
页面外围大包含块
wrap
命名解释
css命名
命名解释
css命名
栏目
column或col
侧栏
sideBar

left

right

middle
包裹上
warpT
右上
rightT
右下
rightB
中上
midT
中下
midB
其他模块布局
商标
logo
导航
nav
搜索左边
searchL
搜索右边
searchR
公告
notice
内部导航
innerNav
路径导航
pathNav
工具栏
toolBar
日期栏
dateBar
收缩栏
flexBar
左容器
containL
右容器
containR
页脚信息
footInfo
分页
page
数据展现表格
displayTb
表单填写表格
formT