CleverCSS

September 21, 2009

Never, ever I will write plain old CSS, nesting rules over and over and renaming all the stack when the root element has to be changed.

Imagine this monstrosity

.featured_retailers {
    border: 2px solid #FFC77B;
    margin-bottom:10px;
    width: 626px;
    position: relative;
    }
    .featured_retailers table { width: 626px; }
        .featured_retailers td {
            padding: 0;        
            border-top: 2px solid #FFC77B;
            }
        .featured_retailers td table {
            width: 440px;
            }
            .featured_retailers td table td {
                border: 0;
                padding: 1px 5px;
                }
    .featured_retailers p {
        font-weight:bold;
        color: #333;
        position: absolute;
        top: -30px;
        right: 0;
        }
        .featured_retailers p img {
             vertical-align:middle 
             }

turning into

$bgcolor=#FFC77B
.featured_retailers:
    border: 2px solid $bgcolor
    margin-bottom:10px 
    width: 626px
    position: relative
    table: width: 626px 
        td:
            padding: 0        
            border-top: 2px solid $bgcolor
            table:
                width: 440px
                td:
                    border: 0
                    padding: 1px 5px
                
    p:
        font-weight:bold
        color: #333
        position: absolute
        top: -30px
        right: 0
        img:
             vertical-align:middle

That magic is done by cleverCSS. It is written by maniacs (they added variable and expression support but went a bit too far: who would ever want to calculate sqrt of length?) but it gets the job done.

Original authors seem to have abandoned it, but it is supported by community. I added my two cents too:

  • its calculation feature was not aware of negative numbers, trying to calculate the sum , so margin: -2px -2px was transformed into margin:-4px
  • its support for /* multiline comments */ was not working, unless they were on the same line

And for integration of CleverCSS into your Django site there is django-css project. It is a CSS and JS compressor, but the compression is not what you would be after. The point is that django-css compiles CSS with external compilers, and caches the output in a clever way.

There were few things that could be improved there:

  1. It was relying on binary commands, while using Pythonic compiler in Python would be more logical.
  2. It was leaving compiled files not only in cache, but in my source tree, near the originals.

Also, I often use inline STYLE blocks for specific templates. Why have the hassle of separating them into files? The only reason can be that if page-specific CSS is large, the browser constantly redownloads it, and it is not nice.

So I added that feature to django-css too, and now it is almost perfect tool for complex Django CSSing. You can have extended CSS files compiled and cached, no matter where it is, in LINKS or in STYLE blocks.

All you have to do is surround your STYLE or LINK with {% compress css %} tag.

{% compress css %}
<style type="ccss">
h1:
    color:red
<style>
{% compress css %}

Forked Repos:

PS: Github is a very nice collaborative tool, it is fun to work with. I just like BitBucket more :)

This entry was posted on Monday, September 21st, 2009 at 4:37 pm and is filed under django. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “CleverCSS”

  1. Peter Pöml said:

    Mar 24, 10 at 9:05 pm

    Hi Tim,

    could you please integrate the following patch in your tree? It fixes a small shortcoming that itched me quite a bit today.

    Thanks! Peter

    % cat python-clevercss-poeml-comments.patch handle whitespace in front of comments poeml, Wed Mar 24 19:01:31 CET 2010

    Index: dziegler-clevercss-2272da5785fd9a5a723ea12a5d7081bec20b7c9b/clevercss.py

    — dziegler-clevercss-2272da5785fd9a5a723ea12a5d7081bec20b7c9b.orig/clevercss.py +++ dziegler-clevercss-2272da5785fd9a5a723ea12a5d7081bec20b7c9b/clevercss.py @@ -541,6 +541,9 @@ class LineIterator(object): return self.lineno, line

         stripped_line = line[:comment_start]

    + # ignore also comments that have leading space; + # stripping from the right makes sure that the line is empty otherwise: + stripped_line = stripped_line.rstrip() comment_end = line.find(’*/’, comment_start) if comment_end >= 0: return self.lineno, stripped_line + line[comment_end + 2:]

  2. Peter Pöml said:

    Mar 25, 10 at 11:33 pm

    Sorry, the line breaks were hosed when I pasted the patch. I put it here as a file: http://www.poeml.de/users/poeml/python-clevercss-poeml-comments.patch

  3. Massimiliano Torromeo said:

    Apr 30, 10 at 9:14 pm

    Hi, I tried CleverCSS recently but I encountered several issues with it’s parser engine like the problem you described with margin: -2px -2px, or trying some vendor rules like -webkit-gradient(). The developer definetly got carried away with features.

    That’s why I wrote CleanCSS. Same indentation-based syntax, without all those functionalities that added to much complexity to a great idea.

    I also figured I would not implement CSS variables since I find it works great if you preprocess the ccss with a templating engine like mako or jinja if you really need them.

Leave a Reply