现在的位置: 首页 > 综合 > 正文

如何规划组织良好的样式表,一点感想

2012年05月23日 ⁄ 综合 ⁄ 共 869字 ⁄ 字号 评论关闭

如何制作一个高质量的html页面,其中最重要的一个就是样式表,除了样式表之外,还有其他一些因素,比如最小的页面代码量,最小的页面请求资源, 比如高质量的JS代码等等,这些可以另开一个话题,个人就CSS的组织提一个抛砖引玉的讨论稿,大家讨论:

1、定义一个common.css用于全局定义和一些通用组件的定义,比如通用布局,grid、header、banner、bottom、popwindow、dialoge等所有页面都会用到的;

2、 每个模块定义一个css文件,用于该模块的所有定义,模块的划分如下:首页(home)、信息页(info)、资讯页(news)、网站特色服务 (??)、留言板(bbs)、登录注册个人中心商家信息(user),有些内容可能会存在交叉,比如商家信息中会有资讯的样式,不要交叉引用,允许少量重 复定义;

3、class的命名,请参考:CSS常用命名规范及详解.doc(baidu一下),建议以“模块名_元素类型_功能"的方式进行命名,比如: home_table_nav,home_div_nav;对于通用样式,可以类似于 grid_table_nav方式命名;

4、可以尝试使用#ID并通过级联筛选的方式来定义样式,这样的好处是减少在HTML中写class名称,另外关于ID的名称也建议参考上面的方法进行统一,比如 tblXXX,divXXX,ulXXX;

5、严格禁止拼音字母或者拼音的缩写,比如用 xxfb代表"信息发布",这种很难看懂;

6、如无特殊情况,不建议在jsp中直接写样式定义或者直接给元素写样式,如果页面需要又不想放在模块定义中,比如仅这个页面使用的样式,则可以新建一个专供当前页面使用的样式文件;

7、安装插件 Dust-Me Selectors  http://www.brothercake.com/dustmeselectors/ 进行样式表检查清理,清理不需要的定义;

8、样式表中涉及的背景图片,建议用css sprite的方式进行定义,以减少请求图片的次数,可以考虑按样式文件进行划分,一个样式文件对应一个背景图片;

抱歉!评论已关闭.