首页 > 开发 > CSS > 正文

CSS模块化的理解

2024-07-11 09:05:03
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:我没有看过CSS模块化的相关书籍,所以我下面说的不一定正确,但是在工作中,我会用我理解的模块化方式提高工作效率,我理解的模块化,主要分为两类。

在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么?的文章,文中主要是提及了CSS的命名规则,仔细阅读后,我认为这个其实就是模块化思想。(作者也提了这一点)。

我没有看过CSS模块化的相关书籍,所以我下面说的不一定正确,但是在工作中,我会用我理解的模块化方式提高工作效率,我理解的模块化,主要分为两类。

1、将常见的样式剥离出来,形成单独的样式,我叫他基础样式表或模块样式表,这个样式表主要一些常见的基本结构和形式,如CSS Reset、Blank、Font 等等。

例如下面这个样式表,我认为就是一个简单的基础样式表。(只是简单,不推荐用)

CSS

paddingborderoutline

2、在页面中按照结构模块化书写样式表,避免样式之间的干扰,并且方便浏览。
例如下面的这个结构

XHTML

>...>...>>...>...>

有一部分同学可能会这样写

CSS

h2 {...}

 XHTML

> >...>> >...>

刚刚看上去的时候效果很不错,一切都很完美,代码少,效果也实现了,但如果有一天,我们需要将所有h2的样式变的各不相同时,情况仿佛不乐观了。

 CSS

h2.XX {...}h2.YY {...}h2.ZZ {...}h2.XYZ {...}

XHTML

> >...>...>> >...calss></div>

迫不得已的,我们增加了很多带有不同标记的样式。可是1年后呢有人问起你这些样式所控制的对象是什么?
我可以肯定你会说,“我很费解”。
或者当你自己又写了一个“h2.XX”(命名重复的情况经常出现),无意覆盖了这个1年前的样式,而你又不知道,又恰巧被你的老板发现了…….上帝只能说,阿门,哥们,点被不能怨上帝。

可如果在一开始我们用这种方法写呢?

CSS

h2, #wrap_con_01 h2 {...}

 XHTML

> >...>> >...>

粗看是多了一些,但是当我们再次遇见给h2增加不同样式的时候,我们可以…

 CSS

h2h2h2h2.first {...}

 XHTML

> >...>...>> >...>...>

看,这样是不是好多了,这种格式在1年后,有人问起的时候,我肯以肯定你会说“我不费解”。
上帝也不会找你麻烦了。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表