CODEWITHSUNDEEP
cssflexbox
mattsmith5
mattsmith5

Reputation: 1133

CSS Flex-Direction: Row Needed if Default?

We are utilizing React Typescript with CSS. Some people in our company use flex-direction: row, even though that's the CSS default.

Is there any reason to have flex-direction: row? Otherwise, will our team remove all code file lines using this? Just curious if there are any cases we need to be sure of. Are there any side effects or edge-case scenarios?

Upvotes: 1

Views: 1364

Answers (3)

tacoshy
tacoshy

Reputation: 13012

The question has to be looked upon and answered from different points of view.

Technical Point of View

Technically it is not necessary to declare a value that the UA (UserAgent) would apply by default. If you do not apply any value then the UserAgent would apply and as such, it would still work.

With that said the question remains if it would have any downside by declaring the value. In theory, declaring flex-direction: column; in ASCII will consume 25 bytes if you write it in a single line. Also, it would be slower to declare the property in CSS as it would then overwrite the UA.
However, it has to be noted, that with current CPU and internet speeds, it will be realistically immeasurable to measure the time increase. The time difference will be in ns and not even ms.


Productive Point of View

If we look at the productive point of view we have to look at how much time something takes to program, debug, fix, and maintain. Time costs money!
From a productive point of view, we want to have redundancy to ensure that something will work in this case, and in every other possible case that might appear. If it would not work in every case then someone needs time to find the issues and fix them. As said above, this would cost money. It also cost headaches for other developers and would show a lower quality that could influence further assignments with a customer.

In productivity, we should implement redundancy. This means, that we should declare default values or at least leave them if they are used. This ensures that the correct declared value will apply and not be overwritten by other declarations. Different libraries and frameworks could have other defaults that might apply otherwise.


Conclusion

If a default property has been declared then there is no real loss either in performance or file size. As such, there is no real downside to it. Removing that property could cause unintended issues that would cost time and money to find and fix. As such the risk of potential issues caused by removing that property outweighs the realistically non-existing downsides.

Upvotes: 4

Treycos
Treycos

Reputation: 7492

One scenario that may make a difference is CSS rule specificity. If an unspecific CSS selector is used to apply a non-default value to flex-direction, another developer could have forced it back to its original value with flex-direction: row.

Removing it could lead to a different layout:

.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>

These kind of semi-global rules that could cause trouble are usually used when some layout elements are made into columns very often in mobile websites and in media queries.

Upvotes: 5

sarwan developer
sarwan developer

Reputation: 9

Not any issue, You can remove the because by default flex-direction is a row. So you can remove this. For more details view this link: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Upvotes: -4

Related Questions