Any tool exist to grouping css rules

HTML & CSS
1

hi,any tools exist to grouping css rules for example
before :

.main {
  background-color: #fff;
  margin:4px 4px;
}

.nav {
  background-color: #fff;
  padding: 3px 3px;
}
.nav2 {
  background-color: #fff; }

after:


.main {
  margin:4px 4px;
}

.nav {
  padding: 3px 3px;
}
.nav2,.nav,.main {
  background-color: #fff; }
2

Welcome to Sitepoint!

http://cleancss.com/ might work for you…

3

hi,thanks for your reply
no , it dont work!

4

Did you look at the options section? That’s where you can select how to organize and/or combine CSS selectors and properties. The default settings won’t do this, so you will have to pick and choose what you want.

5

it tested that’s option but it dont work,

6

That is correct, I experienced.
Then I tested all resulting online css-compressors given by the first result page of Google: [U]google.com/search?q=online+css+compressor[/U]

Even if you check the “Merge selectors with the same properties” checkbox, it appears no one can do it, unless the selectors have identical properties/values! :rolleyes:
For instance, the [U]cleancss.com[/U] with:

.main {
  background-color: #fff;
}

.nav {
  background-color: #fff;
}
.nav2 {
  background-color: #fff; 
}

is giving:

.main,.nav,.nav2{background:#fff;}

=======
And:

.main {
background-color: #fff;
  color: blue;
}

.nav {
  background-color: #fff;
  color: blue;
}
.nav2 {
  background-color: #fff;
color: blue; 
}

is giving:

.main,.nav,.nav2{background:#fff;color:blue;}

=======
But:

.main {
  color: blue;
background-color: #fff;
}

.nav {
  background-color: #fff;
  color: blue;
}
.nav2 {
  background-color: #fff;
color: blue; 
}

is giving:

.main{background:#fff;color:blue;}
.nav,.nav2{background:#fff;color:blue;}

:rolleyes:
Then you can compress the result as input, and do it again to get the .main,.nav,.nav2{background:#fff;color:blue;}…

Whereas:

.main {
background-color: #fff;
}

.nav {
  background-color: #ffffff;

}
.nav2 {
  background: #fff;
}
.nav3 {
  background: white;
}

is resulting in:

.main,.nav{background:#fff;}
.nav2{background:#fff;}
.nav3{background:#FFF;}

With second time:

.main,.nav,.nav2{background:#fff;}
.nav3{background:#FFF;}

My conclusion: not ideal. - Maybe one of the others can do the last two examples better.

  • Note: I’m always very careful when grouping selectors (by hand). Grouped selectors are more difficult to spot, in case later on you have to change one of the properties of only one selector (for instance in a #nav ul ul li:hover ul li a series). Mostly I let them ungrouped - or you can save the ungrouped stylesheet as “master-stylesheet” (including comments) to make changes later, and put the compressed version on the server. After each (well tested) change in the master, you can make a new compressed version without the risk of loosing control. :wink:
7

Try running the stylesheet through a free online “word count” application.

Duplicates are shown then it is up to you to optimize the stylesheet until only single occurrences appear.

8

It’s generally not a good idea to group selectors that are not common in some way otherwise you end up with a stylesheet where rules are spread all around the place and a nightmare to maintain.

By all means group similar styles for the current section in hand but don’t group rules from further down the stylesheet as it makes maintenance so much harder and the savings made are negligible for most medium sizes sites. You’d be better off losing (or optimising) one image instead and save many more bytes in the process.:slight_smile:

I’m afraid I don’t trust any of those tools as they usually end up corrupting the file or logic in some way. (Maybe they are better these days as I haven’t tried them in a while though.)

9