前端规范-css1.0版.docx

Css规范：1. Css文件可按模块或核心功能来划分，核心模块里面是一些常用css（公共部分应该提取出来）2. 作为javascript钩子的样式使用js_作前缀如：Add to Cart3. 作为javascript向页面添加和删除的样式使用is_作为前缀如：4. css文件的命名规范，如首页front_page.css，统一以下划线分割，避免大写（文件必须使用UTF-8）5. 导入css统一使用link标签，页内样式使用style，link 和style标签都应当放在head中6. 应当尽量避免行内样式7. 层级样式尽量保证最多不超过4层级8. Html代码也要注意缩进注释规范:1. 每个css文件头部需要包含2. /*3. *description:中文说明4. *author:name5. *update:name(2013-04-1318:32)6. */2. 模块注释必须单独写在一行1. /*module:student infoby张三*/2. 3. /*module:hot app listby张三*/3. 单行注释和多行注释单行注释可以写在单独一行，也可以写在行尾，文字不宜太多，最好都用英文注释1. 如：/*thisisstudent image*/4. 区块注释(可选)5. /*Header*/6. /* nav */7. /*Footer*/Css命名规范：1. css 样式命名统一以下滑线分割如用户信息 user_info 和bootstrap的（-）横杆区分开来2. 使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名如：/* 不推荐: 无意义 */ #yee-1901 /* 不推荐: 与样式相关 */ .button_green .clear /* 推荐: 特殊性 */ #gallery #login .video /* 推荐: 通用性 */ .aux .alt 3. ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。如：/* 不推荐 */ #navigation .atr /* 推荐 */ #nav .author 4. 类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。如：/* 不推荐 */ul#example div.error /* 推荐 */#example .error 5. 命名时需要注意的点a) 规则命名中，一律采用小写加下划线的方式，不允许使用大写字母或 -b) 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合c) 命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则d) 不允许通过1、2、3等序号进行命名e) 避免class与id重名f) id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建idg) class用于标识某一个类型的对象，命名必须言简意赅。h) 尽可能提高代码模块的复用，样式尽量用组合的方式i) 规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。6. 常用的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 版权：copyright7. 颜色:使用颜色的名称或者16进制代码如：red color: red; .f60 color: #f60; .ff8600 color: #ff8600; 书写规范1. css排版规范，使用tab缩进.about_us background-color: #FAC820; color: #FFFFFF; font-size: 28px; display: table; line-height: 50px; margin: 0px auto; padding: 5px 3px;2. 属性编写顺序（暂时无要求） 显示属性：display/list-style/position/float/clear 自身属性（盒模型）：width/height/margin/padding/border 背景：background 行高：line-height 文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content 其他：cursor/z-index/zoom/overflow CSS3属性：transform/transition/animation/box-shadow/border-radius 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。 链接的样式请严格按照如下顺序添加： a:link - a:visited - a:hover - a:active