Also check out CleverCSS:
I’ve always been a huge fan of HAML and I’ve also been using SASS because I really like the nesting (easier to read, less repetition, more pressure to write “good” CSS)
I had an “aha!” moment recently when I read about how Geoffrey at Peepcode uses the other SASS features. It’s not just about variables for colors and arithmetic.
It’s thinking outside of the box, but…
Perhaps all the techniques for shaping the HTML that ends up in the browser could be avoided by reimplementing the SO family of sites as SilverLight apps?
Then you’d have a state-of-the-art UI design and rendering experience, all the benefits of XAML and skinning, and no more of all these HTML hacks.
Also, the SO servers would have less loading (serving just the data, and not the whole UI and the data), and lower bandwidth.
Of course, although SilverLight is pretty pervasive, it’s somewhat limited on Apple’s mobile devices…
@Andy Chase:
What is so “disgusting” about suggesting the possibility of avoiding HTML rendering problems using an alternative technology? Would you care to elaborate?
Silverlight is being used in a large number of media and LOB applications, providing user experiences that would be very challenging using HTML/CSS/JavaScript. I’m not saying it would be the right or best solution to Jeff’s issues, but sometimes a problem like this reveals more creative opportunities than struggling in the same direction.
I hadn’t heard of DRY before, but it was one of my goals when creating the open source OOCSS library. http://wiki.github.com/stubbornella/oocss/
To me, it just makes sense that you make reusable visual LEGO. Depending on coding style, meta-frameworks can make this harder to achieve. Philosophically, SASS tries to avoid multiple class names, which are one of the main methods for achieving truly DRY objects.
There should be very little difference between these four sites in the CSS. My guess is that they would share 90-95% of the CSS and 100% of the HTML.
Yeah, I actually wrote a post specifically about what I’d like to see from CSS’s positioning code, and the co-chair of the CSS Working Group replied with an emphatic agreement:
http://avatraxiom.livejournal.com/101850.html
-Max
You can use multiple classes in a class attribute, separated by a space, in order to achieve a certain level of separation. But when it comes to things like colors, rounded corners, and the like, unless you want to keep the overall theme the same for each set of widgets across every style, you can’t just tag them with a class representing that. Sort of what CSS was supposed to get rid of.
The Ruby option looks pretty cool, but I agree with Michael Hagan that you’re missing the point of how to use CSS to cascade the styles.
CSS is a programming language in the same way that HTML is a programming language.
Oh, that’s right, it isn’t.
As such, it doesn’t violate DRY anymore than a Georges Seurat painting violates the principle simply because there’s more than one dot on the canvas.
I really don’t like CSS myself, and this is after around 6 years of using it to the degree of ‘mastering’ it. The problem seems to be more than just the declarative nature (which is useful in the most). Personally I think its completely the wrong way to approach the problem, if we were given something that gave us simple yet powerful aspects we could design all the things that NEW properties are trying to design today, such as drop shadows yadda yadda.
Instead, when we want something ‘new’ we either have to fall back to generating bitmaps externally and dumbly applying them to elements, which is less than ideal and destroys rapid prototyping. Then we have to wait until ‘the almight browser gods’ decide to firstly, recognize a pattern, attempt to prototype that, sit down with a bunch of other gods, argue over formality, wait for them all to implement that formal spec, then wait for the population to be saturated enough to even use it.
vs. say, prototyping that functionality yourself with some primitives in a couple of hours… dunno, seems to me that a couple of hours is a much better than waiting a couple of years… perhaps I’m just crazy.
This said, css3 does go some way to making this more of a reality, given that it has much more powerful pseudo element creation.
The hack-ish solution would be to use a PHP script to generate the style, kinda like how you use PHP to generate JavaScript and HTML code.
This’ll work particularly well for you since you have many websites with the same layout but different looks, you can get them to pass their ID or name to the PHP script, it retrieves the variable values from the data base and put them in CSS. That kinda solves the variable problem, you can have fields such as margin_left_answer, count_border_color, etc…
Or, alternatively, you can have a script that generates the CSS for you once and you upload that CSS file.
There is another serverside framework which corrects the thing you find wrong in CSS, it is called wro4j (Web Resource Optimizer for java) - http://code.google.com/p/wro4j/ . It have plenty of features, like: -
I’ve been working on a LESS-like program in Java called DSS. It’s similar, but not identical because when I started writing it, I hadn’t discovered any of the other frameworks yet. In case anyone is interested, it’s at http://github.com/silentmatt/dss . Personally, I like it better because it avoids some syntactical ambiguities that LESS runs into. Unfortunately, it doesn’t do color calculations (yet).
I personally use my own template language for both HTML and CSS.
http://michaelhamilton.com has a link to Muted Template and a live demo you can check out.
@Sebastiaan Dammann
I built such a server-side library for ASP.NET/MVC applications, see http://combres.codeplex.com/. dotLess CSS is supported although Sass is not (yet).
It sounds like you need something like this: This link http://www.downloadsquad.com/2010/04/30/if-you-code-html-zen-coding-will-change-your-life/ was featured on reddit raving about Zen Coding ( http://code.google.com/p/zen-coding/ ). Of particular interest to you: it features full support on Visual Studio.
This whole thing annoys me. Just because it’s not a programming language per se doesn’t mean that it has to be worked into one. css allows you to do all the stuff you want to do while still retaining to all programming paradigms you want to. You just have to use it properly.
I’m all for new things and improving the old ones but i don’t like it when people think that everything should taste like vanilla. I mean seriously Jeff, you can see the problem that i, and apparently many other people too have with this approach?
some time ago, the co-chairman of the css working group wrote a paper on css variables
http://disruptive-innovations.com/zoo/cssvariables/
i do think that css should not use variables and other programming language feature, it’s a presentation language that “everyone” can use without knowing what a variable is…
Jeff, you are a programmer, aren’t you? So I fail to see your problem. Okay, I agree with you, that there are some alignment issues in CSS, sometimes things are extremely easy to do with tables and extremely hard to do with CSS, but that is a different issue.
Regarding your request with turning CSS into a programming language, why don’t you make CSS templates, run them through your own written pre-processor and dynamically serve the result? Nothing is easier than doing a bit of search and replace using PHP (or any other language with regex) to transform your CSS templates into real CSS.
People building huge webpages are used to the fact, that pretty much no HTML is static, but everything is dynamically created by PHP, Perl, Ruby, Pyhton, Java or some other kind of comparable language. I bet Stackoverflow works like this. At the same time you request that CSS must be all static and “interpreted” by the browser. The same way I can request that all HTML must be static and there is a HTML Meta language that makes all HTML processing in the browser.
At the time being, you have two options: Either you do things in the browser using JavaScript (JS can transform/alter HTML, just like it can transform/alter CSS on the fly, no big deal) or you do it on the server. The later case has the advantage that your page also displays right if the browser has no JS support or JS is turned off. As you decided to do HTML generation on the server, why do you want CSS generation to happen on the client? Why doesn’t your PHP code also dynamically create the CSS for you?
If you don’t want to use PHP, use any other pre-processor. There exists tons of free pre-processor, written in C (very fast!) that you can use as a replacement to the GCC C-Pre-Processor (which doesn’t work right if you are not feeding in C/C++ source files).
#define ROUNDED_CORNERS
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius
#define BLUE #3bbfce
#define MARGIN 16px
#header {
ROUNDED_CORNERS;
}
#footer {
ROUNDED_CORNERS;
}
.content_navigation {
border-color = COLOR;
}
.border {
padding = MARGIN;
margin = MARGIN;
border-color = COLOR;
}
A C-like pre-processor cannot perform calculations, but other pre-processors can.
And have you ever considered to create your OWN layouting language? Instead of using HTML/CSS, have you considered using a language that perfectly fits your personal needs and then have a big PHP library that transforms your own language into HTML/CSS whenever needed? To not kill your servers, you could cache the result and only re-translate a template if it has changed. Your meta language Markup is also translated to HTML on Stackoverflow, why not doing the same for the whole rest of the page as well? It is not a performance issue and using a high level language, it’s not such a big coding issue either.