(转)豆瓣css开发规范
- Hu DongHai - 小豪~麦穗的部落格今天无意间看到了豆瓣的一些前端开发规范，攻城师作战指南. 里面的Javascript代码风格规范 差不多就是基本的javascript规范，主要还是分享一下 css部分的规范. 因为规范是在google docs上，需要穿过篱笆，所以我就直接帖过来了，一起学习一下哈. ——————————————–华丽的分割线————————————————.
(转)豆瓣css开发规范
标签：
闲话css
css
Javascript&jQuery
规范
豆瓣
| 发表时间：2011-01-23 22:11 | 作者：maisui99 Hu DongHai
出处：http://www.maisui99.com
今天无意间看到了豆瓣的一些前端开发规范，攻城师作战指南
里面的Javascript代码风格规范 差不多就是基本的javascript规范，主要还是分享一下 css部分的规范
因为规范是在google docs上，需要穿过篱笆，所以我就直接帖过来了，一起学习一下哈
以下就是转的部分
——————————————–华丽的分割线————————————————
Douban CSS Code Guideline
1. CSS浏览器支持标准
| WinXP | Win7 | OS X | |
| IE9 | C | C | |
| IE8 | A | A | |
| IE7 | A | A | |
| IE6 | A | A | |
| Chrome7 | C | C | C |
| Chrome6 | A | A | A |
| Chrome3 | B | B | B |
| Firefox4 | C | C | C |
| Firefox3.6 | A | A | A |
| Firefox3.5 | C | C | |
| Firefox3 | C | C | |
| Safari | B | B | B |
| Opera | C | C | C |
（注：根据2010年11月10日数据整理）
- A级－交互和视觉完全符全设计的要求
- B级－视觉上允许有所差异，不破坏页面整体效果
- C级－可忽视视觉上的问题，但不防碍使用
2. 尽可能的通过继承和层叠重用已有样式
3. 根据新建样式的适用范围分为三级：全站级、产品级、页面级
- 3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。
- 3-2. 产品级CSS是指作用于某一垂直产品（如音乐、读书、电台等），文件放在css/下相应目录下。
页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面head里，多于两个页面的放到外联的CSS文件中，该文件再放到相应的产品目录下。
4. core.css是全站基本样式。它需要放在所有CSS引用的最前面。它包括：标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等
参见：http://img3.douban.com/css/packed_core1.css
5. 不要轻易改动全站级CSS。改动后，要经过全面测试
6. 单条CSS规则的书写格式要求
- 6-1. 属性需要写在一行。需要在“{“和”}”前后加空格。
.selector { property:value;property:value; }
- 6-2. 多个(>2)selector每个占一行：
.selector1,
.selector2,
.selector3 { property:value;property:value; }
- 6-3. 兼容多个浏览器时，将标准属性写在后面，如：
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
7. 将作用于不同模块的CSS规则集中放在一起，同时用注释说明
注释的格式：
/* mod: doulist */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
…
/* mod */
…
/* nav */
…
/* mod: events album */
8. ID和Class命名。命名不要用缩写，单词间用”-”做为连接符
- 8-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： #db-video-list。
- 8-2. Class是用来标识某一类型的元素，命名简洁表意清楚。如：.list。
- 8-3. 命名示例：
坏：
#rec
.gray-link
.broadsmr
.pl
好：
#db-nav-main
.infobox
.item
- 8-4. 推荐使用的class名：
| 表示状态 | .on, .active, .selected, .hili |
| 表示位置 | .first, .last, .main, .side |
| 表示结构 | .hd, .bd, .ft, .col, .section |
| 通用元素 | .tb, .frm, .nav, .list, .item, .tag, .pic, .info |
9. 尽量避免使用CSS Hack
推荐使用下面的：
区别属性：
| IE6 | _property:value |
| IE6/7 | *property:value |
| IE6/7/8/9 | property:value\9 |
| 非IE6 | property//:value |
区别规则：
| IE6 | * html selector { … } |
| IE7 | *:first-child+html selector { … } |
| 非IE6 | html>body selector { … } |
| firefox only | @-moz-document url-prefix() { … } |
| saf3+/chrome1+ | @media all and (-webkit-min-device-pixel-ratio:0) { … } |
| opera only | @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … } |
| iPhone/mobile webkit | @media screen and (max-device-width: 480px) { … } |
10. 使用after或overflow的方式清浮动
11. 内联和外联的CSS都必须放在页面的head里。顺序是：全站级CSS，产品级CSS，页面级(外联)CSS，页面级(内联)CSS，内联CSS
12. 避免使用低效的选择器
如：
body > * {…}
ul > li > a {…}
#footer > h3 {…}
ul#top_blue_nav {…}
#searbar span.submit a { … }
13. 尽量避免使用filter
14. 不要直接修改标签的样式
如： div { … }
15. 不要在标签上直接写样式
如：<div style=”margin-bottom:30px;”>
16. 不要在CSS中使用 expression
17. 不要在CSS中使用 @import
18. 不要在CSS中使用 !important
19. 绝对不要在CSS中使用 “*” 选择符
我猜你也会喜欢这些o(∩_∩)o
相关 [豆瓣 css 开发] 推荐：
10 个加速 CSS 开发的框架
- Tairan Wang - ITeye资讯频道CSS 可以做很多事情，但开发者更习惯的是变量、常量和一般的更快速的语法，而 CSS 本身是不支持的. 本文介绍了 10 个 CSS 预处理器，让 CSS 支持一些简单的编程语法，使Web开发更高效. Compass 是一个开源的 CSS 制作框架. 针对个人框架开发时，其非常简单、易用. 这是一个很棒的 CSS 预处理器，可以让开发者制作插件，要求 PHP 以及 Apache (mod_deflate 和 mod_rewrite).
网易邮箱的CSS开发（一）
- - 博客 - 伯乐在线网易邮箱是个庞大而且细节繁多的系统，注定了前端开发中样式管理的复杂程度非常高. 如果没有一个合理的体系来管理样式，开发和维护的难度是不可想象的. 从极速3.5版本开始，我们就一直遵循并不断改善这套规则，现在就来分享一下~. 在错综复杂的样式面前，CSS显得过于简陋. 于是我们不得不人为的加上一些思维方式和规则来帮助我们管理样式.
高效CSS开发核心要点
- - blog.moocss.com本文参考了业界规范及主流趋势，详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题，希望对您有所帮助，也可收藏作为参考. 本文来源：http://www.ituring.com.cn/article/1745. 1.1 把CSS放在HTML页面头部. 由于浏览器需要在所有的样式表加载完成后才能开始渲染页面，样式表加载完成之前页面会一直显示空白，因此需要将样式表放在头部.
为豆瓣爱好者开发的 Chrome 插件：豆瓣一点
- bridge - 谷奥——探寻谷歌的奥秘豆瓣一点这枚Chrome扩展适用于将豆瓣的电影和书籍评价作为是否入手重要依据的朋友，作者说他自己在VeryCD上看到新的电影和美剧都要到豆瓣上看看再决定下载. 作者开发这个扩展也是为了方便自己上网时随时查询，故取名“豆瓣一点”，寓意“点一下就可以豆瓣一下了”. 豆瓣搜索：在网页中选中一段文字，在豆瓣中搜索.
50 款简化 CSS 开发的实用工具和生成器
- - 畅之部落格这些CSS工具都是很适合网页设计题使用，已经为大家分好类别，请自行点击导航快速浏览：. CSS Sprites | CSS精灵. 网格和布局，CSS 优化，CSS 菜单工具，CSS 按钮，CSS 圆角，CSS 框架，CSS Sprites，CSS 排版以及 CSS 表单. 新颖的 CSS 网格工具，可用于简化内容管理系统的页面模板，轻巧易用.
13个最常用的CSS和HTML快速开发工具
- - ITeye资讯频道英文原文： 13 Most Used Speedy Tools To Write CSS And HTML Code. CleverCSS是个用于CSS开发的小型标记语言，从Python中得到灵感. 可以开发出干净、结构清晰的样式表. 在许多方面它比CSS2都更简洁、强大. 它与CSS最明显不同之处在于语法：CleverCSS采用了缩进式语法而不是对齐.
Web 开发中 20 个很有用的 CSS 库
- - Web前端 - ITeye博客在过去的几年中，CSS已经成为一大部分开发者和设计者的最爱，因为它提供了一系列功能和特性. 每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发. 像CSS 库，框架，应用这样的工具能够为开发者做很多事，而且可以使开发者创造出创新立异的WEB应用. 在这篇文件章中我们找到了一系列对开发者有用的CSS库，它们能帮助开发者在一定的期限内取得有创造性和创新性的成果.
从事前端开发必须要了解的CSS原理
- - IT瘾-geek 从事Web前端开发的人都与CSS打交道很多，有的人也许不知道CSS是怎么去工作的，写出来的CSS浏览器是怎么样去解析的呢. 当这个成为我们提高CSS水平的一个瓶颈时，是否应该多了解一下呢. 一、浏览器的发展与CSS. 网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页， HTTP 容许网页浏览器送交资料到网页服务器并且获取网页.
为什么 Web 前端开发不抛弃 HTML 和 CSS，用纯 JavaScript 开发？
- - 知乎每日精选首先要确定，即使抛开游戏不论，一般的Web应用或者网站，完全用JavaScript开发也是可行的. 比如ExtJS、webOS的Enyo等. 但是主流Web开发很少采用全JS的方案. 注重考虑那些无法运行JS的用户代理. 用户使用不支持JS的浏览器（比如较老的手机浏览器），或者禁用脚本. 当然你可以选择忽略这一小撮用户，尤其是现在绝大多数网站和应用也是如此选择的，但是至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重.