什么是模块(Modules) ?

模块是一个特别的独立单元,可以与其他模块组合以形成更复杂的结构。

在客厅里,我们可以认为电视,沙发和墙艺术是模块。它们聚在一起创造一个可用的房间。

如果我们把其中一个拿走,其他的能继续工作。我们不需要电视,也可以坐在沙发上等等。

什么是组件(Component) ?

模块是由组件组成的。没有组件,模块会不完整。

例如,沙发由框架,室内装潢,腿,靠垫和后枕组成,所有这些都是必要的组件,以使沙发能够正常运作。

徽标模块可以包括副本,图像和链接,这些每个都是组件。没有图像的标志是残缺的,没有链接标志是也是不完整的。

Modules vs components

有时很难说某样东西是一个组件还是一个模块。例如,我们可能有一个包含徽标和菜单的标题。这些是组件还是模块?

通过经验,你会找到感觉吧。如果不对,就把组件更改成模块,这很容易。

这只是理论,我们一起构建三个不同的模块。在这样做的时候,希望能够覆盖编写CSS时候考虑的大部分事情。

1. 创建一个购物篮模块。

为了简洁,我们把这个购物篮简化。购物篮中每个产品会显示标题,并且可以把它移除。

购物篮模板可能是:

<div class="basket">
<h1 class="basket-title">Your basket</h1>
<div class="basket-item">
<h3 class="basket-productTitle">Product title</h3>
<form>
<input type="submit" class="basket-removeButton" value="Remove">
</form>
</div>
</div>

CSS 代码:

.basket {}
.basket-title {}
.basket-item {}
.basket-productTitle {}
.basket-removeButton {}

2. 创建预览订单模块

接下来,我们将构建一个预览订单模块。这个模块会在结帐时候显示,它与购物篮有些相似。比如,它有标题,可以显示产品列表。

但是,它俩样式不同,并且预览订单中的产品不能被移除。

首要的是,复用购物篮的模板和样式。它们即使有相似,但却不同。

--- 未完待续---

MaintainableCSS 《可维护性 CSS》 --- 模板篇的更多相关文章

  1. css模板

    最近好多人问我博客的css模板.... 现在是高三,没多少时间,趁放假赶紧更一下 主体就是把博客园的一个模板改动了一点 上面的图片特效,也是从别人那里得到的代码,大致就是下面那些,下面的三个图片换成自 ...

  2. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  3. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  4. Asp.net MVC3 CSS 模板

    http://www.cnblogs.com/huyq2002/archive/2011/12/16/2289795.html Asp.net MVC3 CSS 模板 如果你现在正在用asp.net ...

  5. 初始CSS模板

    /*开始 初始CSS模板 开始*/ body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4 ...

  6. 10-C++远征之模板篇-学习笔记

    C++远征之模板篇 将会学到的内容: 模板函数 & 模板类 -> 标准模板类 友元函数 & 友元类 静态数据成员 & 静态成员函数 运算符重载: 一切皆有可能 友元函数 ...

  7. 《深入浅出WPF》笔记——模板篇

    原文:<深入浅出WPF>笔记--模板篇 我们通常说的模板是用来参照的,同样在WPF中,模板是用来作为制作控件的参照. 一.认识模板 1.1WPF菜鸟看模板 前面的记录有提过,控件主要是算法 ...

  8. CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

    checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...

  9. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

随机推荐

  1. Linux系统下 Apache+PHP 环境安装搭建

    一.安装Apache2.2.221.到官网下载  http://httpd.apache.org/download.cgi ,选择相应的版本 可以先下载到windows系统中,上传到linux, 也可 ...

  2. Spring应用配置文件上传的两种方案

    欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...

  3. postgresql----排序ORDER BY,分组GROUP BY,分页OFFSET&&LIMIT

    一.GROUP BY 使用GROUP BY分组查询在SELECT子句中只能出现分组字段和聚合函数,HAVING子句相当于WHERE,使用条件过滤数据. 示例1.以a,b分组查询tbl_insert表, ...

  4. 升级mac xcode打包证书报错 git 报错

    reset tryAgain git 在钥匙串中找不到指定的项  重新配置公钥撕咬 SSH keys An SSH key allows you to establish a secure conne ...

  5. JSON_CONTAINS

    select * from tb    where info->'$.name' = '特价促销'  or JSON_CONTAINS(info->'$[*].name', '" ...

  6. 聪明的打字员---poj1184(bfs)

    题目链接:http://poj.org/problem?id=1184 分析:首先可以发现有6*10^6种状态,比较多,不过搜索的时候可以去除一些无用的状态, 可以发现一个点的值(2-5)如果想要改变 ...

  7. sailsjs入门到精通(一)

    sailsjs  官方网站http://sailsjs.com/ 中文网站: http://sailsdoc.swift.ren/ 1 全局安装sails  npm install sails@bet ...

  8. 迁移学习与fine-tuning有什么区别

    假设你要处理一个新数据集,让你做图片分类,这个数据集是关于Flowers的,问题是,数据集中flower的类别很少,数据集中的数据也不多,你发现从零开始训练CNN的效果很差,很容易过拟合,怎么办呢,于 ...

  9. (1.3)DML增强功能-Apply、pivot、unpivot、for xml path行列转换

    深入了解行列转换请参考另一篇文章:https://www.cnblogs.com/gered/p/9271581.html 总结: 1.apply一般形式 --基本形式 SELECT a FROM d ...

  10. Linux(CentOS)系统下搭建svn服务器

    由于GitHub的私有项目需要收费,gitlab对服务器的要求必须是4GB内存以上.对于一些个人的小型项目,想要免费的版本控制工具来管理自己的代码,又不想代码公开,无疑SVN是比较好的选择.windo ...