0

Então, ao usar o seletor * para fazer o reset do margin|padding geral do HTML o CSSLint aponta que em produção pode dar gargalo para o usuário.

*{ 
   margin:0;
   padding:0;
 }

Para mim a "solução" que me vem é:

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

Mas, não é basicamente a mesma coisa? Eu realmente não sei porque, mas dessa maneira o CSS Lint não aponta possíveis problemas de performance. Existe alguma função para fazer isso? ou maneira melhor? Agradeço.

0

1 Resposta 1

1

Seletores universais como *, [disabled], [type=“text”], etc. são muito caros para o navegador para corresponder, como cada elemento no DOM deve ser verificada.

O seletor universal é usado frequentemente para box-sizing e outros globals. No entanto, muitas vezes isso pode ser otimizado pelo agrupamento de elementos relevantes. Veja solução de dimensionamento.

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

Veja mais aqui https://github.com/tachyons-css/tachyons-box-sizing

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .