Best practice when styling forms

Hello, I read the following in MDN (see picture).... is that recommended?

3 Replies

13eck•3mo ago

Your very first line of CSS in every single CSS file ever should always be:

*, *::before, *::after { box-sizing: border-box; }

*, *::before, *::after { box-sizing: border-box; }

So in that regard yes, form inputs should be border-box lol. But I disagree with "set margins and padding to 0 on all elements, then add these back in when styling particular controls:" bit. Why remove it if you're going to put it back in? Why not just set it when you need to and if the defaults work then don't worry about it? Granted, that's my personal opinion and is held in regards to any CSS change one does. Why set a property 2 times when once is enough?

FakerOP•3mo ago

yep agreed, I always use the following in my css style sheets:

*,
*::before,
*::after {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

Then I set margin on body to 0 if needed that's it

ἔρως•3mo ago

seriously, you will very likely have to change the padding and margins anyway, to fit your design, so, dont worry in this case, it doesn't make sense to use that margin nuker - it's just extra useless code not that im saying to use it on other things, but, for this example it is just extra code for nothing

Gaming

Programming

Best practice when styling forms

Did you find this page helpful?