Tuesday, May 26th, 2009

CleverCSS: Rich Python-like DSL for CSS

Category: CSS, Python

<p>We have mentioned Sass and other CSS abstraction libraries before, but somehow CleverCSS slipped by.

The nesting DSL looks similar to other solutions:

  1. ul#comments, ol#comments:
  2.   margin: 0
  3.   padding: 0
  4.  
  5.   li:
  6.     padding: 0.4em
  7.     margin: 0.8em 0 0.8em
  8.  
  9.     h3:
  10.       font-size: 1.2em
  11.     p:
  12.       padding: 0.3em
  13.     p.meta:
  14.       text-align: right
  15.       color: #ddd

But, you can also use attributes:

  1. #main p:
  2.   font->
  3.     family: Verdana, sans-serif
  4.     size: 1.1em
  5.     style: italic

Define constants:

  1. background_color = #ccc
  2.  
  3. #main:
  4.   background-color: $background_color

Implicit concatenation:

  1. padding: $foo + 2 + 3 $foo - 2
  2.  
  3. // returns: padding: 15 8; if $foo is 10

Calculations:

  1. // calculations with numbers / values
  2. 42px + 2                    -> 44px
  3. 10px * 2                    -> 20px
  4. 1cm + 1mm                   -> 11mm
  5. (1 + 2) * 3                 -> 9
  6.  
  7. // string concatenation
  8. foo + bar                   -> foobar
  9. "blub blah" + "baz"         -> 'blub blahbaz'
  10.  
  11. // You can also calculate with numbers:
  12. #fff - #ccc                 -> #333333
  13. cornflowerblue - coral      -> #00169d
  14.  
  15. // You can also add or subtract a number from it and it will do so for all three channels (red, green, blue):
  16. crimson - 20                -> #c80028

Nice :)

Related Content:

Posted by Dion Almaer at 7:19 am
24 Comments

+++--
3 rating from 45 votes

24 Comments »

Comments feed TrackBack URI

How’s this different to SASS? Looks pretty much the same.

Comment by cheba — May 26, 2009

Does anyone know of a CSS abstraction library in .NET (VB or C#)…

Comment by Detroitpro — May 26, 2009

If you’re on Rails, you css_dryer is your friend :-)

http://github.com/airblade/css_dryer/tree/master

Comment by MorganRoderick — May 26, 2009

I’m still not sold on these abstraction layers. So we’re basically just removing curly brackets and adding indentation, seems to me.

Comment by miketaylr — May 26, 2009

This looks pretty cool. I’ll port it to PHP if I get time.

Comment by Darkimmortal — May 26, 2009

In order for these things to succeed it needs to adopt some for of standard and be available for all common server languages. Like CSS variables are part of the spec but could be used now with a server component.

Comment by Spocke — May 26, 2009

Am I the only one who didn’t have a problem with the original CSS? Re-indenting it and adding CSS variables… Meh. Not useful in any of my projects *shrugs*

Comment by idio — May 26, 2009

“In order for these things to succeed it needs to adopt some for of standard and be available for all…”

Yeah… If only there was some sort of standard that defined rules for applying styles to a web page…

*cough* http://www.w3.org/TR/CSS2/ *cough*

Comment by idio — May 26, 2009

Looks nice but sounds expensive. Why should you parse your css server side?? I don’t get the idea of the whole abstraction layers thingy.

Comment by ceeATkalydo — May 26, 2009

@Darkimmortal-

You’ll be my hero when i see the PHP port!

Comment by Bub — May 26, 2009

If you serve CSS dynamically with variables on the server, then you would lose the benefit of stylesheet caching. To me, it makes more sense to define multiple classes in a static stylesheet, then change class attributes in the DOM as needed.

Comment by WillPeavy — May 26, 2009

While I dig what these new abstraction layers are trying to do – I don’t like how they’re doing it. This “sort of like CSS – but not quite” syntax is awful. It seems like the different solutions are colored by the technologies they are implemented in syntax-wise (or maybe I’m just trying to hard to guess what they were thinking).

If you’re going to mix to syntaxes I’d want to be able to differentiate when one stops and another takes over. But the above mentioned solution would make my head hurt going back and forth between using these and writing plain vanilla CSS.

Comment by rasmusfl0e — May 26, 2009

To me, these kinds of solutions would be more appropriate in some kind of IDE that compiles down to some combo of html, js, xsl and css (probably targeting a JS library like jQuery). HTML was originally meant to be machine written, so it would kind of make sense.

I’d actually like to see (and would be interested in helping to produce) an HTML 5 platform that let’s you target HTML 5, with maybe some extras like this kind of CSS abstraction and possibly even HaXe support for scripting – that will compile down to the HTML hack soup that we all have to deal with now by hand. Most HTML 5 features can be handled by Javascript and some CSS hacks – maybe a plugin here and there (audio and video), so I don’t see why not. Dean Edwards even made his IE7 and IE8 scripts, which to me are more than enough of a proof of concept.

I would love to not have to deal with hack soup any more, and just target HTML5. That would be awesome.

Comment by CaptainN — May 26, 2009

These libarys should ALWAYS work together with caching. So if you use it it will be translated once to a real css and put into the right place. If my css writing reduces to a half with an additional “convert-to-css” klick in my website it would be worth the effort.

Comment by Aimos — May 26, 2009

I suggest you guys take a look at HTMLayout. It support style sets, css scripts and many other nice stuff. Normal browsers are so yesterday compared to it.
http://www.terrainformatica.com/

Comment by tosho — May 26, 2009

the one i found interesting was compass (http://compass-style.org/). never used it though. but i guess that it might be very helpful for big development teams.

Comment by mare — May 26, 2009

whenever i thought i needed something like this (calculations, server side conditional CSS, etc…) in my CSS, i step away and think about it.

in all cases, i’ve found a more elegant solution using plain old CSS, usually using adjacent selectors and maybe an extra class here or there.

Comment by driverdave — May 26, 2009

I don’t see myself using something like this but hopefully the W3C CSS Working Group will take notice of the fact that no sensible person is satisfied with the crap that is CSS. Personally, I’d be happy if they’d just throw the whole thing out and start over with a fresh perspective but obviously that’s not going to happen. So what do we really need?
1) Variables
2) Math
3) Scope
4) Standard way to target specific browsers instead of using hacks
5) New ways of expressing things that are concise without being unreadable
6) A quick death for IE

What am I missing?

Comment by okonomiyaki3000 — May 26, 2009

So, basically, the idea is to make CSS a programming language?

Don’t know how I feel about that. Most of the things that people seem to say they want CSS able to do you can already with Javascript. Ah yes, people turn off Javascript, true. But if CSS becomes a scripting language then people might be tempted to start turning CSS off.

HTML5 is leaning towards being a programming language and now CSS? I guess things just are confusing and bloated enough for some people.

Comment by travisalmand — May 27, 2009

Other then calculation don’t see the point.

Comment by gustavs — May 27, 2009

I’m not asking for loops or conditionals. (Actually conditionals might be useful.) So I don’t see how those additions could possibly make CSS anything like a programming language.

You need variables (or at least constants) so that you can define some commonly used colors, urls, etc. at the top of your document then only have to change them in place.

You need math you so can do stuff like { width: 100% – (<some expression for getting my left border with) + ) }

You need scope so that if you want to target several elements within #someDiv, you don’t have to type $someDiv at the beginning of every line. Maybe like:
#someDiv [
ul {}
span {}
a {}
]

The rest should be obvious.

Comment by okonomiyaki3000 — May 27, 2009

I, like many of you in previous comments, don’t get the real benefit of using a CSS abstraction library. What these achieve is great, but they all require the learning of yet another syntax just to produce what you can already do: static CSS.

I would, however, love to see a solution where browsers could understand other languages as “styling” languages. For example, consider the power of a JavaScript/jQuery based styling format, let’s call it JSS (JavaScript Style Sheets). This would cover all (or at least most of) the shortcomings of CSS, with support for variables, math, etc. Optimally, this could lead to smaller static (cachable) files for example. JSS could be an alternative, or complimentary technology to CSS, that is given the same status as CSS in the browser rendering process.

Comment by GlenSomerville — May 28, 2009

@GlenSomerville – It was called JSSS and it never took off.

@WillPeavy – Calling them dynamic stylesheets is a little incorrect. Nothing here needs to be determined at runtime. It could easy be made static using a build tool or something.

For everyone else saying this kind of thing isn’t necessary – its only made necessary by the size or type of your project. I would say that the most important things needed are variables and calculations. Everything else here doesn’t really add functionality as much as offer a different syntax. I think that part is mostly personal taste.

Personally, I just use Velocity templates. Its really simple but effective. I can still use syntax highlighting and autocomplete from netbeans, but I can also easily do calculations and variables. It also lets me easily break apart my css into different files and concatenate using includes. However, the biggest win for me, is the ability to call into Java code. I built an image generator library that uses Java2d to create rounded corners, gradients, and other effects and put those and other icons into image sprites, and spit out the necessary css to make it work.

Something like:

.table-row .left-top-corner {
$image.corner("corner(top left) bgColor(#EFF2F3) color(#FFFFFF) radius(8)")
}

generates the image for a corner, puts it in an image sprite, and then templates in the css for size and background image url and offset.

Comment by genericallyloud — May 29, 2009

Nesting: Meh, ugly and pointless.

Attributes: Meh, pointless.

Constants: I run my CSS through a templating system if I want to do that kind of thing. The templating is already an essential part of my site framework, as it has been since I was using PHP3.

Concatenation: Meh, pointless.

Calculations: Done at time of templating, see constants.

Of all of these libraries, this is the least pointless and annoying.

Unfortunately the bar in this field is set pretty low to adequately reflect the pointlessness of it all, and so CleverCSS manages to win that title despite being still really quite pointless and annoying. All IMHO, of course :)

Comment by jtresidder — June 1, 2009

Leave a comment

You must be logged in to post a comment.