CSS模块化

Transcript

1. 模块化 由校 2010-10-25
2. 基类、扩展类 基类： .prompt{…} .prompt-success{…} .prompt-fail{…} 扩展类： .prompt-a{…} .prompt-b{…} 个性化定义： #modify-account .prompt{…} #upload-avatar .prompt{…}
3. 模块注释 /** * @name : mod-prompt * @author :youxiao * @version :1.0 * @type :基类 * @explain :操作结果提示模块 */ .mod-prompt{...} .mod-prompt h2{...} .mod-prompt p{...} .mod-prompt-success{…} .mod-prompt-fail{…} /* @end **/ /** * @name : mod-prompt-a * @author :youxiao * @version :1.0 * @type :扩展类 * @explain :操作结果提示模块 * @dependent : mod-prompt */ .mod-prompt-a{...} .mod-prompt-a h2{ ... } .mod-prompt-a p{ ... } /* @end **/
4. 显式声明作用域 全局： .K2-note{…} .K2-title{…} 项目/产品： .project-note{…} .project-title{…} 页面： #modify-account .note{…} #modify-account .title{…}
5. 结合 基类： .project-prompt{…} .project-prompt-success{…} .project-prompt-fail{…} 扩展类： .project-prompt-style-a{…} .project-prompt-style-b{…} 个性化定义： #modify-account .project-prompt{…} #upload-avatar .project-prompt{…} .business-prompt .tuan-prompt
6. 模块注释 /** * @name : business-prompt * @author :youxiao * @version :1.0 * @type :基类 * @explain :操作结果提示模块 * @caller:add_pic\modify_pic */ . business-prompt{...} . business-prompt h2{...} . business-prompt p{...} /* @end **/ /** * @name : business-prompt-a * @author :youxiao * @version :1.0 * @type :扩展类 * @explain :操作结果提示模块 * @dependent : business-prompt * @caller:del_pic */ .business-prompt-a{...} .business-prompt-a h2{ ... } .business-prompt-a p{ ... } /* @end **/
7. Q&A