前端规范——css1.0版.docxVIP

Css规范：Css文件可按模块或核心功能来划分，核心模块里面是一些常用css（公共部分应该提取出来）作为javascript钩子的样式使用js_作前缀如：button class=js_add_to_cart add-itemAdd to Cart/button作为javascript向页面添加和删除的样式使用is_作为前缀如：ulli class=”is_active”/lili/li/ulcss文件的命名规范，如首页front_page.css，统一以下划线分割，避免大写（文件必须使用UTF-8）导入css统一使用link标签，页内样式使用style，link和style标签都应当放在head中应当尽量避免行内样式层级样式尽量保证最多不超过4层级Html代码也要注意缩进注释规范:每个css文件头部需要包含/*??*?@description:?中文说明??*?@author:?name??*?@update:?name?(2013-04-13?18:32)??*/??2.模块注释必须单独写在一行?/*?module:?student info?by?张三?*/??…??/*?module:?hot app list?by?张三?*/??单行注释和多行注释单行注释可以写在单独一行，也可以写在行尾，文字不宜太多，最好都用英文注释如：/*?this?is?student image?*/??区块注释(可选)/*?Header?*/??/* nav *//*?Footer?*/??Css命名规范：css 样式命名统一以下滑线分割如用户信息 user_info 和bootstrap的（-）横杆区分开来使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名如：/* 不推荐: 无意义 */ #yee-1901 {}/* 不推荐: 与样式相关 */ .button_green {}.clear {}/* 推荐: 特殊性 */ #gallery {}#login {}.video {}/* 推荐: 通用性 */ .aux {}.alt {}ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。?如：/* 不推荐 */ #navigation {}.atr {}/* 推荐 */ #nav {}.author {}类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。?如：/* 不推荐 */ul#example {}div.error {}/* 推荐 */#example {}.error {}命名时需要注意的点规则命名中，一律采用小写加下划线的方式，不允许使用大写字母或 -命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则不允许通过1、2、3等序号进行命名避免class与id重名id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建idclass用于标识某一个类型的对象，命名必须言简意赅。尽可能提高代码模块的复用，样式尽量用组合的方式规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。常用的id命名(1) 页面结构?容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2) 导航?导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3) 功能?标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter有哪些信誉好的足球投注网站：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright颜色:使用颜色的名称或者16进制代码如：red { color: red; }.f60 { color: #f60; }