模块化设计CSS,更有效的管理你的Web页面

在网站内容上面,如果改某一个区域的内容,可能要几个CSS都改。这样一来,本来简单的一个修改,开始变得复杂起来...

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

  1. reset.css // 对浏览器的默认样式进行重设
  2. layout.css // 管理页面的布局
  3. typeset.css // 图文的编排与
  4. color.css // 统一管理颜色的搭配
  5. print.css // 打印效果样式
  6. ie.css // 把对ie的hack单独分开

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

  1. reset.css
  2. header.css // 头部的所有样式
  3. container.css // 除头部/底部外的中间区域样式
  4. footer.css // 底部样式
  5. print.css
  6. ie.css

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

一、效率问题与最终目的

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

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

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

三、多人合作上的问题

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

结语:

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

而你,又是怎么想的呢?

时间: 2024-05-06 12:10:51

模块化设计CSS,更有效的管理你的Web页面的相关文章

如何更灵活更智能的管理网线

庞杂的线缆堵塞了冷热通道,严重影响了机房散热和制冷:线路没有经过良好的规划,杂乱且难以理顺,很难对架构进行灵活调整和扩充;随着持续增长和变化的网络需求,额外的线缆和接插件需要添加到系统中;类似拔错线缆或者误解手写记录的低级错误的出现.如今,线缆及布线系统的管理已成为管理员面临的最大难题之一. 如何才能更加灵活.更加智能的管理你的网线呢?建议大家通过软件加人工的方法来进行. 我们知道,现有的许多网络管理软件绝大多数都工作在网络层,而非物理连接层,只能监测逻辑链路故障,不能告诉管理员物理错误的位置和

前端模块化设计思路

模块化概念 模块化就是为了减少循环依赖,减少耦合,提高设计的效率.为了做到这一点,我们需要有一个设计规则,所有的模块都在这个规则下进行设计.良好的设计规则,会把耦合密集的设计参数进行归类作为一个模块,并以此划分工作任务.而模块之间彼此通过一个固定的接口(所谓的可见参数)进行交互,除此之外的内部实现(所谓的隐参数)则由模块的http://www.aliyun.com/zixun/aggregation/7434.html">开发团队进行自由发挥. 程序模块化的目的: 减 少循环依赖减少耦合提

模块化设计能给数据中心带来啥

数据中心该如何发展?有不少人提出了模块化的数据中心,认为数据中心特别实用.模块化数据中心是指每个模块具有独立的功能.统一的输入输出接口,不同区域的模块可以互相备份,通过相关模块的排列组合形成一个完整的数据中心.具体有模块化产品,集装箱式数据中心以及仓储式数据中心等几种形式.显然,模块化数据中心的最重要特点就是将功能模块化,数据中心进行部署应用的时候不用关心基础架构的细节,只需要使用模块化的功能模块进行连接和堆砌,就可以完成应用部署,显然这正是现阶段数据中心发展所需要的.若再早几年,根本没有人提到

CSS教程:编写易于管理的css

越来越多的大型网站开始关注.使用css,对于管理多个复杂css文件显然是有异议的.下面是二系列内容中的第一部分,第一部分我们关注对于管理样式的观点,并在其基础上总结出可行的方案.第二部分我们将对以上结论进行对比.强大的css技术最近几年已经被广泛推广了.感谢Wired redesign(以及后来的high profile redesigns-,更多组织)和CSS Zen Garden(禅意花园).除此之外,有越来越多的设计师加强了对于css的学习,并通过学习让工作更容易.简单,或者他们本身就是?

网页设计CSS中文字大小的pt、px的区别

先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 在网页设计css中,经常用到字体,而字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个"点"有多长多大么?可以画的很小,也可以很大.如

这样做才能设计出更好的数据表

本文讲的是这样做才能设计出更好的数据表, **差强人意的表格.**他们哪里没有做对? 由于一些历史原因,表格在成为网页的必须品之后,因为有更加新潮,更加时髦的布局,它被很多设计师弃用.但是现如今,他们没法在网页上再创造出更多的外观,而数据表格仍然可以用于收集和组织很多我们日常生活中使用的信息. 例如,我认为所有表格的起源是:美国的 "Harmonized Tariff 的计划表",一个包含有 3,550 页的表格,它罗列了每一样可以被进口入美国的货物清单,包含有些令人兴奋的货物,例如,

thinkphp学习笔记5—模块化设计

原文:thinkphp学习笔记5-模块化设计 1.模块结构 完整的ThinkPHP用用围绕模块/控制器/操作设计,并支持多个入口文件盒多级控制.ThinkPHP默认PATHINFO模式,如下: http://serverName/index.php(或者其他应用入口文件)/模块/控制器/操作/[参数名/参数值...] 应用:由同一个入口文件访问的项目称为一个应用,在完整版的代码中就是Application 模块:一个应用下面可以包含多个模块,每个模块对应独立的目录,在完整版的代码中有Admin,

使用日程安排自动化测试来更好地管理时间与资源

简介:在一个自动化测试系统中按日程安排一项测试是实现在特定的日期和时间内执行任务的重要组成部分.它不但能够帮助您更有效地使用测试资源,而且能够帮助您监视测试结果.本文介绍了关于这方面一些应当考虑的事项,日程安排子系统的构件的基本情况,它所包含的功能,以及怎样使用 Java 语言开发一个日程安排等等. 向自动化测试添加日程安排的优势与挑战 测试软件.系统硬件,以及不同软件平台之间的防火墙都可以使用测试自动化系统.您可以使用为执行回归测试设计的自动化框架,以创建任务,执行它们,并根据不同的实验资源分

《代码大全》学习笔记(6):模块化设计

        子程序是具有一定功能的,可以调用的函数或过程:而模块则是指数据及作用于数据的子程序的集合.6.1 模块化:内聚性与耦合性      "模块化"同时涉及到子程序设计和模块设计:模块化设计的目标是使每个子程序都成为一个"黑盒子":使用单独一个子程序是很难达到这一目的的,这也正是引入模块的原因.6.1.1 模块内聚性        模块的内聚性准则,与单个子程序的内聚性准则一样,都是十分简单的:一个模块应该提供一组相互联系的服务.6.1.2 模块耦合