typography.js
typography.js copied to clipboard
Generated CSS not optimized
Noticing a lot of duplicate definitions that could be optimized in the generated CSS. ie,
h1 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
color: inherit;
font-family: 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 2rem;
line-height: 1.1;
}
h2 {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
color: inherit;
font-family: 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
font-weight: bold;
text-rendering: optimizeLegibility;
font-size: 1.51572rem;
line-height: 1.1;
}
The margins and paddings could be done using short hand. Many of those could also be rolled up into one combined rule. Seems like we could shave off a good 30% from the generated CSS by optimizing it. Is it done this way intentionally or just hasn't been optimized yet?
I haven't worried about it since gzipping takes away most of this and the generated CSS is only a few kbs to begin with. Also short-hands are harder to override.
That's my reasoning, good or bad :-)