Re:Write HTML Like It's 1999
by trnglina on Saturday June 08, 2019 @02:48PM
(#20134248)
And for anyone who isn't familiar with (what I would consider) the most important difference in this use-case: borders affect the positioning of other elements, whereas outlines do not. You don't want to be using a temporary border, since it can significantly affect the layout of your site when you remove it.
[ Parent
| on HN ]
* { box-sizing: border-box; }
I have never wanted anything other than this behaviour, so I pretty much always include it when starting on a fresh project.
Re:Write HTML Like It's 1999
by adamwathan on Saturday June 08, 2019 @03:43PM
(#20134643)
Borders still affect the positioning of things even with box-sizing set to border-box. For example, here "Block 1" is still two pixels taller than "Block 2":
<div style="padding: 8px; border: 1px solid black"> Block 1 </div>
<div style="padding: 8px;"> Block 2 </div>
Re:Write HTML Like It's 1999
by GrantSolar on Saturday June 08, 2019 @03:55PM
(#20134724)
Does that really matter though? A difference of 2px for something temporary doesn't seem like much concern. While I understand the implication is that these can accumulate and cause larger layout issues, the purpose of this practice is to highlight those areas to remove that accumulation anyway
Re:Write HTML Like It's 1999
by ComputerGuru on Sunday June 09, 2019 @12:31AM
(#20137129)
The bigger issue is that you don't know if a UI inconsistency is a bug or a side-effect.
For this case of debugging, though, borders might actually be preferable because outlines would overlap, potentially obscuring the DOM depth
When I'm coding DIV layouts by hand, I temporarily assign each DIV with a random background-color. Once I have the layout and responsiveness required, I strip the background-color setting on each DIV as I fill them up with content. Works for me.
Re:Write HTML Like It's 1999
by whalesalad on Saturday June 08, 2019 @04:05PM
(#20134794)
Yep, that is exactly why I do this! Great explanation.