<section class="dialog">
<button type="button" class="close">Close</button>
</section>Why not use dialog?
We’reusingsectionhereinsteadofthedialogelementbecausesupportfor
dialogislimitedtoBlink-basedbrowserssuchasChrome/Chromium,Opera,
andYandex.NowweneedtowriteCSStooverrideeverylinethatwedon’twanttoinheritfrom
thebuttonruleset:.close {
background: #e00;
border: 2px solid #fff;
color: #fff;
display: inline-block;
margin: 0;
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px;
border-radius: 100px;
width: auto;
}We’dstillneedmanyofthesedeclarationstooverridebrowserdefaults.Butwhat
ifwescopeourbuttonstylestoa.defaultclassinstead?Wecanthendropthe
display,font-weight,line-height,margin,padding,andwidthdeclarationsfrom
our.closeruleset.That’sa23%reductioninsize:.default {
background: #FFC107;
border: 1px outset #FF9800;
display: block;
font: bold 16px / 1.5 sans-serif;
margin: 1rem auto;
width: 50%;
padding: .5rem;
}78 CSS Master