Using the universal selector to set box-sizing

[dbakker]

One extremely popular way to set box-sizing is like this (e.g. in twitter bootstrap and websites such as github itself):

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

However, reading from the documentation:

The universal selector * may not be used in author stylesheets. This is because it can have negative performance implications and could be used to circumvent the rules set out in the following paragraph.

If I understand this correctly, this means amphtml developers need to use an explicit list of all HTML5 elements they may need, e.g.:

a, a:before, a:after,
abbr, abbr:before, abbr:after,
address, address:before, address:after,
area, area:before, area:after,
article, article:before, article:after,
aside, aside:before, aside:after,
amp-audio, amp-audio:before, amp-audio:after,
b, b:before, b:after,
bdi, bdi:before, bdi:after,
bdo, bdo:before, bdo:after,
blockquote, blockquote:before, blockquote:after,
button, button:before, button:after,
canvas, canvas:before, canvas:after,
caption, caption:before, caption:after,
cite, cite:before, cite:after,
code, code:before, code:after,
col, col:before, col:after,
colgroup, colgroup:before, colgroup:after,
datalist, datalist:before, datalist:after,
dd, dd:before, dd:after,
del, del:before, del:after,
details, details:before, details:after,
dfn, dfn:before, dfn:after,
dialog, dialog:before, dialog:after,
div, div:before, div:after,
dl, dl:before, dl:after,
dt, dt:before, dt:after,
em, em:before, em:after,
fieldset, fieldset:before, fieldset:after,
figcaption, figcaption:before, figcaption:after,
figure, figure:before, figure:after,
footer, footer:before, footer:after,
h1, h1:before, h1:after,
h2, h2:before, h2:after,
h3, h3:before, h3:after,
h4, h4:before, h4:after,
h5, h5:before, h5:after,
h6, h6:before, h6:after,
header, header:before, header:after,
hgroup, hgroup:before, hgroup:after,
hr, hr:before, hr:after,
i, i:before, i:after,
amp-iframe, amp-iframe:before, amp-iframe:after,
amp-img, amp-img:before, amp-img:after,
ins, ins:before, ins:after,
kbd, kbd:before, kbd:after,
keygen, keygen:before, keygen:after,
label, label:before, label:after,
legend, legend:before, legend:after,
li, li:before, li:after,
main, main:before, main:after,
map, map:before, map:after,
mark, mark:before, mark:after,
menu, menu:before, menu:after,
menuitem, menuitem:before, menuitem:after,
meter, meter:before, meter:after,
nav, nav:before, nav:after,
noscript, noscript:before, noscript:after,
ol, ol:before, ol:after,
optgroup, optgroup:before, optgroup:after,
output, output:before, output:after,
p, p:before, p:after,
pre, pre:before, pre:after,
progress, progress:before, progress:after,
q, q:before, q:after,
rp, rp:before, rp:after,
rt, rt:before, rt:after,
s, s:before, s:after,
samp, samp:before, samp:after,
section, section:before, section:after,
small, small:before, small:after,
source, source:before, source:after,
span, span:before, span:after,
strong, strong:before, strong:after,
sub, sub:before, sub:after,
summary, summary:before, summary:after,
sup, sup:before, sup:after,
table, table:before, table:after,
tbody, tbody:before, tbody:after,
td, td:before, td:after,
tfoot, tfoot:before, tfoot:after,
th, th:before, th:after,
thead, thead:before, thead:after,
time, time:before, time:after,
tr, tr:before, tr:after,
track, track:before, track:after,
u, u:before, u:after,
ul, ul:before, ul:after,
amp-video, amp-video:before, amp-video:after,
wbr, wbr:before, wbr:after
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Note: I haven't rigorously tested this but it seems to work on my site for now.

Is this what you recommend? If so, it might be useful to add a snippet like this in the documentation or to suggest developers a better alternative so that they (and me) will have an easier time migrating.

[cramforce]

@dvoytenko Do you expect AMP to be generally robust with respect to different box sizing?

I think the easiest solution would be to add a class called amp-border-box into the core CSS, people can just do html class="amp-border-box" and don't need to use the universal selector themselves.

[dvoytenko]

We should be robust. But we definitely need to retest. We can either do amp-border-box class or we can discuss if we can support this kind of precise validation in the Validator.

[rudygalfi]

Can this be closed since #1508 was merged?

[dvoytenko]

Yes.

[azizhk]

Please guide me with this PR:
#3360

It adds box-sizing to all elements but it can be easily overriden.

[dandv]

The universal selector * may not be used in author stylesheets.

Is this restriction still in place? I don't see it at https://www.ampproject.org/docs/design/responsive/style_pages.

[azizhk]

The restriction was removed in #6111