MaintainableCSS 《可维护性 CSS》 --- 模板篇

2024-05-29 15:48:15

什么是模块(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. 创建预览订单模块

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

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

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

--- 未完待续---

转载于:https://www.cnblogs.com/lvyongbo/p/7112071.html

MaintainableCSS 《可维护性 CSS》 --- 模板篇相关推荐

漂亮、免费的CSS模板
本篇文章搜集整理的是CSS页面布局的一个很长的列表.如果你时间很少,那么可以下载已经准备好的CSS页面布局,如果你想进行个性化的尝试,下面列出了一些站点你可以不需过多努力而达到效果. 漂亮.免费的CS ...
html初始模板,CSS初始化模板（HTML+CSS模板）
[css] @charset "utf-8"; /* DIVCSS5-CSS初始化模板-www.divcss5.com */ body, p, address, blockquot ...
帮助你生成响应式布局的CSS模板 - xyCSS
日期:2013-1-31 来源:GBin1.com 在线演示在前面的文章中我们介绍了响应式的网格profound grid,用来帮助你开发固定或者响应式的流动布局设计,如果你希望使用纯CSS生成响 ...
10-C++远征之模板篇-学习笔记
C++远征之模板篇本文及代码收录于个人编程笔记(整理中,欢迎Star): https://github.com/mtianyan/Programming-Notebook 将会学到的内容: 模板函数 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
go html template 数据怎么加减乘除_Go 视图模板篇（五）：模板布局和继承
模板布局与继承在 Go 模板中,可以结合 define 指令和 template 指令实现模板布局功能. 首先编写一段服务端示例代码: package main import ( "htm ...
Transfer: 99款高质量免费(X)HTML/CSS模板
99款高质量免费(X)HTML/CSS模板投递人暴风彬彬发布于 2009-10-26 09:56 评论(8) 有3943人阅读 [收藏] 大家都清楚一个网站象征着你和你的品牌,这取决于你如何构建 ...
免费的css模板下载
免费的css模板下载收藏贴,有发现其他的会不断的更新,有时间去下载研究研究. http://www.freecsstemplates.org/ www.freewebtemplates.com 第一 ...
62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
20套各种风格影视动画公司响应式企业模电影上映影讯网站模板电影软件网页CSS模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
20套各种风格影视动画公司响应式企业模电影上映影讯网站模板电影软件网页CSS模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅是首页,二级页面,三级页面,登 ...

最新文章

热门文章