模块化CSS | 更有效地管理CSS

2016-02-19 17:38 5 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的模块化CSS | 更有效地管理CSS,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

  为了更有效地管理 CSS,下面是 Sofish 讲解了模块化CSS的概念与观点,希望这些对你有所帮助。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  在刚学习CSS初期,就接触了模块化CSS这样的概念,不过,一直没有很好的理解。说起来,理由很简单:因为几乎所有的代码都是为了博客的设 计,而像博客这么小的架构,CSS文件根本不用多,因为本身代码量就小,使用不同表现形式的页面模板并不多,少反而更方便管理。所以,对于模块化CSS的 理解很乱,直接导致自己一直认为下面的分法是非常合理的:

  reset.css // 对浏览器的默认样式进行重设

  layout.css // 管理页面的布局

  typeset.css // 图文的编排与

  color.css // 统一管理颜色的搭配

  print.css // 打印效果样式

  ie.css // 把对ie的hack单独分开

  其实不然,最近工作,接触了公司的网站,leader要自己写CSS的写作规范,以及一些HTML的统一规范;并且写了新的频道/页面/卖场。才发 现,原来,上面的分法还是太理想化了。以个人来说,个人认为可以用下面的分割法。先写下,然后,让我们对比这两种分法,找到更好的解决CSS文件管理的合 适的CSS模块化分法:

  reset.css

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  header.css // 头部的所有样式

  container.css // 除头部/底部外的中间区域样式

  footer.css // 底部样式

  print.css

  ie.css

  我们可以看到,不同的有三个CSS文件。第一种分法是种不错的做法,但管理起来比较麻烦,虽然是模块化 了,把表现的内容的样式分开。但由于每个人都不可能百分百了解每个CSS文件里面的内容,所以,可能导致下面的问题:

  一、效率问题与最终目的

  在网站内容上面,如果改某一个区域的内容,可能要几个CSS都改。这样一来,本来简单的一个修改,开始变得复杂起来。并且,如果多个都改,可能会使我们忽略了某些东西,又需要进一步调试,这样不仅肯使最终目的实现延后,还是一个效率的问题。

  二、调用尽可能少的CSS文件

  大多楼情况下,一个网站都是分成头部,中部和底部,并且,一般,要做新的频道/页面之类的东西,都不会变动头部和底部,而只是变动中间部分。这样一 来,所有CSS文件都要调用,因为,HTML和CSS的模块化并不一致。这样,就会导致服务器承受更多的压力。这是一个方面。另一个方面是,如果新页面中 某些元素与其他页面有冲突,我们可能要搞一大堆关于优先性选择的代码,增加代码量。这些都不是我们想要的。这就为什么要把header.css和 footer.css分开来的原因。

  三、多人合作上的问题

  如果我们多个人在工作,大家的分工可能是,有人完成头部的导航,有人完成底部的搜索条,有人完成中部新页面的构建。这样一来,大家都同时在改几个文 件,并且,改的东西不同。如果要更新到服务器,就要先对比,再更新。(当然,现在有版本管理这样的软件。但是,同时工作的话,版本也是一个问题,要相信, 或许更新永远都改不上改变。)

  结语:

  当然,上面的分法,只是一个简单的模型。不同网站的架构,可能需要更细化的分法。这里需要提醒的一点是,模块化CSS,我们应该时刻明确,我们是为 了方便管理,方便修改,方便多人合作,而不是简单的分割。如果说有什么建议,我想,CSS的模块化,应该尽量与HTML的模块化相一致。这里的一致说的 是,无论是在文件的分割上,还是在CSS内容的分割上,与HTML的模块化一致。这将会更有利于我们的工作。

  而你,又是怎么想的呢?

来源:http://www.tulaoshi.com/n/20160219/1615697.html

延伸阅读
标签: Web开发
很久之前就知道 宜家 ,以前在广州的时候也去过一次,给我的印象就是:大、贵、巧。地方很大,东西很贵,设计很巧。现在住的地方离宜家不远,这个月找时间去逛了下,地方还是那么大,东西还是那么贵,设计还是那么的巧。虽然没有买什么东西,不过也还是有所收获的,通过宜家的家具设计方法,我们可以聊聊模块化。 去过宜家的同学应该都有注意...
标签: Web开发
很久之前就知道 宜家 ,以前在广州的时候也去过一次,给我的印象就是:大、贵、巧。地方很大,东西很贵,设计很巧。现在住的地方离宜家不远,这个月找时间去逛了下,地方还是那么大,东西还是那么贵,设计还是那么的巧。虽然没有买什么东西,不过也还是有所收获的,通过宜家的家具设计方法,我们可以聊聊模块化。 去过宜家的同学应该都有注...
标签: Web开发
写在前面的话: 所有写程序的人都知道,当你逐渐对您要实现的功能展开的时候,很大的时候,第一天写的东西第二天就忘了写到那里了,很多的时候,不得不写上详细的程序开发笔记,这在ASP的系统开发中感觉尤其文件、函数复杂的时候,当我们打算对网站的一部分功能进行修改的时候,感觉无从下手或者感觉要修改的地方。这时候,如果您学过任...
模块化字体设计欣赏 模块化字体设计欣赏(2) 模块化字体设计欣赏(3)
学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化。也许我们一开始的接触只是因为链接的样式修改,然后慢慢发现CSS的强大而又简单,于是我们用它来控制整个网页的布局、排版、色彩、图片等等工作。学习了CSS之后我们又会发现 XHTML的结构更为重要,一个好的XHTML结构可以让CSS少费很...

经验教程

603

收藏

57
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部