Group properies better

[nikitasius]

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.

[ShimShamSam]

I've pondered this as well. You will see a decrease in size as long as the following expression is true:

property.length * num_occurrences > [selector1,  selector2, ...].join(',').length + '{}'.length;

Whether the curly braces factor in depends on if multiple properties are within the block. In this case, we're assuming 1 property per block.

[lucasgruwez]

Here's another example that I have encountered, I input the following code:

.col-1-of-4 {
  width: 25%
}

.col-2-of-4 {
  width: 50%
}

.col-2-of-8 {
  width: 25%
}

And I get no change in the file, instead of getting:

.col-1-of-4, .col-2-of-8 {
  width: 25%
}

.col-2-of-4 {
  width: 50%
}

Lucas

[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"]
  ]
}

[lahmatiy]

Similar issues #217 #313 #314

[lucasgruwez]

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