typography.js icon indicating copy to clipboard operation
typography.js copied to clipboard

Generated CSS not optimized

Open i8ramin opened this issue 8 years ago • 1 comments

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?

i8ramin avatar Sep 28 '17 02:09 i8ramin

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 :-)

KyleAMathews avatar Sep 28 '17 02:09 KyleAMathews