大部分同学都用过CSS的屏幕宽度媒体查询，像是这样：@mediascreenand(min-width:900px){div{padding:1rem3rem;}}这里表示的是与屏幕宽度相关的样式设置，上面的代码表示当屏幕宽度大于900px时，内部的样式代码块才能生效。其实不仅仅是上面的屏幕宽度媒体查询，在CSS中，存在大量的以@符号开头的规则。称之为@规则(at-rule)。本文就将介绍一下除去媒体查询之外，其他有意思的且在未来会越来越重要的@规则规则。at-rule@规则OK，什么是@规则（at-rule）呢？一个 at-rule 是一个CSS语句，以at符号开头，'@'(U+0040CO
大部分同学都用过CSS的屏幕宽度媒体查询，像是这样：@mediascreenand(min-width:900px){div{padding:1rem3rem;}}这里表示的是与屏幕宽度相关的样式设置，上面的代码表示当屏幕宽度大于900px时，内部的样式代码块才能生效。其实不仅仅是上面的屏幕宽度媒体查询，在CSS中，存在大量的以@符号开头的规则。称之为@规则(at-rule)。本文就将介绍一下除去媒体查询之外，其他有意思的且在未来会越来越重要的@规则规则。at-rule@规则OK，什么是@规则（at-rule）呢？一个 at-rule 是一个CSS语句，以at符号开头，'@'(U+0040CO
At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。常用规则@import@import主要用于从其他样式表导入新的样式规则，语法：@importurl|stringlist-of-mediaqueries;。url|string：需要引入的样式资源路径，相对路径或绝对路径都可以；list-of-mediaqueries：逗号分隔的条件列表，判断什么条件下才引入该样式资源，支持媒体查询条件。@import"./reset.css";
At-rules规则是目前CSS中一种常见的语法规则，它使用一个"@"符号加一个关键词定义，后面跟上语法区块，如果没有则以分号结束即可。这种规则一般用于标识文档、引入外部样式、条件判断等等，本文是对该规则的使用总结。常用规则@import@import主要用于从其他样式表导入新的样式规则，语法：@importurl|stringlist-of-mediaqueries;。url|string：需要引入的样式资源路径，相对路径或绝对路径都可以；list-of-mediaqueries：逗号分隔的条件列表，判断什么条件下才引入该样式资源，支持媒体查询条件。@import"./reset.css";
我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。兼容性问题第三方依赖兼容问题React-最低v16.9，部分组件使用hooks重构react升级相关文档Less-最低v3.1.0，建议升级到less4.x@ant-design/icons-antd-不再内置Icon组件，请使用独立的包对3.x的兼容性处理或许是考虑到部分组件升级的毁坏性，antd4.x中依然保留了对3.x版本的兼容，废弃的组件通过@ant-design/compatible保持兼容，例如Icon,Form注：建议@ant-design/compati
我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。兼容性问题第三方依赖兼容问题React-最低v16.9，部分组件使用hooks重构react升级相关文档Less-最低v3.1.0，建议升级到less4.x@ant-design/icons-antd-不再内置Icon组件，请使用独立的包对3.x的兼容性处理或许是考虑到部分组件升级的毁坏性，antd4.x中依然保留了对3.x版本的兼容，废弃的组件通过@ant-design/compatible保持兼容，例如Icon,Form注：建议@ant-design/compati
袋鼠云数栈从2016年发布第⼀个版本开始，就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信创路线，不断推进产品功能迭代、技术创新、服务细化和性能升级。在数栈过去的产品迭代中受限于当前组件的版本，积累了很多待解决的问题，随着新的功能需求不断增加，很多原先的组件以及交互设计需要进行优化。2月，伴随着数栈UI5.0的焕新升级，数栈前端团队一起将组件框架antd从v3.x升级到了v4.x，更新组件的UI，提升产品的交互体验，使数栈产品能够更加灵活地适应未来产品功能迭代的需求。本文将总结归纳袋鼠云数栈前端框架Antd从3.x升级到4.x的相关步骤，及在这个过程中踩
袋鼠云数栈从2016年发布第⼀个版本开始，就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信创路线，不断推进产品功能迭代、技术创新、服务细化和性能升级。在数栈过去的产品迭代中受限于当前组件的版本，积累了很多待解决的问题，随着新的功能需求不断增加，很多原先的组件以及交互设计需要进行优化。2月，伴随着数栈UI5.0的焕新升级，数栈前端团队一起将组件框架antd从v3.x升级到了v4.x，更新组件的UI，提升产品的交互体验，使数栈产品能够更加灵活地适应未来产品功能迭代的需求。本文将总结归纳袋鼠云数栈前端框架Antd从3.x升级到4.x的相关步骤，及在这个过程中踩
“我们如何证明，通过遵循“代码整洁之道”（CleanCode）就可以编写更多的代码呢？”当人们试图将“代码整洁之道（CleanCode）”的原则应用于现有的代码库时，我经常会问这个问题。我认为这是合情合理的。当我们开始重构遗留代码时，通常会将内容提取到较小的方法中。然后再将方法提取到类中。很快，我们可能就能感觉到原来30行的方法现在已经分散在不同的类中。我们想知道的是：这在实际上是否是更容易维护了呢。也许我们是一个小团队。也许我们必须支持我们继承的一个相对较大（并且没有文档记录的）的代码库。寻求代码可维护性是一件好事。错误在于，认为代码可维护性与代码行数（linesofcode，LOC）相关。
“我们如何证明，通过遵循“代码整洁之道”（CleanCode）就可以编写更多的代码呢？”当人们试图将“代码整洁之道（CleanCode）”的原则应用于现有的代码库时，我经常会问这个问题。我认为这是合情合理的。当我们开始重构遗留代码时，通常会将内容提取到较小的方法中。然后再将方法提取到类中。很快，我们可能就能感觉到原来30行的方法现在已经分散在不同的类中。我们想知道的是：这在实际上是否是更容易维护了呢。也许我们是一个小团队。也许我们必须支持我们继承的一个相对较大（并且没有文档记录的）的代码库。寻求代码可维护性是一件好事。错误在于，认为代码可维护性与代码行数（linesofcode，LOC）相关。
