3

Are there any drawbacks of applying global styles to all elements?

*{
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
Afzaal Ahmad Zeeshan
  • 15,669
  • 12
  • 55
  • 103
Anna K.
  • 1,887
  • 6
  • 26
  • 38
  • ok i did, so is the performance argument real, because some of the answers contradict each other? And if the other reason against it is form elements, then it's ok to use it if my form elements don't need the default browser styling? – Anna K. Jan 17 '14 at 15:05
  • If `*` is just one charachter beside include all tags wich include a lot of charachters increasing the size of the file .... I don't see in the duplicates some about performance just about affect unexpected elements. Anybody knows a link that talk about performance? – DaniP Jan 17 '14 at 15:08

1 Answers1

2

* is so-called 'heavy' selector. But unfortunately there is no* other way to apply border-box model to all elements in a couple lines of code. Talking about padding/margin and list-style reset - better use some common techniques from www.cssreset.com/

*Border-box can be applied here, in Eric Meyer's Reset CSS v2.0

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
Mihey Egoroff
  • 1,542
  • 14
  • 23
  • Thanks. `font: inherit;` seems useful too, it prevents the browser from applying random fonts to input elements – Anna K. Jan 17 '14 at 15:12