CSS编写规范:模块化CSS

时间: 2009-01-13  分类: CSS+DIV  收藏
  1. 添加全局CSS
  2. 添加当前页面统一CSS
  3. 将页面分成几个模块
  4. 在每个不同模块上使用id挂钩,相同模块上使用class挂钩
  5. 添加每个模块的统一CSS
  6. 将每个模块分成几个子模块,并且回到第4步开始循环直至样式添加完成。

编写良好的CSS是一个设计问题,而不是一个实现问题。我们首先应当将编写特殊性非常低的全局CSS内容,也就是我们 常用的reset.css 。它是我们整个网站中所有页面的默认样式。

如果有哪个页面具有独特的统一样式,如某一页的背景与其他页面不同,那么我们可以给某一页面添加ID,然后在ID下编写当前页面的统一CSS。

body#special{ background-color:black;}

统 一样式编写好后,我们将页面分成几个模块,如果这些模块具有基本相同的样式,那么使用class挂钩,如果样式并非相同,那么使用id挂钩,以后每次分模 块时都应当遵循这一原则,因为class的特殊性不高,所以如果不是看起来显然类似的模块,就不应当使用class。id的名字通常可以模块的用途作为名 字。如 headbottom 等。id selector在层叠中起了关键作用,因为id具有排他性,还具有较高的特殊性,能够防止CSS规则被不经意的覆盖。

在某个模块中我们可能有一些统一CSS,那么我们就需要在使用id selector来编写当前模块下的统一样式。

#head p{ color:red;}

添加class挂钩时,我建议使用父模块(或者页面本身)的id在作为class名的第一部分。如果我添加一个独立的页面(body#special),那么为该页面分好模块后,我应当将该页的模块命名为 special_headspecial_bottom 等。

或者在某些页面模块中使用class挂钩时应当使用 head_col 等。这样做的好处是我们不用使用

#head .col{ /* 头部中每一列的样式 */}

而可以直接使用

.head_col{ /* 头部中每一列的样式 */}

从而不用担心命名冲突。

而对于模块下直接添加了id selector的元素,我们可以直接使用该selector,并且也在其名字前添加父模块的id。

#head_navigator{ /* 头部中导航栏的样式 */}

要 做到模块化CSS我们应当尽量防止跨模块的CSS出现,我想一条好的原则是:如果某一样式的跨模块特性不是你一目了然的,那么就不要使用跨模块的CSS。 一个例外是全局CSS或者模块内的统一CSS。而对于那些并非一目了然的,并非具有统一样式的,建议在每个子模块下分别定义。这就像是编写Java程序中 的面向对象的设计一样,我们要降低模块之间的互相依赖,使得相同模块的CSS规则在一起,略有不同的就完全分开,这样不但易于维护,还能够保证特殊性从低 到高地编写CSS,从而防止CSS规则被意外的覆盖。

分享到:

评论

昵 称: