MaintainableCSS 《可维护性 CSS》 --- 模板篇
什么是模块(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》 --- 模板篇的更多相关文章
- css模板
最近好多人问我博客的css模板.... 现在是高三,没多少时间,趁放假赶紧更一下 主体就是把博客园的一个模板改动了一点 上面的图片特效,也是从别人那里得到的代码,大致就是下面那些,下面的三个图片换成自 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- Asp.net MVC3 CSS 模板
http://www.cnblogs.com/huyq2002/archive/2011/12/16/2289795.html Asp.net MVC3 CSS 模板 如果你现在正在用asp.net ...
- 初始CSS模板
/*开始 初始CSS模板 开始*/ body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4 ...
- 10-C++远征之模板篇-学习笔记
C++远征之模板篇 将会学到的内容: 模板函数 & 模板类 -> 标准模板类 友元函数 & 友元类 静态数据成员 & 静态成员函数 运算符重载: 一切皆有可能 友元函数 ...
- 《深入浅出WPF》笔记——模板篇
原文:<深入浅出WPF>笔记--模板篇 我们通常说的模板是用来参照的,同样在WPF中,模板是用来作为制作控件的参照. 一.认识模板 1.1WPF菜鸟看模板 前面的记录有提过,控件主要是算法 ...
- CSS效果篇--纯CSS+HTML实现checkbox的思路与实例
checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...
- CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...
随机推荐
- Linux系统 centOS 更换软件安装源
阿里云Linux安装软件镜像源阿里云是最近新出的一个镜像源.得益与阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源.阿里云Linux安装镜像源地址:http://mirrors.aliyun.c ...
- 科普HTTP Slow Attack 和 Apache DOS 漏洞的修复
导读 HTTP 的 Slow Attack 有着悠久历史的 HTTP DOS 攻击方式,最早大约追溯到 5 年前,按理说早该修复了,但是 Apache 的默认配置中仍然没有添加相关配置,或者他们认为这 ...
- 170609、Nginx配置文件详细说明
在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集与网络. #运行用户 user www-data; #启动进程,通常设置成和cpu的数量相等 worker_processe ...
- 如何在不改SQL的情况下优化数据库
主题简介 在数据库运维中我们会遇到各种各样的问题,这些问题的根源可能很明显,也可能被某种表象掩盖而使我们认不清.所以运维面临的两大问题就是,第一我们没有看清本质,第二应用不允许修改.那么我们如何解决这 ...
- Python开发【Django】:ModelForm操作
ModelForm 内容回顾: Model - 数据库操作 - 验证 class A(MOdel): user = email = pwd = Form class LoginForm(Form): ...
- 第1章 1.6计算机网络概述--OSI参考模型
ISO七层模式:国际标准组织对互联网通信规则进行的定义. 7.应用层:所有能产生网络流量的程序,如:QQ. 6.表示层:传输前对数据进行进行处理,是一种数据处理的规则,如:加密.压缩.传输二进制(图片 ...
- Django组件补充(缓存,信号,序列化)
Django组件补充(缓存,信号,序列化) Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑 ...
- js事件处理-整理
<!-- 作者:gentiana@163.com 时间:2016-3-10 描述:js事件处理 --> <!DOCTYPE html> <html> <hea ...
- supervisor安装及其配置
一.supervisor概述 supervisor是一个c/s系统,被用来在类Unix系统中监控进程状态.supervisor使用python开发. 服务端进程为supervisord,主要负责启动自 ...
- MyEclipse优化,解决MyEclipse运行慢、卡顿问题
工具: myeclipse2015 2.0 最近想用myeclipse做一下测试,发现myeclipse运行非常卡,直接影响代码的开发,而且还出现软件卡退的情况,让我十分恼火. 一.加大JVM的非 ...