架构CSS
  在当前浏览器普遍支持的前提下,css被我们赋予了前所未有的使命。然而依赖css越多,样式表文件就会变得越大越复杂。与此同时,文件维护和组织的考验也随之而来。
  (曾几何时)只要一个css文件就够了——所有规则(rule)汇聚一堂,增删改都很方便——可这种日子早已远去。(现在)建立新网站时,必须花点时间好好筹划怎么组织和架构css。

文件的组织
  构建css系统的第一步是大纲的拟定。(我认为)css组织规划的重要性堪比网站目录结构。(注:用词夸张一点,让你加深记忆) 没有哪种方案放之四海而皆准,因此我们会讨论一些基本的组织方案,以及它们各自的利弊。

主CSS文件
  通常可以使用一个主css文件,来放置所有页面共享的规则。这个文件会包含默认的字体、链接、页眉和其他等样式。有了主css文件之后,我们开始探讨高级组织策略。

方法一:基于原型
  最基本的策略是基于原型页面(archetype page)分离css文件。假如一个网站的首页、子页面和组合页设计不同,就可以采用基于原型的策略。(这种策略下)每个页面都会有专属的css文件。
  在原型数量不多的情况下,这个方法简单明了、行之有效。然而,当页面元素并不按部就班的位于各个原型页时,问题就出现了。如果子页面和组合页共享某些元素,而首页却没有,我们应该怎么做呢?
  把共享元素放入主css文件。这虽不是最纯正的解决办法,却适用于某些具体情况。可是如果网站庞大,(这样做的话)主css文件会迅速膨胀——这就违背了分离文件的初衷:避免导入不必要的大文件。
  在组合页和子页面的css文件里各放一份样式代码。(这么做)就意味着要维护冗余代码,很显然我们不想这样。
  创建一个新的文件,由这两种页面共享。这听起来不错。不过假如只有10行代码,我们创建这个文件仅仅是为了共享这10行代码?(注:杀鸡用牛刀?) 这方法很纯粹,但如果网站庞大有很多对页面共享很少量元素时(注:比如30对页面分别共享10行代码),就显得很笨重了。
  创建一个单独的css文件,包含所有共享元素的样式。这方法可能比较简单,却要取决于网站的大小和共享元素的多少。有种情况会很烦:导入了一个很大的css文件,但页面只用到一小部分样式——还是那句话,这违背了分离文件的初衷。
  这就是我所说的重叠的两难(overlap dilemma)。零碎css规则的重叠不一而足,并没有一个完全清晰无误的方案来组织它们。

方法二:基于页面元素/块
  如果网站使用服务器端include,这个方法会很不错。举例说明,如果使用页眉include,它会有自己相应的css文件。页脚或者其他部分的include可以如法炮制,只须导入自己的css文件。这个方法简单干净,不过可能会产生很多小css文件。
  举例来说,假如页脚的样式只需要20行css代码,单独创建一个文件就划不来了。而且这个方法会导致每个页面都包含一堆css文件——因为有多少include,就得有多少css文件。

方法三:基于标记
  这个方案直观实际,与前一个类似。如果网站共有30个页面,其中10个含有form,那么可以创建一个css文件专门处理form的样式,只在这10个页面导入它。如果另外10个页面含有table,就创建一个文件专门处理table样式……诸如此类。

网站设计之合理架构CSS的更多相关文章

  1. 优化网站设计(十):最小化JAVASCRIPT和CSS

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  2. 优化网站设计(七):避免在CSS中使用表达式

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  3. 运用CSS改进网站设计的3个技巧

    CSS是一种分离表述编码和实际内容的一种最有用的方式,也是一种使搜索引擎最优化的方式,通常,网站设计中会建立一整套的css样式标准,这些标准存储在一个扩展名为css的单独文件中.然后利用HTML标签设 ...

  4. 触屏手机3G网站设计

    随着智能手机iphone和Android的热潮,衍生出基于Safari和Chrome浏览器的触屏手机网站Touch Screen Mobile Website. 触屏手机网站在中国还属于起步阶段,从行 ...

  5. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  6. [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

    目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...

  7. JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本

    一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...

  8. JavaScript网站设计实践(一)网站结构以及页面效果设计

    这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录 ...

  9. IE浏览器支持响应式网站设计

    目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...

随机推荐

  1. Codeforces.744B.Hongcow's Game(交互 按位统计)

    题目链接 \(Description\) 一个\(n\times n\)的非负整数矩阵\(A\),保证\(A_{i,i}=0\).现在你要对每个\(i\)求\(\min_{j\neq i}A_{i,j ...

  2. HDU 5813 Elegant Construction 构造

    Elegant Construction 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5813 Description Being an ACMer ...

  3. Android应用程序模型:应用程序,任务,进程,线程

    大多数操作系统,在应用程序所寄存的可执行程序映像(如Windows系统里的.exe).它所运行的进程以及和用户交互的图标和应用之间有一种严格的1对1关系.在Android系统里,这些关联要松散得多.并 ...

  4. STM32定时器级联 -- AN2592

    Master configuration When a timer is selected as a master timer, the corresponding trigger output si ...

  5. 收集的MySQL的面试题分享给大家

    1.怎样登陆mysql数据库 mysql -u username -p 2.怎样开启/关闭mysql服务 service mysql start/stop 3.查看mysql的状态 service m ...

  6. Snmp学习总结(五)——WindowsServer2008安装和配置SNMP

    一.安装SNMP 在Windows Server 2008以及Windows Server 2008 R2中,SNMP是以一个服务器功能的形式存在的,SNMP的安装步骤如下所示: 1.打开[开始]→[ ...

  7. TF400511: Your team has not defined any iterations to use as sprints

    tfs里面的冲刺对于开发团队来说, 是非常重要的一个功能,是团队开发进度的晴雨表: 但是如果从此死活出不来,怎么办呢? TF400511:您的团队尚未定义任何要用作冲刺 (sprint) 的迭代 TF ...

  8. lufylegend:图形变形2

    下面来详细讲解一下drawtriangles函数的使用方法.并且使用drawtriangles函数实现下面这种处理效果 因为这个方法是从AS3移植而来,所以它的使用方法和AS3基本一致,这里是AS3的 ...

  9. EBS已安装模块

    /* Formatted on 2018/3/15 11:14:51 (QP5 v5.256.13226.35538) */ SELECT fa.application_short_name , fp ...

  10. activity启动流程速记笔记

    Activity.startActivity(Intent intent)----Activity.startActivityForResult(Intent intent)----Instrumen ...