Thursday, November 17, 2011
Introducing Closure Stylesheets
By Michael Bolin, Open Source Engineer
Cross-posted from the Open Source at Google blog
(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.
Michael Bolin is an Open Source Engineer at Google.
Posted by Scott Knaster, Editor
Subscribe to:
Post Comments (Atom)
You had me at DRY Michael.
ReplyDeleteJust don't tell me I have to use get or I'll find out where you live and poop on your lawn.
>get< gwt
ReplyDeleteIf you want multiple styles to have the same color then you add those styles to the color proper with a comma like this:
ReplyDelete.box-background, .other-box-background, .another-box-background { color:blue;}
You can add as many class as you want to that property and even target specific elements down the node list from a top node with that class.
Als in order to simulate an if / then statement you write the least specific class first and then get more specific further down in your style sheet so
.boxes {border-color:red;}
might have a red border, but
.boxes .insidebox {border-color:purple;}
might have a purple border.
You might also target every element then target only the first element by being more specific.
You could possibly make style sheets a little bit shorter using this mark up, but if you are going to have to learn function and variables in order to write CSS then you might as well manipulate it manually using JavaScript.
The main reason I think this might be a bad idea is that the syntax for CSS with the addition of the @ symbol, media queries and CSS animation is already so convoluted that this sort of functionality gain (despite bering redundant to JavaScript) might be minimal when weighed against the increased complexity of the system and the new JavaScript CSS Function writing Functions I will inevitably end up writing.
But hey maybe this functionality should have been there from the beginning... and so the overlap between CSS and JavaScript continues. Where will it end?
@Nicholas Juntilla
ReplyDeleteIndeed one can use multiple selectors but the concern then is that the resultant CSS is very fragmented because you would end up writing many sections each referring to another aspect of the same selector. And if not for tools like Google Chrome's Developer Tools it would be impossible to find the the line of styling if things displayed incorrectly.
How does this compare/contrast with less.js or sass?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteMore to the point, why does this exist at all given that there are already two solutions to this problem?
ReplyDeleteMost people already love Less and SASS. What does this bring to the table that those do not have?
ReplyDeleteAgreed, how does this differ from less or sass?
ReplyDeleteI have used Less and SASS, so I have the same question: diferences?
ReplyDeleteThanks ;-)
@Robert DeRose
ReplyDeleteIt looks like the main differences are lint, class renaming, rtl flipping, and out-of-the-box minification.
Also it's nice that is java so it will run server side like sass. That's the one thing that keeps me from using less.
Arbiter: this was developed inside Google before SASS or Less existed. They are just open-sourcing it now.
ReplyDelete