Intelligent CSS optimisation

A minifier takes some CSS code and

makes it smaller.

body,button{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%}
img{max-width:100%}svg{max-height:100%}fieldset,input,select,textarea{font-size:1rem;margin-top:0;margin-bottom:.5rem}
input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{box-sizing:border-box;height:2.25rem;padding:.5rem;vertical-align:middle;-webkit-appearance:none}
select{box-sizing:border-box;line-height:1.75;padding:.5rem}
select:not([multiple]){height:2.25rem;vertical-align:middle}textarea{box-sizing:border-box;line-height:1.75;padding:.5rem}
.fieldset-reset{padding:0;margin-left:0;margin-right:0;border:0}.fieldset-reset legend{padding:0}
.button,button{font-size:inherit;font-weight:700;text-decoration:none;cursor:pointer;display:inline-block;line-height:1.125rem;padding:.5rem 1rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none}.button,.button:after,.button:before,button,button:after,button:before{box-sizing:border-box}
::-moz-focus-inner{border:0;padding:0}.button:hover{text-decoration:none}
table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%}th{text-align:left;font-weight:700}
td,th{padding:.25rem 1rem;line-height:inherit}th{vertical-align:bottom}

Minifiers optimise values as well as whitespace.

color: black

color: #000

postcss-colormin

font-weight: normal

font-weight: 400

postcss-minify-font-values

So with a minifier we yield more byte savings than gzipping alone.

But we can do more.

#perfmatters

Many new possibilities. 

Modular. Use only the transforms you need.

transform: translate3d(0, 0, 0)

transform: translateZ(0)

postcss-reduce-transforms

@keyframes fadeToBlack {}

@keyframes a {}

postcss-reduce-idents

calc(100px * 2)

200px

postcss-calc

Many more optimisations!

cssnano.co

Use it in your builds! broccoli, brunch, cli, grunt, gulp, plain js...

Thanks!

twitter: ben_eb

github: ben-eb