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

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

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

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

--- 未完待续---

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/283177.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【汇编语言】DEBUG的使用

在masm for windows中&#xff0c;需要先生存exe文件&#xff0c;然后再点调试按钮。 常用的命令有&#xff1a; R命令&#xff1a;查看、改变CPU寄存器的内容&#xff1b;如果要修改某个寄存器的内容&#xff0c;可以在r的后面接上空格和寄存器名。如&#xff1a;-r ax&#x…

centos6.6 源码安装mysql5.5_CentOS6.x下源码安装MySQL5.5

2. 卸载原有的mysql数据库[rootzabbix ~]# yum -y remove mysql mysql-server mysql-libs compat-mysql51[rootzabbix ~]# rm -rf /var/lib/mysql[rootzabbix ~]# rm /etc/my.cnf[rootzabbix ~]# rpm -qa|grep mysql #如果还能查询出来mysql文件&#xff0c;继续删除&#xff0…

学习韩立刚老师IT运维课程,成为韩立刚老师正式学生,在全国范围为你就近推荐工作。...

2018年5月21日&#xff0c;万恒教育成立IT运维就业指导部门&#xff0c;为韩立刚老师正式学生推荐工作&#xff0c;实习单位。和国内IT外包公司HR长期合作&#xff0c;韩立刚老师技术考核通过的学生&#xff0c;为学生在全国范围就近推荐工作。有学习IT运维课程&#xff0c;打算…

Leetcode 动态规划 Trapping Rain Water

本文为senlie原创。转载请保留此地址&#xff1a;http://blog.csdn.net/zhengsenlie Trapping Rain Water Total Accepted: 14568 Total Submissions: 50810My SubmissionsGiven n non-negative integers representing an elevation map where the width of each bar is 1, co…

白盒测试用例设计方法

一、白盒测试 根据软件产品的内部工作过程&#xff0c;在计算机上进行测试&#xff0c;以证实每种内部操作是否符合设计规格要求&#xff0c;所有内部成分是否已经过检查。这种测试方法就是白盒测试。白盒测试把测试对象看做一个打开的盒子&#xff0c;允许测试人员利用程序内部…

k8s 读书笔记 - 详解 Pod 调度(Ⅰ卷)

上一篇 《深入掌握 Pod》 文章我们介绍了 Pod 的知识点&#xff0c;接下来我们来继续学习 Pod 在 k8s 中的调度原理。在 k8s 平台上&#xff0c;通常情况下很少直接创建一个 Pod&#xff0c;大多情况下都是通过 Pod 的资源管理对象 来创建&#xff0c;例如&#xff1a;RC/RS、…

SaS中ne在mysql语句对应_SAS学习经验总结分享:篇四—SQL过程

SQL过程SQL过程是实现对数据集或关系数据库的表进行操作的过程&#xff0c;对数据集或关系数据库的表进行查询、修改、创建表、删除数据、插入数据和更新数据等功能。提现了SAS对大型数据库管理系统通用的SQL语言支持。SQL过程语法Proc sql ;数据操纵语句;quit;数据操纵语句&am…

.Net转Java自学之路—基础巩固篇八—总结(封装、继承、多态)

巴拉巴拉转载于:https://www.cnblogs.com/zltao/p/9074944.html

我对于全栈工程师的理解

对于才达到初级前端攻城狮的我来说&#xff0c;懵懵懂懂的我有了了解全栈工程师的机会&#xff0c;那什么是全栈工程师呢&#xff1f; 全栈工程师&#xff0c;也叫全端工程师(同时具备前端和后台能力)&#xff0c;英文Full Stack developer。是指掌握多种技能&#xff0c;并能利…

php数组操作集锦- 掌握了数组操作, 也就掌握了php

作为只是作为一种生存手段, 搞技术不用钻牛角尖! 有些东西, 只要大致了解, 如果已经进行了深入的了解, 但还是不能解决,就不要继续了... "专"相关的字, 只有 "钻" 金属旁的是zuan, 其余的都是 "zhuan" 包括: 转, 传, 专心.等等.. 其时, 要想掌握…

.NET MAUI实战 Navigation

1.概要用过WPF的小伙伴一般都用过Prism&#xff0c;Prism里面的导航概念在MAUI中也有类似的概念&#xff0c;在MAUI中是直接集成在框架中我们不需要安装任何其他的nuget包。直接使用Navigation对象即可,通常在移动平台中使用的更多&#xff0c;桌面程序中。我们先来看看微软官方…

mysql 修复表 阿里云_MySql数据表修复方法-阿里云开发者社区

mysqld进程在一个写入当中被杀死。计算机的意外关闭(例如&#xff0c;如果计算机掉电)。一个硬件错误这章描述如何检查和处理在MySQL数据库中的数据损坏。如果你的表损坏很多&#xff0c;你应该尝试找出其原因&#xff01;见G.1 调试一个MySQL服务器。在执行崩溃恢复时&#xf…

关于响应式布局,你必须要知道的

一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕&#xff0c;可以让网站的布局和功能随用户的使用环境&#xff08;屏幕大小、输入方式、设备/浏览器能力&#xff09;而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 二、视口 移动前端中常说…

python报错 scrolled: false_python 元组tuple - python基础入门(14)

文章首发微信公众号&#xff0c;微信搜索&#xff1a;猿说python在上一篇文章中我们讲解了关于python列表List的相关内容&#xff0c;今天给大家解释一下列表List的兄弟 – 元组&#xff0c;俗称: tuple.元组tuple和列表List类似&#xff0c;元组有如下特点&#xff1a;1.由一个…

SpringBoot集成Druid不支持多条SQL

在DataSource 初始化Bean 添加 List<Filter> proxyFilters new ArrayList<Filter>();WallFilter statFilter new WallFilter();WallConfig config new WallConfig();config.setMultiStatementAllow(true); // 批量操作statFilter.setConfig(config);proxyFilte…

搭建 vue2 单元测试环境(karma+mocha+webpack3)

从网上找了很多例子关于单元测试&#xff0c;都是如何新建项目的时候的添加单元测试&#xff0c;用vue-cli中怎么添加&#xff0c;但是我的项目已经生成了&#xff0c;不能再一次重新初始化&#xff0c;这时如何添加单元测试&#xff0c;这里面遇到了好多坑&#xff0c;写在这里…

开放原子开源峰会 - SmartIDE正式开源并发布v1.0版本丨IDCF

在上周刚刚结束的【2022开放原子全球开源峰会】上 SmartIDE作为正在进行开放原子基金会TOC审核的开源项目&#xff0c;在云原生论坛上向全球的开源开发者介绍了下一代云原生CloudIDE的全新使用体验&#xff0c;并且正式发布了 SmartIDE v1.0 版本。作者&#xff1a;徐磊文章首发…

【算法学习】网络流模板……

网络流最大流&#xff08;最小割&#xff09;Dinic模板…… 1 const int INF99999999; 2 const int Maxn; 3 const int Maxm; 4 inline int Min(int p,int q){return p<q?p:q;} 5 int n,m,h[Maxn5],to[Maxm*25],cap[Maxm*25],nxt[Maxm*25],tot1,Sum0,que[Maxn5],l,r,lv[Max…

给初学者的 RxJava2.0 教程 (八)

Outline [TOC] 前言 在上一节中, 我们学习了FLowable的一些基本知识, 同时也挖了许多坑, 这一节就让我们来填坑吧. 正题 在上一节中最后我们有个例子, 当上游一次性发送128个事件的时候是没有任何问题的, 一旦超过128就会抛出MissingBackpressureException异常, 提示你上游发太…

mysql数据库的目录_了解MySQl数据库目录

数据库目录是MySQL数据库服务器存放数据文件的地方&#xff0c;不仅包括有关表的文件&#xff0c;还包括数据文件和MySQL的服务器选项文件。不同的分发&#xff0c;数据库目录的缺省位置是不同的。数据目录的位置缺省的数据库位置缺省数据库的位置编译在服务器中。◆如果您是在…