Introducing Closure Stylesheets
Friday, November 11, 2011 | 4:15 PM
Labels: closure tools, css
(CSS is for programming, not for pasting)
When the Closure Tools were first released a little over two years ago, they gave web developers the ability to organize and optimize their JavaScript and HTML in a new way. But there was something missing, namely, a tool to help manage CSS.
You see, the nature of CSS runs contrary to the DRY principle that is exhibited in good software engineering. For example, if there is a color that should be used for multiple classes in a stylesheet, a developer has no choice but to copy-and-paste it everywhere because CSS has no concept of variables. Similarly, if there is a value in a stylesheet that is derived from other values, there is no way to express that because CSS also lacks functions. Common patterns of style blocks are duplicated over and over because CSS has no macros. All of these properties of CSS conspire to make stylesheets extremely difficult to maintain.
To this end, we are excited to introduce the missing piece in the Closure Tools suite: Closure Stylesheets. Closure Stylesheets is an an extension to CSS that adds variables, functions, conditionals, and mixins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming. As the existing Closure Tools have done for JavaScript and HTML, Closure Stylesheets will help you write CSS in a maintainable way, while also empowering you to deliver optimized code to your users. We hope you enjoy it! Please let us know what you think in the discussion forum.
By Michael Bolin, Open Source Engineer

6 comments:
JokeyRhyme said...
Nice work.
But would it have been so bad to go with something more compatible with SASS/SCSS (Ruby) or Less (Node.JS)?
Why not just pick one, contribute anything missing to it, and avoid adding yet another CSS framework format to the mix?
November 11, 2011 4:47 PM
jrr said...
I used to generate CSS with PHP to get repeatable variables (colors, etc) and arithmetic of dimensions - this sounds like a better solution!
November 11, 2011 7:05 PM
michalzuber said...
The class renaming is what you use for example on Google.com to reduce the size of HTML and CSS?
November 11, 2011 11:20 PM
alanhogan said...
Preaching to the choir. Smart web devs use Sass and Compass. So the only question, and one not answered here, is, "Why Sass isn't good enough for Google?"
November 12, 2011 12:11 AM
Richard said...
Interesting. In JavaFX our CSS support also introduced variables and built in functions for derivation. Does the Closure Stylesheet support run at runtime or does it run at design time to compile to normal CSS? I suspect the latter, which while more practical (it will work with the web as is), is also limiting. In JavaFX for example, there is a variable -fx-base which is a color and from which most controls and such derive their gradients. At runtime you can modify the -fx-base of a parent node and have it apply to every child. This works because variable support is a runtime property and dynamic, whereas if you are compiling straight to CSS then you lose that dynamic behavior. On the other hand, if you are shipping a runtime CSS engine, I'd love to talk and swap performance optimization tricks, since dynamic variables add another wrinkle to an already wrinkled performance problem with CSS.
November 13, 2011 6:03 AM
jwfearn said...
Excellent! I use Compass and Sass and I like them but I'm looking forward to added features like lint and future integration with other Closure tools like Plovr.
November 14, 2011 3:33 PM
Post a Comment