The Idea

I had an idea for something I call 'CSS Grouping' where you would basically group like css declarations together. This would avoid long, complicated and confusing css writing.

Example

/* old way */
.myClass a:hover { }
.myClass div { }
.myClass .active span { }
.myClass .active p { }
/* new way! */
.myClass {
   a:hover { }
   div { }
   .active {
      span {}
      p {}
   }
}

Ok, That's Great, But WHY??

Download

This script is currently at version 1.3.1. Hook me up with some feedback if you have suggestions or find bugs/errors.

Download css-groups (v. 1.3.1)

Documentation

Documentation? Yeah, we have that too. Feel free to view the online documentation.

"Normal" CSS Converter

You can use the online converter to convert your current stylesheets to css-groups format. It's easy, try it!

Other Considerations

The parser is written in PHP at the moment and takes care of any caching and the like. Some simple htaccess/mod_rewrite rules take care of any redirection headache as well. Take note that the CSS groups alone (non-parsed) are not valid CSS rules and therefore will not render correctly (or validate!). The parser will create the valid CSS rules from the groups you define. The parser also does a little (optional) 'housecleaning' with the CSS by removing any line-breaks, tabs, comments or unnecessary spaces.

Do realize that this method probably is not worth the trouble for smaller CSS files, as the number of definitions would be small. However, for larger sites with plenty of definitions, this solution may help solve some organizational nightmares.

Want to see this in action? You are seeing it now! This page is in fact using CSS grouping right now. View the css file to see what the parser spits out. To see the actual syntax, view the original file.

If you use this script, please consider donating:

Thanks

Thanks to Tristan Dunn for helping me put this all together and for finding the bugs.

License

CSS Server-Side Groups is licensed by a MIT-style license. Please see the enclosed README or LICENSE file included in the download.

Release History