Introducing Closure Stylesheets
Saturday, November 12, 2011 | 2:58 PM
(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
Cross posted from the Google Open Source Blog.
8 comments:
Alex said...
Closure Stylesheets seems to be a nice library, which was missing for java.
I'm wondering, why not embracing the Less or Sass syntax instead
of inventing a new css meta-framework?
November 13, 2011 at 1:06 AM
Kumar McMillan said...
because Less wasn't invented at Google! Seriously though, this cathedral approach to open source really hurts the community. If closure CSS was developed in the open than less might be better or vice versa.
November 13, 2011 at 9:13 AM
Jay said...
Michael answered this question fairly well on the mailing list:
"It's not as if Google decided they should release a LESS/SASS
competitor and decided to go and build one last month. Take a look at
the copyrights -- some of these files date back to 2005/2006. (You
don't see quite so many of the earlier copyrights because there was a
first version of GSS that was used for awhile, but has gradually been
replaced with the current version, so the old version was kept out of
this release so that the external release is cleaner and more
coherent.) That means that this project was started over five years
ago, and like other Closure Tools, was developed directly in response
to the needs of Google projects. Originally, I believe the goal was
mainly CSS minification, but later projects, such as themes in Gmail
(http://gmailblog.blogspot.com/2008/11/spice-up-your-inbox-with-colors-
and.html) shifted the demands of Closure Stylesheets."
November 14, 2011 at 8:18 AM
Alamoos said...
Dynamic style sheet is hot recently. ZUSS is another alternative. It is similar to LESS, but provides the tight integration with Java, such as Java method invocation and variable resolvers.
November 14, 2011 at 5:58 PM
Anonymous said...
I haven't found a specification for GSS. Do you support hierarchies? I find this feature of SCSS very useful for mobile development, where you always should keep several slightly different versions of styles in front of your eyes.
November 15, 2011 at 2:33 AM
Anonymous said...
Also does the tool allow to inline images into CSS directly? Basically, if merging SCSS with closure-stylesheets renaming functionality, it could be a very nice tool. :)
November 15, 2011 at 2:36 AM
Richard said...
CSS support is nice. I took a quick scan through the documentation and my initial reaction is that LESS is more elegant and CSS-like. I'd like to see a more thorough comparison of the two, to see what Google's Closure does that LESS can't do (and vice versa).
One thing that jumped out at me in Closure is conditionals; Closure can produce separate CSS output files to target different browsers, while LESS requires you to pack everything into a single output CSS file.
So if you wanted to produce separate mobile and desktop output CSS from the same source GSS files, you can. (For example, nearly all mobile browsers are very modern and don't require legacy hacks for IE or old Firefox compatibility, so you might be able to shave a few kb off by deleting those parts.)
December 12, 2011 at 4:32 PM
Tim said...
Thank you, and Google for open sourcing such an amazing set of tools for web-app developers. I think current web-app developers do not yet appreciate the full value these tools represent because they are not trying to write large scale client side applications. Your hard work will be fully appreciated as client apps get fatter in the future.
Also, thanks for writing the Closure book! I look forward to seeing the second edition!
July 31, 2012 at 10:35 AM
Post a Comment