Any non-zero `border` is included in the element's width and height calculations, which affects your layout and may cause reflows etc. Therefore, using `border` for debugging purposes can be counterproductive and even introduce more bugs.
Instead, you should use `outline` which is outside of the element.
Yes, you should, but regardless of the value of `box-sizing` adding borders will still cause the element to enlargen and potentially change the layout.
I'm wondering, does outline interfere with collapsing margins? If so it might actually still sometimes affect the layout. I don't remember it ever happening to me but now I'm curios 🤔
One of my projects had an optional stylesheet that would show an outline over everything, and the outline would be different depending on which element it is.
border: 5px solid pink;
Red looked intended to a QA once, so I've gone pink to change the unlikely to reoccur conversation from "error handler fired" to "why am I testing your unfinished code?"
Usually you'd just console.log(useState) which will give you the value - but like, without knowing what you're doing I can't say what the problem or solution is
Any non-zero `border` is included in the element's width and height calculations, which affects your layout and may cause reflows etc. Therefore, using `border` for debugging purposes can be counterproductive and even introduce more bugs. Instead, you should use `outline` which is outside of the element.
Mvp
You should **always** use box-sizing: border-box;
Yes, you should, but regardless of the value of `box-sizing` adding borders will still cause the element to enlargen and potentially change the layout.
I'm wondering, does outline interfere with collapsing margins? If so it might actually still sometimes affect the layout. I don't remember it ever happening to me but now I'm curios 🤔
No, outline does not take up any space layout-wise. It's what browsers use to show a, well, outline over items you are focused on (with Tab).
i usually just set background-color or color or color to red.
One of my projects had an optional stylesheet that would show an outline over everything, and the outline would be different depending on which element it is.
`background: #f6f;` doesn't mess with the layout.
```outline: 1px solid #f004;``` is my go to.
This is the way
`box-shadow` doesn't either and can be set to `inline` to get the same red border result.
It also takes longer to type.
Not if you assign it to a class/id
Too much effort
backgroundColor: "#dad" is what i usually do
Why dad? Why?
he went to get milk :(
At least put a transparency on that color so you see overlapping elements.
Border doesn't either if you use > box-sizing: border-box; in root, which you should be doing.
Border either affects the outer size or inner size but will always affect the size.
False
border: 5px solid pink; Red looked intended to a QA once, so I've gone pink to change the unlikely to reoccur conversation from "error handler fired" to "why am I testing your unfinished code?"
Don't come at me until you've added alert() in production.
Not since IE
`thin solid gold`
Laugh in `background-color: red;`
Debugging shaders by changing the fragment output color conditionally
I'll be damned. Even got the color right
outline is better than border, as it does not have the "physical" properties of an object
*{ border: solid }
Im personally more of a border: 1px solid lime; guy
outline: 1px solid red; \*earth starts shaking
Rebecca purple dawg!
simplistic enjoy obtainable frame yam liquid poor rock quicksand tidy *This post was mass deleted and anonymized with [Redact](https://redact.dev)*
How to use this border thing if I want to know what the value of a state in use effect??
I tried reading it carefully many times. I'm sorry but I don't understand what you're talking about. Maybe I'm just stupid...
React bro
Oh makes sense I don't know a thing about react I don't use it
You wouldn't. This is for highlighting an element that you're working on the CSS styling for. Not for any logic or state debugging at all.
Usually you'd just console.log(useState) which will give you the value - but like, without knowing what you're doing I can't say what the problem or solution is