CSS optimizations

List of optimizations done by clean-css

Basic Optimizations

• Removing trailing semicolon(s)

  .class{top:1px;color:green;;}

  becomes

  .class{top:1px;color:green}

• Removing whitespace around selectors, attributes & values

  body {
      padding-top: 0
  }

  becomes

  body{padding-top:0}

• Removing line breaks

  body {
      padding-top:0
  
  }
  
  h1,
  h2 {
      font-weight:500
  }

  becomes

  body{padding-top:0}h1,h2{font-weight:500}

• Removing empty selectors (with -e switch)

  body {}
  a { color: #fff; }

  becomes

  a{color:#fff}

• Removing universal selector

  *.class { color: #fff; }

  becomes

  .class{color:#fff}

• Removing quotes in font and url (if possible)

  a {
    font:12px 'Helvetica',"Arial";
    background:url("/some/nice/picture.png");
  }

  becomes

  a{font:12px Helvetica,Arial;background:url(/some/nice/picture.png)}

• Removing quotes in keyframe and animation (if possible)

  @keyframes "stretch" {
    from { width:100px; }
    to { width:200px; }
  }
  div { animation: "stretch" }

  becomes

  @keyframes animation{from{width:100px}to{width:200px}}div{animation:stretch}

• Removing quotes in attribute values (if possible)

  p[data-tooltip="Help"] {
    color:#fff;
  }

  becomes

  p[data-tooltip=Help]{color:#fff}

• Removing comments

  /* Some comment */ .class { color:green; }

  becomes

  .class{color:green}

• Removing special comments (all with --s0, all but first with --s1 switch)

  /*! Some comment */ .class { color:green; }

  becomes

  .class{color:green}

• Removing extra @charset declarations and moving the first one into the beginning of a file

  a {
    color: #f10;
  }
  @charset 'utf-8';
  b {
    font-weight: bolder;
  }

  becomes

  @charset 'utf-8';a{color:#f10}b{font-weight:bolder}

  @charset 'utf-8';
  div :before {
    display: block;
  }
  @charset 'utf-8';
  a {
    color: #f10;
  }

  becomes

  @charset 'utf-8';div :before{display:block}a{color:#f10}

• Minification of units after 0 values

  .class1 { margin:0px }
  .class2 { right:0% }

  becomes

  .class1{margin:0}.class2{right:0}

• Minification of font-weight

  .class { font-weight:bold }

  becomes

  .class{font-weight:700}

• Minification of multiple values

  .class1 { margin:10px 0px 10px 0px }
  .class2 { margin:0px 0px 1px 0px }
  .class3 { margin:2em 2em 2em 2em }

  becomes

  .class1{margin:10px 0}.class2{margin:0 0 1px}.class3{margin:2em}

• Minification of fraction zeros

  .class { margin:0.50em }

  becomes

  .class{margin:.5em}

• Minification of none into 0 (where possible)

  .class { border:none; background:none }

  becomes

  .class{border:0;background:0 0}

• Minification of HSL colors

  .class { color:hsla(120,100%,25%) }

  becomes

  .class{color:#007f00}

• Minification of RGB colors

  .class { color:rgb(0,127,0) }

  becomes

  .class{color:#007f00}

• Minification of long hex color into short hex colors

  .class { color:#000000 }

  becomes

  .class{color:#000}

• Minification of hex colors into color names

  .class { color:#f00 }

  becomes

  .class{color:red}

• Minification of color names into hex colors

  .class { color:white }

  becomes

  .class{color:#fff}

• Minification of multi-line strings

  .test[title="my very long \
  title"] {
      background-image: url("my/very/long/\
  path")
  }

  becomes

  .test[title="my very long title"]{background-image:url(my/very/long/path)}

• Minification of IE filters

  .class { filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80) }

  becomes

  .class{filter:alpha(Opacity=80)}