今天,有个朋友问我有什么好的方法。其实,我也只能提供一些原则性的东西,对于像 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 框架。