标签：TypeScript 原则 SOLID 前端样式 2022 CSS

2022 年 8 月前端更新：TypeScript、软件设计模式、焦点样式和单个 CSS 转换属性中的 SOLID 原则

本月我们将介绍 TypeScript 中的 SOLID 原则、React 应用程序的软件设计模式、焦点样式和新的单独 CSS 转换属性。

由 Whitespectre 工程团队提供

August 2022 Frontend Updates: SOLID Principles in TypeScript, Software Design Patterns, Focus Styles and Individual CSS Transform Properties

SOLID 是前五个面向对象设计原则的首字母缩写词罗伯特·C·马丁，软件工程师，畅销书作家和有影响力的创始人敏捷宣言 .

这些原则旨在使面向对象的设计更加灵活和可维护，避免代码异味并使代码重构更加容易。

Shopify 工程师何塞·米格尔·阿尔瓦雷斯写了一系列有趣的文章，介绍如何在 TypeScript 中通过实际示例应用这些原则。它们简洁明了，易于阅读和理解，因此请查看它们并确保您正在关注它们！

与 SOLID 原则一样，软件设计模式也是构建可维护和可扩展的 Web 应用程序的强大工具。莉迪亚·哈利和艾迪·奥斯马尼在 Awesome 中收集了很多应用于 React 和 JavaScript 的模式模式.dev 书，即免费下载 .

这本书已经是一个很好的资源，但网站本身就是模式的数字档案书中有关于 CodeSandbox 的实际示例和可视动画示例，非常棒且非常方便。

正如他们所说，设计模式是描述性的，而不是规定性的。仅仅因为您了解它们并不意味着您必须在任何地方使用它们，但它们是一种有价值且经过验证的资源，可用于解决其他人以前面临的特定和反复出现的问题。了解它们将帮助您提高解决问题的能力，去看一下！

如果您关心可访问性，焦点样式很重要。

浏览器使用 大纲 用于突出显示元素的 CSS 属性，这很棒，因为它不会破坏布局并且在强制颜色模式下效果很好。但与此同时，它的样式并不是最灵活的，让它看起来不错可能会很棘手。

如果您想仅使用背景或框阴影，请阅读曼努埃尔·马图佐维奇的文章会让你望而却步：大纲是你的朋友 .在他的文章中，您将了解为什么应该使用，或者至少回退到 大纲 如果您希望您的网站在强制颜色模式下可导航，同时您学习一些技巧以使您的焦点样式更具吸引力。

要将变换应用于元素，我们使用 CSS 转换 财产。住宿接受一个或多个 变换函数 ，一个接一个地应用。

 。目标 {  
 变换：平移X（50％）旋转（30度）缩放（2）；  
 }

使用单独的变换属性， 规模 , 旋转 ，和 翻译 可以单独使用来定义转换的那些部分。

 。目标 {  
 翻译：50% 0；  
 旋转：30度；  
 规模：2；  
 }

这对于悬停样式或动画和过渡效果很有趣，因为您可以更改其中一个属性，而无需重写整个变换声明。现在每个常青浏览器都支持它！

需要考虑的一件事是，与转换声明不同，各个声明不按照声明的顺序应用。检查规格了解如何计算变换矩阵 web.dev 中的这篇有趣的文章如果您想了解更多关于他们的信息！

你有什么要补充的吗？觉得少了点什么？联系我们 @whitespectrehq 或者领英 ，我们很乐意阅读您的反馈！

不要错过我们以前的故事：

标签：TypeScript,原则,SOLID,前端,样式,2022,CSS
From： https://www.cnblogs.com/amboke/p/16641564.html