带音乐网站模板Php做网站创业

当前位置： 首页 > news >正文

带音乐网站模板,Php做网站创业,厦门网站建设一般多少钱,泰山信息科技有限公司当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 【第九章 CSS 的模块化与作用域】 ✔️ 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 9.2.1 模块中多个职责的拆分… 当前内容所在位置可进入专栏查看其他译好的章节内容 【第九章 CSS 的模块化与作用域】 ✔️ 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 9.2.1 模块中多个职责的拆分9.2.2 模块的命名 9.3 CSS 的作用域 9.3.1 CSS 作用域的就近原则9.3.2 划定作用域的边界9.3.3 CSS 中的隐式作用域9.3.4 关于 CSS 作用域与层叠图层 9.4 CSS 模式库 ✔️9.5 本章小结 ✔️ 文章目录 9.4 CSS 中的模式库 Pattern libraries9.4.1 采用 CSS 优先的工作流程 Using a CSS-first workflow9.4.2 重构与重大变更 Refactoring and breaking changes 9.5 本章小结 Summary 《CSS in Depth》新版封面 译者按 本篇为第 9 章的最后一节内容介绍了 CSS 模式库的相关知识。这一节整合了上一版中第 10 章的相关内容删除了之前关于 KSS 第三方工具库的使用说明更加聚焦 CSS 本身的组织管理和实际应用。尽管早期的 KSS 在样式的模块化管理方面提供了颇有价值的一站式解决方案但也存在诸多问题学习曲线相对陡峭、功能单一仅关注 CSS 的管理、未能跟进业内对设计系统的关注、项目打包集成困难、社区支持不足等等。因此第一版的第 10 章只保留了很少内容但也不失为了解 CSS 从中小型项目过渡到大型项目管理过程中经历的发展轨迹的重要参考资料同时也能从侧面理解当下 Ant Design 组件库等设计系统的优势所在。 9.4 CSS 中的模式库 Pattern libraries 开始用模块化的方式编写 CSS 后Web 页及 Web 应用的构建方式也将随之改变。一开始这些页面在构建时可能并没有什么特别之处可一段时间过后您会发现创建一个新页面所需要的很多模块都已经准备就绪了。比如新建一个媒体对象、或者下拉菜单亦或是导航菜单由于之前已经创建过一版了就积攒了一些现成的样式最后只需要按照恰当的方式在 HTML 中添加必要的元素标签和样式类即可。 因为模块都是可复用的所以在编写页面相关板块时就不用再往样式表添加新样式了。与以往先写 HTML 再设计样式的构建模式不同此时只要利用好这些现成的模块组装到一起就可以生成一个新页面。项目进行得越深入需要的新 CSS 就越少。这时我们需要关注的就不再是新的 CSS 声明而是样式表里所有可用的模块构成的模块清单了。 将模块清单整合为一组文档这在大型项目中已经成为通用做法。该文档有时也被称为 模式库pattern library。模式库并非网站或应用程序的一部分而是单独的一组 HTML 页面用来展示各个 CSS 模块的具体用法成为您和您的团队后续建站时的必备开发工具。 模式库的具体构建方法很大程度上取决于您熟悉的技术栈或者项目团队最终确定的技术选型。比如项目是用某个 JavaScript 框架开发的就可以考虑像 Storybookhttps://storybook.js.org/这样兼容该框架的构建工具或者直接手动构建一组 HTML 文档页并通过索引和具体示例来介绍模块的用法。 9.4.1 采用 CSS 优先的工作流程 Using a CSS-first workflow 在给网站或应用构建新模块时建议先将其添加到模式库中然后再应用于页面。这样的开发方案我称之为 CSS 优先CSS-first。 与之前先写 HTML 不同这时得先从 CSS 进行开发。在将样式应用到具体项目前您可以并且也应该按照构建模式库的方式来开发 CSS具体开发流程如下 开发页面时最好先有一个草图sketch或者原型图mockup或者其他可以描述页面效果的大致想法。看看模式库。找找现有模块如果满足页面需求就直接套用。然后从页面的外围主页面布局和容器开始按自己熟悉的方式逐步深入。如果现有模块足以构建整个页面就无需添加新的 CSS 了。偶尔也会遇到模式库无法提供的一些功能。这在项目开发早期很常见后面就会好很多。此时就要根据情况开发一个或多个新模块或者现有模块的新变体形式暂停正在开发的页面在模式库构建出该模块并为其书写文档确保其外观与行为模式符合预期。最后回到页面开发使用刚改好的样式表并将新模块添加到页面中。 这种开发方式有几个好处。首先这样写可以为网站提供一致性更好的界面。模式库鼓励开发者复用已有样式而非重复开发。比如项目中不应该为 10 个不同的页面分别编写 10 套不同的列表样式而是更倾向于复用仅有的几种列表类型。CSS 优先的开发方式会强迫开发者停下来思考是否需要新的样式、现有模块是否可以满足需求。 其次在按照模式库的方式开始模块时您可以孤立地看待问题可以从某个具体的 Web 页面抽离出来并专注于构建样式模块这样的单一任务上。不同于解决某个页面的某个具体问题思考新模块的潜在应用场景会相对容易一些并由此创建出一套通用性更好、可复用性更强的解决方案。 再次CSS 优先的方式还能让团队中的部分成员专注于 CSS 开发。对 CSS 不太熟悉的开发者可以将部分工作移交给经验更丰富的成员。擅长 CSS 的开发者每完成一个模块就可以向其他团队成员发送一个链接指向模式库中的该模块。 最后CSS 优先的开发方式还可以确保文档是最新的。模式库中的页面是您变更 CSS 样式的测试环境。换句话讲这些页面会一直呈现出最新的正确行为。修改 CSS 时使用文档恰好就在一旁的注释块中这样就可以轻松实现文档的实时更新了。 经常有开发者提问HTML 究竟该怎样编写才能让样式写起来更轻松。我认为这种提法本身就有问题。相反我们应该关注的是怎样编写样式使其可以更好地在任意页面间复用。我们应该先写好 CSS这样结构良好的 HTML 就是水到渠成的事了。而将 CSS 组织为模块就是一个行之有效的手段。一个 CSS 模块决定了其所需的 HTML 结构使得该样式能在页面上正常展示。 9.4.2 重构与重大变更 Refactoring and breaking changes 有时也会在修改模块时无需考虑向下兼容的情况。这么做无可厚非虽然多了一些活但好歹是可行的。可能您会先完成样式变更然后遍历整个网站或应用把每个 HTML 实例都更新一下让它们符合新的写法。 但我发现最好的做法往往是直接弃用该模块需要在文档中指明然后创建一个全新的模块来实现所需的新功能。这样一来旧模块就可以在原有页面继续生效而新页面的开发则可以往新模块迁移因为新模块支持全部功能。 为此可以使用一个包含三位数字的 语义版本semver 来为 CSS 设置版本号。一旦版本号变了开发者自然就知道模块内容改变了。 语义版本的定义 语义版本Semver —— Semantic Versioning 的简写是一种软件包版本的命名格式。它由三个数字组成各数字间使用圆点分隔例如 1.4.2。三个数字分别代表主版本号major version、次版本号minor version和修订版本号patch version。了解更多信息详见语义版本官网 https://semver.org/。 如果只涉及一些小修改比如 Bug 修复则增加修订版本号即可例如由 1.4.2 改为 1.4.3如果添加了新的模块或功能但对现有 HTML 不构成破坏或者将某个模块标记为已废弃deprecated时则增加次版本号同时将修订版本号置零例如由 1.4.2 改为 1.5.0再有在极少数情况下我会过一遍样式表并将标记为已废弃的模块全部删掉这时就该升级主版本号例如由 1.4.2 改为 2.0.0。而当出现重大设计变更时例如网站重新设计了即便现有 API 接口 1 保持不变也需要升级主版本号。 实际上版本管理可以采用多种方式具体取决于使用这些样式的项目实际情况。如果要在 Node.js 模块或者 Ruby Gem 中引入 CSS那就得用相应的系统构建的版本如果要在服务器上提供 CSS 静态访问则可以在 URL 中包含版本号如 http://example.com/css/1.4.2/styles.css并同时支持多个版本。 利用这种方式就可以按照需求配置项目并使用任意版本的 CSS 了。您可以发布一个包含重大更新的 3.0.0 版本而 Web 应用则可以继续沿用旧版本直到开发者彻底更新一遍 HTML 并升级所有已废弃的模块。只要不是刻意升级到新版样式表改动个别 CSS 并不会破坏现有应用的正常显示。 模式库文档列出了样式表的使用方法但 HTML 具体启用哪个样式表、采用哪个版本的样式则是开发者说了算。由于 HTML 和 CSS 实现了解耦decoupledCSS 可以写好了再应用到 HTML而在升级新样式表时HTML 也是完全可控的。这就是 CSS 优先开发的优势所在。 修改模式库时最好不要一意孤行先和团队里的其他开发者沟通一下再决定是否弃用或删除某个模块。必要时可以通过收集他人的反馈来综合判断哪些模块是有用的哪些已经不再需要了。 通常来讲CSS 是一门“只增不减”“additive-only”的语言。开发者害怕去编辑或删除那些已有的样式因为他们无法预判这些修改会造成什么样的后果。于是不得不编写新的 CSS 代码然后添加到样式表底部或者通过不断提升选择器优先级来覆盖现有样式规则最终让样式表沦为一堆乱麻而难以维护。 而通过模块化的方式组织 CSS 代码就可以避免陷入这样尴尬的境地。您会清晰地知道某个模块样式位于何处每个模块都分工明确只实现某一个功能。同时模式库还有助于开发者密切关注样式表开发过程中的一举一动。 9.5 本章小结 Summary 模块时一段可复用的小型样式片段不依赖于页面上下文。模块样式应该集中写到样式表的某个位置并按照代码封装的相关原则进行组织。模块化 CSS 绝不能进入另一个模块以期修改其外观。变体类Variant classes提供了同一模块样式的不同版本。大型页面构造应该拆分成多个小型模块并通过组装多个模块来构建出页面。双连字符以及双下划线的命名约定能让模块的结构一目了然。scope 规则是 CSS 全新推出的一项功能可以让一组样式在页面的指定作用域内生效。它是将模块化样式限定在目标模块内的理想工具。通过划定内部作用域边界还可以防止该作用域内的样式声明对边界内部的作用域生效。使用时需要留意该特性最新的浏览器支持情况。在大型项目中可以考虑构建一个模块库来记录和清点项目所使用的模块并将其作为组装新页面时现有样式模块的参考文档。 关于《CSS in Depth》中译本书名《深入解析 CSS》 第 1 版第 2 版读者评分原版4.7亚马逊中文版9.3豆瓣原版5.0亚马逊中文版暂无待出版出版时间原版2018 年 3 月中文版2020 年 4 月原版2024 年 7 月中文版暂无待出版原价原版\(44.99中文版139.00原版\)59.99中文版暂无待出版现价原版\(36.49中文版52.54 起步原版\)52.09中文版暂无待出版原版国内预订起步价 461.00起步价 750.00 本专栏为该书第 2 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待 目前已完结的章节可进入本专栏查看详情连载期间完全免费 第一章 层叠、优先级与继承已完结 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位已完结 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型已完结 3.1 常规文档流3.2 盒模型3.3 元素的高度3.4 负的外边距3.5 外边距折叠3.6 容器内的元素间距问题3.7 本章小结 第四章 Flexbox 布局已完结 4.1 Flexbox 布局原理4.2 弹性子元素的大小4.3 弹性布局的方向4.4 对齐、间距等细节处4.5 本章小结 第五章 网格布局已完结 5.1 构建基础网格5.2 网格结构剖析 上 5.2.1 网格线的编号下5.2.2 网格与 Flexbox 配合下 5.3 两种替代语法 5.3.1 命名网格线5.3.2 命名网格区域 5.4 显式网格与隐式网格上 5.4.1 添加变化 中5.4.2 让网格元素填满网格轨道下 5.5 子网格全新增补内容5.6 对齐相关的属性5.7 本章小结 第六章 定位与堆叠上下文已完结 6.1 固定定位 6.1.1 创建一个固定定位的模态对话框6.1.2 在模态对话框打开时防止屏幕滚动6.1.3 控制定位元素的大小 6.2 绝对定位 6.2.1 关闭按钮的绝对定位6.2.2 伪元素的定位问题 6.3 相对定位 6.3.1 创建下拉菜单上6.3.2 创建 CSS 三角形下 6.4 堆叠上下文与 z-index 6.4.1 理解渲染过程与堆叠顺序上6.4.2 用 z-index 控制堆叠顺序上6.4.3 深入理解堆叠上下文下 6.5 粘性定位6.6 本章小结 第七章 响应式设计已完结 7.1 移动端优先设计原则上篇 7.1.1 创建移动端菜单下篇7.1.2 给视口添加 meta 标签下篇 7.2 媒体查询上篇 7.2.1 深入理解媒体查询的类型上篇7.2.2 页面断点的添加中篇7.2.3 响应式列的添加下篇 7.3 流式布局7.4 响应式图片7.5 本章小结 第八章 层叠图层及其嵌套 8.1 用 layer 图层来操控层叠规则上篇 8.1.1 图层的定义上篇8.1.2 图层的顺序与优先级下篇8.1.3 revert-layer 关键字下篇 8.2 层叠图层的推荐组织方案8.3 伪类 :is() 和 :where() 的用法8.4 CSS 嵌套的使用 8.4.1 嵌套选择器的使用8.4.2 深入理解嵌套选择器8.4.3 媒体查询及其他 规则 的嵌套 8.5 本章小结 作者在这里使用了 API 接口的说法因为他认为模式库的启用在某种意义上相当于维护了一组与 CSS 进行交互的 API 接口。新版中删掉了上一版的相关解释这里补充说明。 ↩︎