狠狠撸

浅谈项目标准 Author:jndream Email:jn_dream@163.com Date:2011-8-1 7

HTML 标签的语义性 HTML 标签的分类结构方面的渐进增强栅格化结构 HTML 篇 HTML: 超文本标签语言

<div id="page"> <div id="header"> ... </div> <div id="content"> <div class="grid c3-s160e80 "> <div class=" col-main "> <div class=" main-wrap ">...</div> </div> <div class=" col-sub "> // 宽 160px ... </div> <div class=" col-extra "> // 宽 80px ... </div> </div> </div> <div id ="footer"> ... </div> </div> 栅格化下的公用框架

CSS 篇 CSS: 层叠样式表 css 布局：三张皮 + 两个盒子三张皮分别是：流模型、浮动模型、定位模型两个盒子分别是：块模型（箱子）、内敛模型（塑料袋） css 权重：简单的加法 id>100 ， class>10 ，标签 >1 ，继承 >0 标签里 style 权重最大， !important 次之

CSS 篇公用 css ： reset.css 和 comm.css 这两个文件定义了最基本最公用的 css ，保持了各个浏览器的统一性，定义了三种清除浮动的方式，定义了栅格化的基本模型。其中栅格化 css 和 html 中的公用框架相呼应。 #page, #page3{margin-left:auto; margin-right:auto;} #page{width:950px;} #page3{width:750px;} .col-main{float:left; width:100%;} .col-sub, .col-extra{float:left;} ...

CSS 篇 1.id 和 class 命名总规则为：内容优先，表现为辅。首先根据内容来命名，比如 main-nav 如果根据内容找不到合适的命名，可以再结合表现来定，比如 skin-blue, present-tab, col-main. 2. 对于每一段明确的 html 模块，容器必须加上 class=“ 模块名”，对于全产物中唯一出现的模块名，则将 class 改为 id 3.id 和 class 名称一律小写，多个单词用连字符连接，比如 recommend-presents. 4.id 和 class 名称中只能出现小写的 26 个英文字母、数字和连字符（ - ），任何其它字符都严禁出现。

CSS 篇 5.id 和 class 尽量用英文单词命名。确实找不到合适的单词时，可以考虑使用产物的中文拼音，比如 ancai, baoxiao. 对于中国以及通策特色词汇，也可以使用拼音，比如 xiaobao, daigou. 除了产物名称和特色词汇，其它任何情况下都严禁使用拼音。 6. 在不影响语义的情况下， id 和 class 名称中可以适当采用英文单词缩写，比如 col, nav, hd, bd, ft 等，但切忌自造缩写。 7.id 和 class 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写，比如 present, col. 8. 仅在 JavaScript 中当作 hook 用的 id 和 class, 命名规则为 J_UpperCamelCase, 其中字母 J 代表 JavaScript, 也是钩子（ hook ）的象形。主要用于 widget 的引用

Javascript 篇原生的 js 虽然被 jQuery 、 YUI 等成熟的类库取代，但需要熟悉原生 js ；安财项目选定以 jQuery 为基础类库，来做开发。可以把公用的组件放到一起，形成基于 jQuery 的 ui 层，然后在 ui 层基础上编写各个项目的 js ； jQuery ui 层安铂项目商旅项目 ......

Javascript 篇 js 代码组织风格： 1 、闭包思想； 2 、命名空间； 3 、按需调用； (function($){ var APP = {}; APP.util = {}; APP.util.tab = function(){ ... } })(jQuery);

文件夹组织存放项目 css 存放项目图片存放项目 js 存放项目用到的 jQuery 插件公用的基库和 ui 组件

愿景：愿景 1 、基于 jQuery 的 ui 组件的统一搭建起来； 2 、结构、表现与行为三者相对彻底的分离； 3 、合理的文件夹组织； 4 、合理的工作化流程。

狠狠撸

浅谈项目标准

Recommended

More Related Content

Viewers also liked (13)

Similar to 浅谈项目标准 (20)

浅谈项目标准