详解CSS的DRY编程方式

   DRY就是Donot repeat youself 不要重复。但其实这个名字有点无趣,哪个理论不是消除重复呢,但如何消除才是意义所在。总的来说我认为DRYCSS与OOCSS是两个极端,所以我将会以对比的方式来讲讲DRYCSS的内容。使用DRYCSS很简单,三步。

  1. 分组可复用属性

  DRYCSS跟OOCSS有点像,第一步都是分组样式,消除重复,但就像我说的,关键在于如何。OOCSS将样式集合看作对象,所以分组的逻辑是,某个元素本身应该是什么样的,而DRYCSS则关注重复,无论什么逻辑,只要是一样的就应该只有一个。其中粒度是值得思考的问题,如果太细,那只会成为一行样式一组这样无意义的情况,如果太粗,又会变成毫无复用性的庞然大物。我认为可以将一些有关联的缺了A时B就没作用的样式分为一组,还可以将某些惯用搭配分为一组。下面举个例子:

  CSS Code复制内容到剪贴板

  {

  float: left;

  position: absolute;

  display: inline-block;

  overflow: hidden;

  }

  这是一组样式,可用来触发Block formatting Contexts(块级格式化上下文),如此就完成了一组样式。接着再写2组关于尺寸的样式吧。

  CSS Code复制内容到剪贴板

  {

  width: 960px;

  height: auto;

  }

  {

  width: 720px;

  height: 600px;

  }

  {

  width: 220px;

  height: 600px;

  }

  这是三组样式用来布局,将页面分为左右两部分。

  2. 按逻辑为分组命名

  接着我们来为其命名,其实就是添加一个ID选择器,但是我们并不真的使用它,而是用来标示该组样式。下面就来命名上面所分组的样式。

  CSS Code复制内容到剪贴板

  #BLOCK_FORMATTING_CONTEXTS

  {

  float: left;

  position: absolute;

  display: inline-block;

  overflow: hidden;

  }

  #LAYOUT_FULL

  {

  width: 960px;

  height: auto;

  }

  #LAYOUT_CONTENT

  {

  width: 720px;

  height: 600px;

  }

  #LAYOUT_SIDEBAR

  {

  width: 220px;

  height: 600px;

  }

  这一步类似OOCSS的class,它决定了每组样式所代表的逻辑或用途,然而DRYCSS多了最关键的下一步,也是与OOCSS本质区别。

  3. 为各个分组添加选择器

  DRYCSS在使用时和OOCSS有着巨大的差异,在CSS文件中写入HTML中的class选择器来使用这些分组后的样式,而不是直接在HTML中使用CSS文件中写好的class。

  CSS Code复制内容到剪贴板

  .header,

  .container,

  .content-rightright,

  .content-left,

  #BLOCK_FORMATTING_CONTEXTS

  {

  float: left;

  position: absolute;

  display: inline-block;

  overflow: hidden;

  }

  .header,

  .navigator,

  .container,

  #LAYOUT_FULL

  {

  width: 960px;

  height: auto;

  }

  .content-rightright,

  .section,

  #LAYOUT_CONTENT

  {

  width: 720px;

  height: 600px;

  }

  .content-rightright,

  .sidebar,

  .profile,

  #LAYOUT_SIDEBAR

  {

  width: 220px;

  height: 600px;

  }

  可以看到,使用DRYCSS时,在HTML中所写的class将会非常表意,元素本身是什么用来做什么,就使用其意义的class命名,而且基本上是一个元素对应一个class,HTML将变的简单明了。另外DRYCSS也是相对于OOCSS的一种逆向思维,这才是最有趣的地方。在开发中,不应该像OOCSS那样思考如何应对未来假象的HTML,而是仅仅思考CSS本身。

  总的来说,OOCSS适合开发CSS框架或整套UI模版,是自外向内的UI开发方式;而DRYCSS则适合拯救混沌的HTML,或者加强HTML的结构性和表意性,是自内向外的UI开发方式。这里的内指地是HTML结构,外指地是CSS样式。

时间: 2024-09-23 22:27:13

详解CSS的DRY编程方式的相关文章

详解Linux的SOCKET编程_C 语言

本篇文章对Linux的SOCKET编程进行了详细解释文章后面分享了一个编程实例供大家学习. 1. 网络中进程之间如何通信 进程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行为保证两个相互通信的进程之间既互不干扰又协调一致工作操作系统为进程通信提供了相应设施如 UNIX BSD有管道pipe.命名管道named pipe软中断信号signal UNIX system V有消息message.共享存储区shared memory和信号量semaphore)等. 他们都仅限于用在本

精彩实例详解CSS滤镜教程

css|教程|滤镜|详解 使您由浅入深了解CSS滤镜的使用,是一个不错的教程!希望对您学习CSS有用! 1.实例详解CSS滤镜(1)概述 (2005-05-04) 2.实例详解CSS滤镜(2)Mask属性 (2005-05-04) 3.实例详解CSS滤镜(3)Blur属性 (2005-05-04) 4.实例详解CSS滤镜(4)Chroma属性 (2005-05-04) 5.实例详解CSS滤镜(5)DropShadow属性 (2005-05-04) 6.实例详解CSS滤镜(6)Glow属性 (20

详解Angular2中的编程对象Observable_AngularJS

前言 RxJs提供的核心是Observable对象,它是一个使用可观察数据序列实现组合异步和事件编程. 跟这个很类似的异步编程模型是Promise,Promise是基于状态变化的异步模型,一旦由等待状态进入成功或失败状态便不能再次修改,当状态变化时订阅者只能够拿到一个值:而Observable是基于序列的异步编程模型,随着序列的变化,订阅者可以持续不断的获取新的值.而且Promise只提供回话机制,并没有更多的操作来支持对结果的复杂处理,而Observable提供了多种多样的操作符,来处理运算结

详解Java的设计模式编程中的原型模式_java

定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象.类型:创建类模式类图: 原型模式主要用于对象的复制,它的核心是就是类图中的原型类Prototype.Prototype类需要具备以下两个条件: 实现Cloneable接口.在java语言有一个Cloneable接口,它的作用只有一个,就是在运行时通知虚拟机可以安全地在实现了此接口的类上使用clone方法.在java虚拟机中,只有实现了这个接口的类才可以被拷贝,否则在运行时会抛出CloneNotSupportedException

实例详解Android文件存储数据方式_Android

总体的来讲,数据存储方式有三种:一个是文件,一个是数据库,另一个则是网络.下面通过本文给大家介绍Android文件存储数据方式. 1.文件存储数据使用了Java中的IO操作来进行文件的保存和读取,只不过Android在Context类中封装好了输入流和输出流的获取方法. 创建的存储文件保存在/data/data/<package name>/files文件夹下. 2.操作. 保存文件内容:通过Context.openFileOutput获取输出流,参数分别为文件名和存储模式. 读取文件内容:通

实例详解Android文件存储数据方式

总体的来讲,数据存储方式有三种:一个是文件,一个是数据库,另一个则是网络.下面通过本文给大家介绍Android文件存储数据方式. 1.文件存储数据使用了Java中的IO操作来进行文件的保存和读取,只不过Android在Context类中封装好了输入流和输出流的获取方法. 创建的存储文件保存在/data/data/<package name>/files文件夹下. 2.操作. 保存文件内容:通过Context.openFileOutput获取输出流,参数分别为文件名和存储模式. 读取文件内容:通

详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

详解CSS的定位语法应用

css|详解|语法 一.CSS定位:position 语法: position : static | absolute | fixed | relative  取值: static  : 默认值.无特殊定位,对象遵循HTML定位规则  absolute  : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依据 body 对象.而其层叠通过 z-index 属性定义  f

详解CSS布局设计块元素和内联元素

css|设计|详解 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P."form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout