豆瓣CSS开发规范：浏览器兼容与组织原则

豆瓣CSS开发规范（Douban CSS Code Guideline）是豆瓣网站针对其前端代码风格和组织结构制定的一套详细准则，旨在确保统一、高效和可维护的CSS开发流程。以下是该规范的一些核心要点： 1. **浏览器支持标准**： - 按照兼容性分为A、B、C三个等级，A级要求在所有主流浏览器中保持一致的交互和视觉效果；B级允许在视觉上有轻微差异，不影响整体体验；C级则对视觉问题可忽略，不影响正常使用。 2. **重用和层次结构**： - 优先通过继承和CSS层叠来重用已有的样式，提高代码效率和一致性。 - 根据CSS的适用范围，将样式分为全站级、产品级和页面级。全站级CSS主要由core.css和douban.css管理，后者需放置在引用列表首位。 - 产品级CSS针对特定垂直领域（如音乐、读书等）编写，位于css/子目录；页面级CSS则根据页面需求，内联或外链至对应产品目录。 3. **基础样式和文件结构**： - core.css包含了全局基本样式，如HTML元素重置、通用样式和布局，以及模块的基础样式。推荐链接：[http://img3.douban.com/css/packed_core1.css](http://img3.douban.com/css/packed_core1.css) - 改动全站级CSS需谨慎，确保全面测试后再行实施。 4. **CSS规则书写规范**： - 属性值对之间用空格分隔，每个选择器单独一行或多行，遵循标准顺序书写以兼容不同浏览器（标准属性在最后）。 - 使用注释清晰地组织规则，如`/* mod: doulist */`，通用规则放在具体模块规则前面。 5. **ID和Class命名**： - 命名应避免缩写，单词间使用短横线`-`作为分隔符，以提高代码的可读性和理解性。 遵循这些指南，可以确保豆瓣网站的前端样式不仅美观，而且在不同浏览器和平台下表现出一致性和稳定性，提升了开发效率和团队协作能力。同时，良好的命名规范也有助于后期的维护和扩展。