Group properies better

Hello!

We have an example CSS:

html {
    background-color: #000;
    min-width: 960px;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #a5a5a5;
    background-image: url(/im/gbgr.jpg);
    background-position: center 0;
    background-repeat: no-repeat;
}
#headerline {
    position: relative;
    height: 216px;
    margin: 0 auto;
    width: 960px;
    background-color: #000;
    margin-bottom: -2px;
}
#page_navi .current {
    border: 1px solid #555 !important;
    color: #656565;
    background-color: #000;
    padding: 4px;
}
#faq {
    position: absolute;
    left: 20px;
    top: 10px;
    font-size: 12px;
    font-weight: bold;
    z-index: 999;
    color: #bbb;
    text-decoration: none !important;
    background-color: #000;
    padding: 0 2px;
}
.tray {
    position: relative;
    background-color: #000;
    border: 6px solid #222;
    margin-left: 8px;
    margin-top: 3px;
    width: 615px;
}
.chrl {
    background-color: #000;
    height: 1px;
    border-bottom: 1px solid #333;
    margin-top: 9px;
    margin-bottom: 11px;
}
#typ {
    background-color: #000;
    margin: 0 10px 0 10px;
    height: 18px;
    position: relative;
    top: 3px;
    padding-top: 8px;
}

.rbut {
    float: left;
    margin-left: 10px;
    width: 295px;
    background-color: #111;
    text-align: center;
    text-decoration: none !important;
    height: 16px;
    color: #333 !important;
    font-weight: bold;
}

Aftter using https://css.github.io/csso/csso.html

we have:

html {
    background-color: #000;
    min-width: 960px
}

.tray,body {
    position: relative
}

#faq,body {
    font-size: 12px
}

body {
    margin: 0;
    font-family: Verdana,Geneva,sans-serif;
    background-image: url(/im/gbgr.jpg);
    background-position: center 0;
    background-repeat: no-repeat;
    padding: 0;
    color: #a5a5a5
}

#headerline {
    position: relative;
    height: 216px;
    width: 960px;
    background-color: #000;
    margin: 0 auto -2px
}

#page_navi .current {
    border: 1px solid #555!important;
    color: #656565;
    padding: 4px
}

#faq {
    position: absolute;
    left: 20px;
    top: 10px;
    font-weight: 700;
    z-index: 999;
    color: #bbb;
    text-decoration: none!important;
    padding: 0 2px
}

.tray {
    border: 6px solid #222;
    margin-left: 8px;
    margin-top: 3px;
    width: 615px
}

#faq,#page_navi .current,#typ,.chrl,.tray {
    background-color: #000
}

.chrl {
    border-bottom: 1px solid #333;
    margin-top: 9px;
    margin-bottom: 11px;
    height: 1px
}

#typ {
    margin: 0 10px;
    height: 18px;
    position: relative;
    top: 3px;
    padding-top: 8px
}

.rbut {
    float: left;
    margin-left: 10px;
    width: 295px;
    background-color: #111;
    text-align: center;
    text-decoration: none!important;
    height: 16px;
    color: #333!important;
    font-weight: 700
}

Why you not trying to group like that:

body,#headerline,.tray,#typ {
    position: relative
}

and

html,#headerline,#page_navi .current,#faq,.tray,.chrl,#typ {
    background-color: #000
}

with adding

html {
    min-width: 960px
}

and finally get:

html,#headerline,#page_navi .current,#faq,.tray,.chrl,#typ {
    background-color: #000
}

html {
    min-width: 960px
}

body,#headerline,.tray,#typ {
    position: relative
}

body,#faq {
    font-size: 12px
}

#headerline {
    height: 216px;
    margin: 0 auto;
    width: 960px;
    margin-bottom: -2px
}

#page_navi .current {
    border: 1px solid #555 !important;
    color: #656565;
    padding: 4px
}

#faq {
    position: absolute;
    left: 20px;
    top: 10px;
    z-index: 999;
    color: #bbb;
    padding: 0 2px
}

#faq,.rbut {
    font-weight: bold;
    text-decoration: none !important
}

.tray {
    border: 6px solid #222;
    margin-left: 8px;
    margin-top: 3px;
    width: 615px
}

#typ {
    margin: 0 10px 0 10px;
    height: 18px;
    top: 3px;
    padding-top: 8px
}

.rbut {
    float: left;
    margin-left: 10px;
    width: 295px;
    background-color: #111;
    text-align: center;
    height: 16px;
    color: #333 !important
}

.chrl {
    height: 1px;
    border-bottom: 1px solid #333;
    margin-top: 9px;
    margin-bottom: 11px
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana,Geneva,sans-serif;
    color: #a5a5a5;
    background-image: url(/im/gbgr.jpg);
    background-position: center 0;
    background-repeat: no-repeat
}

Like this you can decrease file size much more 1364 bytes Vs. 1457 bytes.

Best regards, nikitasius.

[lahmatiy]

@nikitasius Grouping is quite complicated and will be improved in future. I’m already tried but have no good solution yet. I’m plannig to continue work on it one day.

@lucasgruwez That transformation is unsafe. For example <div class="col-2-of-4 col-2-of-8"></div> - for first case div’s width will be 25%, and 50% for second. You may suppose that nobody will use col-2-of-4 and col-2-of-8 on the same element. But optimizer can’t to be sure about this without hints. In gerenal it may break meaning of your CSS.

You may improve rule merge by providing usage data. You may to get what you expect by providing something like this (for your example):

{
  "scopes": [
    ["col-1-of-4"],
    ["col-2-of-4"],
    ["col-2-of-8"]
  ]
}

[lucasgruwez]

OK, that helped a lot!! Thanks for your response!