1

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?

Improve this question
5
  • need it when you go from column to row Commented Dec 28, 2022 at 18:34
  • 5
    Technically it is not needed but for good practice, you should leave it: redundancy! If somewhere the flex-direction changes it will cause an unintended behavior The file-size is only marginal larger by that line but redundancy can save you or your team a lot of headache and time rather then finding an issue later and fixing it. Commented Dec 28, 2022 at 19:23
  • 1
    I do it all the time for clarity, to make sure it doesn't get accidently overridden when using equal selectors in different/updated CSS files or just to keep track of which box flexes how. Anyway, no biggy, I certainly wouldn't waste any time removing the redundancy. Next project, maybe... Commented Dec 30, 2022 at 0:16
  • 1
    This question is mostly about potential side-effects. I don't feel like its opinion based. OP is asking about whether or not an action is safe, not whether or not they should be doing it Commented Jan 10, 2023 at 14:37
  • While you're at it, you might want to set all CSS properties to the default of the browser. But it won't stop anybody from overriding the default value. A more specific selector or subsequent redeclaration will override any default. Otherwise there wouldn't be much to style with CSS. Commented Jan 12, 2023 at 20:25

3 Answers 3

Reset to default
5
+50

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is especially common for @media queries, you might want flex-direction: column in mobile first then change to default for wider screens
4

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.

Improve this answer

Comments

-4

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

Improve this answer

1 Comment

The OP knows it is the default; saying it is OK for the recursive reason of 'because it's the default' is not useful.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.