CSS Flex-Direction: Row Needed if Default?



我们正在使用React Typescript和CSS。我们公司有些人使用flex-direction: row,,尽管这是默认的CSS。

有任何理由有flex-direction: row吗?否则,我们的团队会使用它删除所有的代码文件行吗?只是好奇有没有什么病例需要我们确认。有任何副作用或极端情况吗?

一个可能会产生影响的场景是CSS规则专用性。如果一个非特定的CSS选择器被用来应用一个非默认值到flex-direction,另一个开发人员可以强迫它回到flex-direction: row的原始值。

删除它可能会导致不同的布局:

.main-div {
display: flex;
gap: 1rem;
}
.main-div>* {
flex-direction: column;
}
.row {
flex-direction: row;
}
.container {
display: flex;
gap: 1rem;
}
.cube {
width: 5rem;
height: 4rem;
border-radius: 0.25rem;
background-color: cyan;
}
<div class="main-div">
<span>With row</span>
<div class="container row">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
<span>Without row</span>
<div class="container">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
</div>

这些可能会造成麻烦的半全局规则通常用于一些布局元素在移动网站和媒体查询中经常被做成列。

这个问题必须从不同的角度来看待和回答。

技术观点

从技术上讲,没有必要声明UA (UserAgent)默认应用的值。如果您不应用任何值,那么UserAgent将应用,因此,它仍然可以工作。

这样说的话,问题仍然是声明这个值是否有任何缺点。理论上,用ASCII声明flex-direction: column;将消耗25个字节,如果将其写在一行中。另外,在CSS中声明属性会比较慢,因为它会覆盖UA。然而,必须注意的是,以目前的CPU和互联网速度,测量时间的增加实际上是不可测量的。时差的单位是秒,而不是毫秒。


生产观点

如果我们从生产的角度来看,我们必须考虑编程、调试、修复和维护所花费的时间。时间就是金钱!
从生产的角度来看,我们想要有冗余,以确保某些东西在这种情况下工作,以及在任何其他可能出现的情况下。如果它不能在所有情况下都起作用,那么有人需要时间来发现问题并解决它们。如上所述,这需要花钱。它还会让其他开发人员头疼,并且会显示出较低的质量,从而影响与客户的进一步分配。

在生产力方面,我们应该实现冗余。这意味着,我们应该声明默认值,或者至少在使用它们时保留它们。这样可以确保应用正确的声明值,而不会被其他声明覆盖。不同的库和框架可能会有其他默认值。


结论

如果声明了默认属性,那么在性能或文件大小方面都不会有实际损失。因此,它并没有真正的缺点。删除该属性可能会导致意想不到的问题,需要花费时间和金钱来查找和修复。因此,删除该属性所引起的潜在问题的风险超过了实际不存在的缺点。

没有任何问题,您可以删除,因为默认情况下flex-direction是一行。所以你可以去掉这个。欲了解更多详情,请查看此链接:https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

最新更新