有关 CSS 样式冲突的问题

CSS 是不支持命名空间的，所以在使用上，如果不人为的加以限定，很容易造成样式冲突，这种情况尤其表现在多人开发一个项目，或对已有项目的改造上。

今天，有个朋友问我有什么好的方法。其实，我也只能提供一些原则性的东西，对于像 CSS 框架这种东西（例如： blueprint），我觉得不太适合网页的快速与松散开发模式。

下面给出一些原则性的建议，您可以根据原则性建议，组织您自己的 CSS 框架。另外，如果您觉得以下有什么问题，您可以留言，因为 CSS 并不是我的强项。

原则如下
1. 对于那些希望应用于全局的样式，可以通过单一的标记或 class 来定义，暂且称其为泛定义，需将其存成一个独立的 CSS 文件。如下
a{ }
a:hover{ }
a:active{ }
.ajax-loading-mini{ }
.ajax-loading-max{ }

2. 对于不同的页面频道，由于需要个性化的局部样式，所以其必须采用独立的样式表文件，禁止混用同一个样式表文件。

3. 对于频道页面中的 HTML 布局元素（如左、中、右布局），必须给其 id 命名（如 left-panel, middle-panel, right-panel）。之后，在频道的 CSS 文件中，通过已定义的布局元素 id，来限制其下样式的影响范围。

假设 left-panel 是一个布局元素的 id，像下面这样。
#left-panel{ }
#left-panel ul.nav-list{ }
#left-panel div.ajax-loading-mini{ }

解释一下上面的例子，假设 ajax-loading-max 是一个全局的样式类，我可以对其写其全局默认样式。然后在频道的 CSS 中，通过 #left-panel 选择器做特殊限定，以覆盖掉默认的全局设置。

有关 CSS 选择器的命名
前面就是我们遵守的 CSS 原则。但我们不会对 CSS 选择器的命名做苛刻的要求，因为写 CSS 人的英语水平及命名习惯不尽相同，你不能强制地做出要求，反之可能会伤害 CSS 人员的自尊心。但我们可以适当地对特殊的 DOM 元素定义一些前缀（如 btn，chk 等）。因为命名的好坏对页面的用户展示，并没有直接的影响，虽然也许会影响代码的质量。

我们强调的是，必须对频道或模块中的样式选择器序列，做出以 id 开头的强制要求。

其实有许多好的网站，他们都有自己的一套 CSS 框架，但以上讲的只是减少 CSS 覆盖影响的原则，非具体的实施方案。其实，根据一些原则，任何网站都可以针对自己的特点，写出符合自己需要的 CSS 框架。