分享
是一种美德

CSS样式规范

页面制作思想原则
始终保证HTML、CSS的轻量化,把复杂的事情简单化,把简单的事情模块化,用尽可能简洁的代码实现所需的页面。

页面制作布局规范
1.页面title格式
以下划线()分割,格式:内容标题栏目标题

2.页面分为Layout和Block两大类
Layout部分负责限定总体尺寸及构建页面基本轮廓。
Block部份依实际内容分别定制最外层以div标签包裹,尺寸一般不做限定,模块尽量设置overflow样式以控制出错成本。

3.关于重用
当页面中相似模块较多时,可考虑将其结构制作成公用模块,以方便重用。
重用模块主要以结构重用为目的,对于模块中的文字、链接等细节等的处理,可以通过给其附加额外的class进行扩展。

样式命名及参数规范
1.一律采用px为数值单位
2.按钮以btn开头命名
3.图标以ico
开头命名
4.Layout模块的样式以la为前缀命名。
5.重用模块的命名以前缀re
开头以方便识别,重用样式建立修改必需慎重。
6.样式继承的起始为点为该标签所在的Block,继承层级尽量控制在4个以内。
7.样式套用顺序:重用样式 预置样式 私有样式。
8.样式名以前缀+Camel风格命名,例:la_showDemo
9.大型项目时可考虑给body设置class以提供额外的全局判断,利于细节扩展。

图片文件命名整合规范
1.临时文件以下划线开头(_)开头,应确保在任何情况下该文件被删除时都不会影响到网页的设计需求。例:photo.jpg
2.背景图片以bg
开头来命名
a.大图独立命名,体积以控制在70KB以内为宜。
b.有固定宽高之一的平铺图片根据轴向以bg_x.jpg或bgy.jpg命名整合在一起,以1px不同色块间隔,存储成质量为100的jpg。
(考虑到平铺图片的特性,若有尺寸上的修改,原则上以删除旧图,在图片末尾处添加新图为准,不要试图在原处修改,以免出现管理混乱。)
c.有延伸要求的平铺图片务必独立命名,不可贪图方便整合进其他图片。格式为:前缀
轴向_实例名。例:bg_xpage.jpg
3.网站常规的样式图片可根据需求选择jpg或gif格式,以img.jpg或img.gif命名。
4.gif动画文件需同类整合,以m
为前缀,注意控制图片体积。
5.现阶段尽量不用png。

常用hack
注意:良好的结构比任何hack都好,尽量少用。
width:1px;*width:1px;_width:1px; ff,ie7,ie6

附表
复制内容到剪贴板
代码:
样式命名规范表
类型 前缀 命名示例
网页结构 la_ lashowDemo
普通模块 无 showDemo
重用模块 re
 re showDemo
图标 ico
 ico showDemo
按钮 btn
 btn showDemo
复制内容到剪贴板
代码:
图片命名规范表
类型 规范 命名示例
普通图片 无 photo.jpg
整合图片 img+数字(可选) img.gif | img1.gif
gif动画 m
前缀 mico.gif
大尺寸背景图 bg
命名 bgtop.jpg
平铺图片(限定) bg
轴向 bgx.jpg
平铺图片(延伸) bg
轴向_命名 bg_xpage.jpg
临时图片 
_photo.jpg

分享按钮
赞(3)
转载请注明来源地址:MN乐享 » CSS样式规范

评论 抢沙发

评论前必须登录!