How to replace * selector in production

Question

Then, when using the * selector to reset the margin|padding general of HTML Csslint points out that in production can give bottleneck to the user.

*{ 
   margin:0;
   padding:0;
 }

For me the "solution" that comes to me is:

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;
}

But, isn’t it basically the same thing? I don’t really know why, but in this way CSS Lint doesn’t point out possible performance problems. Is there any function to do this? or better way? Thank you.

Answer 1

Universal selectors as *, [disabled], [type=“text”], etc. are very expensive for the browser to match, as each element in the DOM must be checked.

Universal selector is often used for box-sizing and other globals. However, this can often be optimized by grouping relevant elements. See Design Solution.

    html, body, div, article, section, main, footer, header, form, fieldset, legend,
    pre, code, p, a, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, textarea,
    input[type="email"], input[type="number"], input[type="password"],
    input[type="tel"], input[type="text"], input[type="url"], .border-box { 
    box-sizing: border-box; 
}

See more here https://github.com/tachyons-css/tachyons-box-sizing